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 |
Tokens
CSS custom properties zyra-form-field reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Label--zyra-color-field-label-color | var(--zyra-color-foreground-muted) | Color of the field label. |
Required mark--zyra-color-field-required-mark | var(--zyra-color-danger-foreground) | Color of the required-field asterisk. |
Icon--zyra-color-field-icon-color | var(--zyra-color-foreground-subtle) | Color of the prefix/suffix icon, clear button, and loading spinner. |
Background--zyra-color-field-bg | var(--zyra-color-input-bg) | Fill color of the field in the outline/filled appearances. |
Border--zyra-color-field-border | var(--zyra-color-input-border) | Border color of the field in its resting state. |
Filled background--zyra-color-field-filled-bg | var(--zyra-color-surface-inset) | Fill color specific to the filled appearance. |
Focus border--zyra-color-field-focus-border | var(--zyra-color-primary) | Border/underline color and label color when the field is focused. |
Hint--zyra-color-field-hint-color | var(--zyra-color-foreground-muted) | Color of the helper text below the field. |
Counter--zyra-color-field-counter-color | var(--zyra-color-foreground-subtle) | Color of the character counter. |
Counter (warn)--zyra-color-field-counter-warn | var(--zyra-color-warning-foreground) | Counter color when approaching the character limit. |
Counter (error)--zyra-color-field-counter-error | var(--zyra-color-danger-foreground) | Counter color when over the character limit. |
Success color--zyra-color-field-success-color | var(--zyra-color-success-foreground) | Border, label, and hint color in the success state. |
Success shadow--zyra-field-success-shadow | 0 0 0 3px var(--zyra-color-success-subtle) | Focus ring shadow in the success state. |
Error color--zyra-color-field-error-color | var(--zyra-color-danger-foreground) | Border, label, and hint color in the error state. |
Error shadow--zyra-field-error-shadow | 0 0 0 3px var(--zyra-color-danger-subtle) | Focus ring shadow in the error state. |
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"