Form
A form lets people enter information.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Form, FormHeader, FormSection, FormFooter, Field, Label, HelperMessage, ErrorMessage } from '@wolf-rayet/react';Form props
This component takes no props of its own.
Any other props are passed to the underlying form, so standard attributes and event handlers work as usual.
FormHeader props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| title * | string | None | The form title, shown in the header. Say what the form does. |
| description | string | None | One or two sentences on why the form exists or what will happen on submit. |
FormSection props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | For a section, the fields it groups. For a footer, the actions. |
FormFooter props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | For a section, the fields it groups. For a footer, the actions. |
Field props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | For a section, the fields it groups. For a footer, the actions. |
Label props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | For a section, the fields it groups. For a footer, the actions. |
| isRequired | boolean | None | Marks a label as required. |
Any other props are passed to the underlying label, so standard attributes and event handlers work as usual.
HelperMessage props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | For a section, the fields it groups. For a footer, the actions. |
ErrorMessage props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | For a section, the fields it groups. For a footer, the actions. |
Accessibility
What the component does for you, and what it needs from you.
- Every field needs a real label. This is the rule broken most often, and it matters most.
- Errors are linked to their fields, so screen reader users hear the problem at the field, not in a list at the top with no way back.
- When a submit fails, move focus to the first problem. Otherwise keyboard users have to search for it.
- Required is carried in the markup, not only in an asterisk drawn beside the label.