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
FormLabel and input components (Input, Textarea, Select, Checkbox, Switch) are automatically connected when used inside a FormField — no manual id or htmlFor needed.
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
Forms automatically support RTL layout. Labels, fields, and error messages align properly in both directions.
LTR (English)
RTL (العربية)
Use Cases
User registration and login
Settings and preferences panels
Contact and feedback forms
Multi-step data collection
Best Practices
Do
- ✓ Show validation errors inline next to the relevant field
- ✓ Group related fields with clear section headings
- ✓ Use Zod or similar for schema-based validation
- ✓ Indicate required fields clearly
Don't
- ✗ Don't validate on every keystroke — use onBlur or onSubmit
- ✗ Don't reset the form on validation error
- ✗ Don't mix controlled and uncontrolled inputs