Component
FormField
A wrapper component to standardize labels, hints, and error messages for inputs.
Usage
Pick a unique username
Basic FormField with Input
tsx
<FormField label="Username" hint="Pick a unique username" required>
<Input placeholder="neo_brutalist" />
</FormField>
Error State
Please enter a valid email address.
Error messages override hints and display in red
tsx
<FormField label="Email" error="Please enter a valid email address." required>
<Input placeholder="example@email.com" variant="outline" />
</FormField>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label text displayed above the input. |
| hint | string | — | Hint text displayed below the input. |
| error | string | — | Error message (replaces hint when present). |
| required | boolean | false | Adds an asterisk (*) to the label. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size preset. |
| fullWidth | boolean | false | Stretches the form field to fill its container. |