Skip to contentWolf-Rayet

Form

A form allows people to input information.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react
import '@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.

Anything else you pass is forwarded to the underlying form, so the standard attributes and event handlers work as they normally would.

FormHeader props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
title *string—The form title, on the header. Say what the form achieves.
descriptionstring—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.

PropTypeDefaultDescription
children *ReactNode—For a section, the fields it groups. For a footer, the actions.

FormFooter props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—For a section, the fields it groups. For a footer, the actions.

Field props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—For a section, the fields it groups. For a footer, the actions.

Label props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—For a section, the fields it groups. For a footer, the actions.
isRequiredboolean—Marks a label as required.

Anything else you pass is forwarded to the underlying label, so the standard attributes and event handlers work as they normally would.

HelperMessage props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—For a section, the fields it groups. For a footer, the actions.

ErrorMessage props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—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 single rule that fails most often and matters most.
  • Errors are associated with their fields, so a reader hears the problem on the field rather than as a list at the top with no route back.
  • On a failed submit, move focus to the first problem, or a keyboard reader has to hunt for it.
  • Required is carried in the markup, not only in an asterisk drawn beside the label.