Field
Composable form field wrapper providing label, helper text, error message orchestration, and validation state management
Field
Form field primitives with labels, hints, errors, descriptions and layout helpers. Works with inputs, textareas, selects and custom controls.
Props API
Use the Field component with props like label, description, hint, error, required and showOptional for fast inline forms.
We'll never share your email.
Must be at least 8 characters long
Choose a unique username
Composable API
For complex forms, compose Field, FieldLabel, FieldDescription, FieldHint and FieldError manually. This matches your recommended setup with live validation.
We'll never share your email with anyone else.
Must be at least 8 characters long
Maximum 500 characters.
FieldSet & FieldGroup
Use FieldSet to group related fields with a legend and FieldGroup to control grid layout, spacing and orientation.
Usage Guidelines
When to Use
- Form field layouts
- Input with labels
- Validation messages
Accessibility
- Proper label association
- Error messages linked with aria-describedby
Performance
- No wrapper overhead
- Passes props efficiently
Common Mistakes
- Placeholder as only label
- Helper text that's actually an error
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