Input
Single-line text entry. 40px tall with an 8px radius — the same box as Select so fields align in forms.
Types
Text, Password (with reveal) and Search.
<Input placeholder="Enter text..." /> <Input type="password" /> <Input type="search" />
States
Focus is shown on interaction; Error and Disabled are props.
<Input error /> <Input disabled />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "text" | "password" | "search" | "email" | "text" | Password adds a reveal button; Search adds a leading icon. |
error | boolean | false | Error border and aria-invalid. |
disabled | boolean | false | Disabled state. |
…rest | input attributes | — | placeholder, value, onChange… |
Usage
Do
- Pair with a visible label.
- Explain errors in text, not just red.
Don't
- Use placeholder text as the label.