Inputalternative
Use Input for simple fields with built-in label/errorField
Compositional form field wrapper providing validation, labels, descriptions, and error messages. Use for advanced form needs beyond baked-in Input/Textarea props.
Setup
import { Field } from '@fragments-sdk/ui';Examples
Single field
A single field with label, control, and description
Loading preview...
Two-column layout
Fields arranged in a two-column grid
Loading preview...
Custom validation
Field with custom validate function
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Field content (Label, Control, Description, Error) |
name | string | Not set | Field name, used for error distribution from Form |
disabled | boolean | Not set | Disables the field and its control |
invalid | boolean | Not set | Marks the field as invalid |
validate | function | Not set | Custom validation function returning error string(s) or null |
validationMode | enumonSubmitonBluronChange | Not set | When to trigger validation |
validationDebounceTime | number | Not set | Debounce time in ms for onChange validation |
Usage Guidelines
When to use
- You need granular validation with match-based error messages
- Custom form controls need accessible labels and descriptions
- Server-side errors need to be distributed to specific fields
- You need dirty/touched tracking or custom validation logic
When not to use
- Simple inputs with basic label and helper text (use Input with label prop)
- Standalone selects or textareas with built-in error display
Best practices
- Always provide a Field.Label for accessibility
- Wrap any form control in Field.Control to connect it to the field context
- Use match prop on Field.Error for granular native validation messages
- Wrap in Form to enable server-side error distribution by field name
Accessibility
- Label automatically linked to control via aria-labelledby
- Description linked via aria-describedby
- Error messages announced to screen readers
- Supports data-disabled and data-invalid attributes for styling