URLField
Collect URLs from users with built-in formatting and validation.
Anchor to urlfieldURLField
- Anchor to autocompleteautocomplete"on" | "off" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | "shipping url" | "shipping photo" | "shipping impp" | "shipping home impp" | "shipping mobile impp" | "shipping fax impp" | "shipping pager impp" | "billing url" | "billing photo" | "billing impp" | "billing home impp" | "billing mobile impp" | "billing fax impp" | "billing pager impp" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteFieldDefault: 'on' for everything else
A hint as to the intended content of the field.
When set to
on(the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.When set to
off, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.
- Anchor to defaultValuedefaultValuestring
The default value for the field.
- Anchor to detailsdetailsstring
Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.
This will also be exposed to screen reader users.
- Anchor to disableddisabledbooleanDefault: false
Disables the field, disallowing any interaction.
- Anchor to errorerrorstring
Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
- string
A unique identifier for the element.
- Anchor to labellabelstring
Content to use as the field label.
- Anchor to labelAccessibilityVisibilitylabelAccessibilityVisibility"visible" | "exclusive"Default: 'visible'
Changes the visibility of the component's label.
visible: the label is visible to all users.exclusive: the label is visually hidden but remains in the accessibility tree.
- Anchor to maxLengthmaxLengthnumberDefault: Infinity
Specifies the maximum number of characters allowed.
- Anchor to minLengthminLengthnumberDefault: 0
Specifies the min number of characters allowed.
- Anchor to namenamestring
An identifier for the field that is unique within the nearest containing form.
- Anchor to placeholderplaceholderstring
A short hint that describes the expected value of the field.
- Anchor to readOnlyreadOnlybooleanDefault: false
The field cannot be edited by the user. It is focusable will be announced by screen readers.
- Anchor to requiredrequiredbooleanDefault: false
Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the
errorproperty.- Anchor to valuevaluestring
The current value for the field. If omitted, the field will be empty.
URLAutocompleteField
'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'Anchor to eventsEvents
Learn more about registering events.
- Anchor to blurblurCallbackEventListener<'input'>
- Anchor to changechangeCallbackEventListener<'input'>
- Anchor to focusfocusCallbackEventListener<'input'>
- Anchor to inputinputCallbackEventListener<'input'>
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}Code
Examples
Code
jsx
<s-url-field label="Your website" details="Join the partner ecosystem" placeholder="https://shopify.com/partner" />html
<s-url-field label="Your website" details="Join the partner ecosystem" placeholder="https://shopify.com/partner" ></s-url-field>
Anchor to examplesExamples
Component examples
Anchor to example-basic-usageBasic usage
Anchor to example-basic-usageBasic usage
Demonstrates a simple URL input field with a label and placeholder, showing the minimal configuration needed for collecting a URL.
Anchor to example-with-validationWith validation
Shows a URL input field with built-in validation, including required status, minimum and maximum length constraints, and a custom error message for invalid inputs.
Anchor to example-with-default-valueWith default value
Illustrates a URL field pre-populated with a default value, set to read-only mode to prevent user modifications.
Anchor to example-disabled-stateDisabled state
Shows a URL field in a disabled state, displaying a pre-filled URL that cannot be edited by the user.
Basic usage
Examples
Basic usage
Description
Demonstrates a simple URL input field with a label and placeholder, showing the minimal configuration needed for collecting a URL.
jsx
<s-stack gap="base"> {/* Simple URL input */} <s-url-field label="Website URL" placeholder="https://example.com" /> </s-stack>html
<s-stack gap="base"> <!-- Simple URL input --> <s-url-field label="Website URL" placeholder="https://example.com" ></s-url-field> </s-stack>With validation
Description
Shows a URL input field with built-in validation, including required status, minimum and maximum length constraints, and a custom error message for invalid inputs.
jsx
<s-url-field label="Company website" required minLength={10} maxLength={200} error="Please enter a valid website URL" />html
<s-url-field label="Company website" required minLength="10" maxLength="200" error="Please enter a valid website URL" ></s-url-field>With default value
Description
Illustrates a URL field pre-populated with a default value, set to read-only mode to prevent user modifications.
jsx
<s-stack gap="base"> <s-url-field label="Profile URL" defaultValue="https://shop.myshopify.com" readOnly /> </s-stack>html
<s-stack gap="base"> <s-url-field label="Profile URL" value="https://shop.myshopify.com" readOnly ></s-url-field> </s-stack>Disabled state
Description
Shows a URL field in a disabled state, displaying a pre-filled URL that cannot be edited by the user.
jsx
<s-url-field label="Store URL" value="https://your-store.myshopify.com" disabled />html
<s-url-field label="Store URL" value="https://your-store.myshopify.com" disabled ></s-url-field>