Home
URL Field
URL Field wraps an input with URL validation, showing a clickable link preview when not in edit mode.
Usage
Use URL Field when a value should be editable as a URL but readable as a clickable link when not being edited.
<wc-url-field label="Website" value="https://peacock.redvars.com" helper-text="Click the edit icon to update the URL"></wc-url-field>
<wc-url-field label="Documentation link" variant="outlined" placeholder="https://example.com/docs" helper-text="Outlined variant with an empty value"></wc-url-field>
<wc-url-field label="Editable URL" editing="true" value="https://example.com/start" placeholder="https://example.com"></wc-url-field>
States
The component supports the same field states as other Peacock inputs, and it also validates URL format automatically when editing ends.
<wc-url-field label="Disabled URL" value="https://example.com/disabled" disabled="true"></wc-url-field>
<wc-url-field label="Read only URL" value="https://example.com/read-only" readonly="true"></wc-url-field>
<wc-url-field label="Warning state" value="https://example.com/legacy" warning="true" warning-text="This endpoint is still available, but a new URL is preferred."></wc-url-field>
<wc-url-field label="Forced error state" value="https://example.com/error" error="true" error-text="This URL is already in use by another record."></wc-url-field>
For built-in validation, enter an invalid URL while editing and blur the field. The component emits input-invalid and shows Please enter a valid URL.
Events
URL Field emits a debounced value-change event as the user types and an input-invalid event when blur validation fails.
<wc-url-field id="url-field-events-demo" label="Project URL" editing="true" placeholder="https://example.com"></wc-url-field>
<script>
const urlField = document.querySelector('#url-field-events-demo');
urlField.addEventListener('value-change', function(event) {
myConsole.log('value-change :: ' + event.detail);
});
urlField.addEventListener('input-invalid', function(event) {
myConsole.warn('input-invalid :: ' + event.detail);
});
urlField.addEventListener('change', function(event) {
myConsole.log('change :: ' + event.target.value);
});
</script>
On this page
Usage States Events