Waiting for action
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
URL variant of TextField.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Value. |
onChange | (event) => void | — | Change handler. |
placeholder | string | — | Placeholder. |
type | "url" | "url" | Fixed input type. |
mode | "stacked" | "flagged" | "stacked" | Layout mode for label and control. |
labelPosition | "left" | "right" | "left" | Label placement in flagged mode. |
error | string | — | Validation message; sets aria-invalid when present. |
help | string | — | Supplementary help text linked via aria-describedby. |
required | boolean | false | Marks the field as required for assistive tech. |
FieldShell for label, help, error, and required wiring.htmlFor / id.These controls expose the browser's native form behaviour instead of replacing it. Configure the following props directly; use inputProps for additional valid attributes that are specific to an input type.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Name submitted with the owning form. |
autoComplete | string | type-specific | Autofill purpose token such as name, email, current-password, or one-time-code. |
autoCapitalize | string | type-specific | Mobile text capitalization hint. |
autoCorrect | `"on" | "off"` | type-specific |
spellCheck | boolean | type-specific | Enables or disables browser spell checking. |
inputMode | string | type-specific | Virtual keyboard hint such as email, tel, numeric, or search. |
enterKeyHint | string | browser default | Labels the virtual keyboard's enter key. |
autoFocus | boolean | false | Requests focus when mounted; use sparingly because it can disrupt assistive technology and mobile users. |
readOnly | boolean | false | Keeps the value focusable and submitted but prevents editing. |
disabled | boolean | false | Prevents interaction and excludes the value from submission. |
inputProps | native attribute object | — | Additional standards-based input or textarea attributes. Controlled value, ID, classes, and ARIA wiring remain owned by the component. |
Use autocomplete purpose tokens that describe the data rather than arbitrary labels. Browser support varies by input type, and autofocus should be enabled only when the surrounding context remains clear.