Forms
Form Field
A wrapper that ties a label, help text, and error to a field. It wires up the links so screen readers read the right description.
ReactVueWeb Components
View in Storybook Playground
Examples
<FormField label="Email" help="We never share it." error={err} required>
<Input type="email" />
</FormField>Props
| Name | Type | Default | Description |
|---|---|---|---|
label required | ReactNode | — | Field label text. |
help | ReactNode | — | Optional help/hint text below the control. |
error | ReactNode | — | Error message; when present, the field is marked invalid. |
required | boolean | — | Mark the field as required (adds an indicator + `required` on control). |
hideLabel | boolean | — | Visually hide the label (still available to screen readers). |
children required | ReactNode | — | The control (Input, Select, …). |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.