Form
Build accessible forms with validation. Fully supports RTL layouts with proper field alignment and error message positioning.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
With Validation
tsx
With Select
tsx
Built-in Validators
Validator
Usage
Description
requiredvalidators.required('Message')Field must not be empty
emailvalidators.email('Message')Must be valid email format
minLengthvalidators.minLength(8, 'Message')Minimum character length
maxLengthvalidators.maxLength(100, 'Message')Maximum character length
patternvalidators.pattern(/regex/, 'Message')Custom regex validation
composeValidatorscomposeValidators(v1, v2)Combine multiple validators
Props
| Name | Type | Default | Description |
|---|---|---|---|
initialValues | Record<string, any> | {} | Initial form field values |
validators | Record<string, (value: any) => string | undefined> | {} | Field validation functions |
onSubmitRequired | (values: Record<string, any>) => void | Promise<void> | - | Form submission handler |
Accessibility
Form Labels
All form fields must have associated labels. Use the FormLabel component for proper accessibility.
Error Messages
Error messages are announced to screen readers via FormMessage. Validation happens on blur and submit events.
Keyboard Navigation
- Tab: Navigate between form fields
- Enter: Submit form
- Escape: Blur current field
Required Fields
Required fields are marked with an asterisk (*) and properly indicated to screen readers.
RTL Considerations
Form components are fully RTL-compatible with bilingual validation message support.