Components
Input
Token-driven text field with label, helper text, and error state.
We never share it.
Already in use.
States
Default, focused (brand focus ring), error (error palette + ring), and disabled. Focus ring and borders all read from tokens.
Usage
import { Input } from '@cdz/ui';
<Input label="Email" placeholder="you@codazen.com" />
<Input label="Email" helperText="We never share it." />
<Input label="Username" error helperText="Already in use." />
<Input label="Locked" disabled />Accessibility
The label is associated with the input via htmlFor/id, helperText is
wired through aria-describedby, and error sets aria-invalid. An id is
auto-generated when not supplied.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | — | Field label |
helperText | string | — | Helper or error message |
error | boolean | false | Error palette + aria-invalid |
fullWidth | boolean | false | Stretch to container |
All other native <input> attributes pass through; the component forwards its
ref.