Form Field
Field wrappers that align labels, hints, and validation copy into a more polished form system.
API
All inputs and configuration options for zyra-form-field.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | '' | Visible label text linked to the child input |
hint | string | '' | Helper text shown below the input |
successHint | string | '' | Success message shown below the field (green) |
error (auto) | ValidationErrors | null | null | Error message is derived automatically from the child control — required, email, minlength, maxlength, min, max, and pattern validators are all handled; no error prop needed |
appearance | 'outline' | 'filled' | 'underline' | 'outline' | Visual style of the field border |
size | 'sm' | 'md' | 'lg' | 'md' | Passes size down to child input |
prefixIcon | ZyraIcon | '' | Icon shown inside the leading edge of the field |
suffixIcon | ZyraIcon | '' | Icon shown inside the trailing edge of the field |
maxLength | number | null | null | Shows a character counter below the field |
clearButton | boolean | false | Adds a clear × button inside the trailing edge |
loading | boolean | false | Shows a spinner in the trailing edge |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- label is automatically linked to the child input via htmlFor/id pairing
- hint and error text are linked via aria-describedby on the input
- When error is set, the child input receives aria-invalid="true"