Form
The Form component provides a comprehensive way to collect and validate user input.
Features
- Composable with primitives
- Accessible label associations
- Validation wiring
- Consistent token-based styling
Examples
Patterns migrated from the legacy docs: sign up, profile settings, survey feedback, booking, and a wider two-column layout. Each row is a live preview with a snippet; shared helpers FormField and CustomSelect live in FormExample.tsx in this repo.
Styling uses semantic tokens from @ariaui/tokens (bg-card, border-border, text-foreground, etc.). Swap primitives or wire real date pickers where placeholders say "Pick a date".
Sign up
A compact card focused on email and password.
No preview output yet.
Profile settings
Inputs, a select, and a switch for preferences.
No preview output yet.
Survey feedback
Text inputs, a rating select, and a textarea.
No preview output yet.
Service booking
Select, date affordance, checkbox, and dual actions.
No preview output yet.
Complex multi-column
Two-column layout mixing inputs, radio group, select, and textarea.
No preview output yet.
Accessibility
- Labels — always use
<label htmlFor>with matchingidon inputs. - Placeholders — never use
placeholderalone; always pair with visible labels. - Error messages — link errors to fields via
aria-describedby. - Focus indicators — ensure keyboard focus remains visible on all interactive elements.