Form
Structured form layout with sub-components for fields, labels, and validation messages. Provides consistent spacing and typography for all form elements.
Basic Form
With Error Messages
Form Props
| Prop | Type | Default | Description |
|---|
| className | string | - | Additional CSS classes for the form element. |
| children* | ReactNode | - | Form content, typically FormField components. |
| onSubmit | FormEventHandler | - | Form submission handler. |
FormField Props
| Prop | Type | Default | Description |
|---|
| className | string | - | Additional CSS classes for the field wrapper. |
| children* | ReactNode | - | Field content: label, input, and optional message. |
FormLabel Props
| Prop | Type | Default | Description |
|---|
| htmlFor | string | - | The id of the associated form control. |
| children* | ReactNode | - | Label text content. |
FormMessage Props
| Prop | Type | Default | Description |
|---|
| error | boolean | false | When true, renders the message in destructive (error) color instead of muted. |
| children* | ReactNode | - | Message text content. |
Accessibility
- Uses semantic
<form>, <label>, and <p> elements. - Connect labels to inputs using
htmlFor and matching id attributes. - Error messages should be associated with their fields using
aria-describedby for screen reader announcements. - Use
aria-invalid="true" on inputs with validation errors.