A React input with a Liquid Glass field and icon slots.
Input renders a glass control around a native <input>, with optional leading and trailing icons. The input owns its glass surface and native form behavior; wrap it in Field to provide a visible label, description, and validation message.
Use value with onValueChange for a controlled field, or defaultValue for an uncontrolled one. Native input attributes such as type, name, placeholder, required, and readOnly are forwarded. size is reserved for the component's visual scale, and style merges into the outer root alongside className.
Enter an email address.
Five sizes are available: xs, sm, md, lg, and xl. Height, padding, radius, text, and icon sizes scale together. Pass the same size to Field when the label and message should match.
leadingIcon renders before the input and trailingIcon after it. Both slots are decorative and receive aria-hidden="true"; use the visible label from Field, or aria-label when there is no visible label.
disabled is forwarded to the native input and fades the control. Set disabled on Field when the input is wrapped so the label and message fade with it. readOnly keeps the value focusable and selectable while preventing edits.
Input renders a native <input>. Wrap it in Field to give it a visible label, description, and validation message; Field wires aria-describedby and aria-invalid for you. Use aria-label or aria-labelledby only when no visible label is rendered; placeholder text is not a label. Icon slots are decorative. Native attributes such as required, name, and type keep native form behavior. See the accessibility guide for labeling patterns.
| Prop | Type | Default | Description |
|---|---|---|---|
leadingIcon | ReactNode | — | Decorative icon before the input. |
trailingIcon | ReactNode | — | Decorative icon after the input. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Controls height, padding, radius, text, and icon size. |
value | string | number | readonly string[] | — | Controlled value. |
defaultValue | string | number | readonly string[] | — | Initial value when uncontrolled. |
onValueChange | (value: string, details) => void | — | Called when the value changes. |
type | HTMLInputTypeAttribute | "text" | Native input type. |
placeholder | string | — | Placeholder text. |
name | string | — | Form field name. |
id | string | generated | ID of the input. A generated ID is used when omitted. |
disabled | boolean | false | Disables the input and fades the whole control. |
readOnly | boolean | false | Prevents edits while keeping the value focusable and selectable. |
required | boolean | false | Requires a value for form submission. |
aria-label | string | — | Accessible name when no visible label is rendered. |
aria-labelledby | string | — | ID reference for an external accessible name. |
aria-describedby | string | — | ID reference for extra supporting text. Field descriptions and errors are merged with this value. |
render | ReactElement | ((props, state) => ReactElement) | — | Replaces the input element. |
ref | Ref<HTMLElement> | — | Ref forwarded to the input element. |
className | string | — | Tailwind classes merged into the outer root. |
style | CSSProperties | — | Inline styles merged into the same element as className. |
ui | { root?: ClassValue; control?: ClassValue; glass?: ClassValue; overlay?: ClassValue; leadingIcon?: ClassValue; input?: ClassValue; trailingIcon?: ClassValue } | — | Tailwind classes for internal slots, keyed by data-slot. |
| Attribute | Description |
|---|---|
data-disabled | Present when the input is disabled. |
data-valid | Present when the input is valid and wrapped in Field. |
data-invalid | Present when the input is invalid and wrapped in Field. |
data-touched | Present after the input is touched while wrapped in Field. |
data-dirty | Present after the input value changes while wrapped in Field. |
data-filled | Present when the input has a value while wrapped in Field. |
data-focused | Present when the input is focused while wrapped in Field. |
data-slot | Marks internal parts (root, control, glass, overlay, leading-icon, input, trailing-icon) for styling. |
The component uses the shared glass material. Tune shared --ui-glass-* tokens on a parent, use className and style for layout, and use ui for internal slots keyed by data-slot. style applies to the outer root; use ui.input for the native input. Component-specific values live in src/theme/input.ts. See the theming guide for token layers and presets.