Search for a command to run...
A single-line text input. Wraps a native `<input>` so all native attributes (type, autoComplete, required, pattern, etc.) work without escape hatches.
The unstyled variant strips all chrome — border, surface, shadow, focus ring,
and the intrinsic height/padding box — so the field inherits the surface it sits
in. Reserve it for inputs embedded in a composed surface (a composer row, an
inline title); a standalone field needs its chrome to be discoverable.
Forwards every native <input> attribute. The most relevant ones:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "unstyled" | "default" | default paints bordered chrome with a focus ring. unstyled strips all chrome + the height/padding box so the field inherits its surface — for composed surfaces only. |
size | "default" | "sm" | "lg" | "none" | "default" | Height + padding preset. Matches Button's sm/default/lg 1:1 so a Button and an Input on the same row line up. none is an escape hatch for callers bringing their own dimensions. |
type | string | "text" | Native input type. "email", "password", "number", "file", etc. all work. |
placeholder | string | undefined | Hint shown when the field is empty. |
disabled | boolean | false | Standard HTML disabled. Removes pointer events and dims the field. |
aria-invalid | boolean | false | Renders the destructive border for validation feedback. |
defaultValue | string | undefined | Uncontrolled initial value. |
value | string | undefined | Controlled value. Pair with onChange. |
Label from @delphi/ui/components/label for screen readers.Use type="email", type="tel", etc. so mobile keyboards adapt — and so the browser can
autofill.
Set aria-invalid (and an inline message) when validation fails, instead of clearing the field.
Provide autoComplete hints (email, current-password, one-time-code) — they meaningfully
speed users up.
Use placeholder text as a label — it disappears on focus and is invisible to screen readers.
Disable inputs to "lock" form state mid-flow without telling the user why; show a tooltip or inline message.
Strip whitespace or normalize values on every keystroke; do it on blur or submit so the user can still type.