Form
Form state management system with validation schema integration, submission handling, error tracking, and field registration
Form
Layout components for building accessible forms with sections, descriptions and actions. Works standalone or with validation libraries like React Hook Form, Yup or Zod.
Basic form
Use Form, FormItem, FormLabel, FormControl and FormMessage to build forms quickly.
Sections & layout
Group related fields into FormSections and separate actions with FormActions. This keeps long forms organized and scannable.
Compact form layout
Use FormCompact for inline or dense layouts such as toolbars, filters or single-row forms.
Usage Guidelines
When to Use
- Complex forms
- Multi-step wizards
- Validation-heavy forms
Accessibility
- Form role and landmarks
- Error summary accessible
Performance
- Uncontrolled by default
- Minimal re-renders on input
Common Mistakes
- Not showing all errors at once
- No success feedback after submission
Frequently Asked Questions
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible checkbox input with indeterminate state support and form integration
Accessible CheckboxGroup for multi-selection, and form integration
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface