Fieldsibling
Contains Field components for error distributionForm
Form wrapper that handles server-side error distribution to Field components. Pairs with Field for complete form validation.
Setup
import { Form } from '@fragments-sdk/ui';Examples
Sign up
Registration form with two-column name fields
Loading preview...
Profile settings
Multi-section form with Fieldsets, switches, and radio group
Loading preview...
Contact form
Contact form with select, textarea, and checkbox
Loading preview...
With server errors
Form displaying server-side validation errors
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Form content |
errors | object | Not set | Server-side errors keyed by field name |
onSubmit | function | Not set | Form submission handler (preferred) |
onFormSubmit | function | Not set | Deprecated alias for onSubmit |
onClearErrors | function | Not set | Called with field name when errors should be cleared |
validationMode | enumonSubmitonBluronChange | Not set | When field validation should run |
Usage Guidelines
When to use
- Building forms that need server-side error handling
- Distributing validation errors to specific fields by name
- Combining client and server validation in one form
When not to use
- Simple forms with only client-side validation (use native form or Field alone)
- Non-form layouts (use Grid or Card)
Best practices
- Pass errors as Record<string, string | string[]> keyed by field name
- Use onClearErrors to clear errors when fields are modified
- Use onSubmit for form submission handling (onFormSubmit is deprecated alias)
- Field components with matching name prop display errors automatically
- Use Grid inside Form or Fieldset for multi-column layouts
Accessibility
- Renders semantic form element
- Error messages linked to fields via aria-describedby