Forms · Application UI
Input
A styled text input field that wraps Base UI's Input primitive, supporting all native HTML input attributes with consistent focus, disabled, and validation states.
Feature showcase
Installation
Features
Native input API
Forwards standard input attributes while keeping registry styling consistent.
Validation-aware styling
Uses aria-invalid to switch border and focus treatment to destructive tokens.
Form composition examples
Documents labels, icons, adornments, file uploads, and adjacent actions.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | React.HTMLInputTypeAttribute | "text" | The type of the input element (e.g. "text", "email", "password"). |
| className | string | - | Additional CSS classes merged onto the input element. |
| placeholder | string | - | Placeholder text shown when the input is empty. |
| disabled | boolean | false | Disables the input, preventing interaction and applying reduced-opacity styling. |
| aria-invalid | boolean | "true" | "false" | - | Marks the input as invalid, applying destructive border and ring styles. |
| value | string | number | readonly string[] | - | Controlled value of the input. |
| onChange | React.ChangeEventHandler<HTMLInputElement> | - | Change event handler called when the input value changes. |
Exports
| Export | Kind | Description |
|---|---|---|
| Input | component | Styled Base UI input primitive. |
Slots
| Slot | Element | Description |
|---|---|---|
| input | input | Root input element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/input.tsx |
| Default example | content/examples/input/default.tsx |
| Error example | content/examples/input/error.tsx |