Input
Single-line text field with an invalid state. Renders a real <input>, so
type, value, onChange, placeholder, and the rest pass through unchanged.
Props
| Prop | Values | Default | Description |
|---|---|---|---|
size | "sm", "md", "lg" | "md" | Height, padding, and text size. |
invalid | boolean | false | Applies the danger border and sets aria-invalid. |
className | string | "" | Appended after the component's own classes. |
All other <input> attributes are forwarded, including type and ref.
Common patterns
<Input type="email" placeholder="[email protected]" />
<Input invalid value={email} onChange={(e) => setEmail(e.target.value)} />
<Input disabled value="Read only" />
// With a label
<label htmlFor="email" className="text-sm font-medium">Email</label>
<Input id="email" type="email" />Notes
When invalid is false, the aria-invalid attribute is omitted from the DOM
entirely rather than set to "false" — screen readers treat a missing
attribute and aria-invalid="false" the same way, and the smaller DOM is
easier to read.
The component has no built-in label. Pair it with a <label htmlFor> and give
the input an id.