Text field
A text field is an input that allows a user to write or edit text.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { TextField, Field, Label, HelperMessage, ErrorMessage } from '@wolf-rayet/react';TextField props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| isInvalid | boolean | — | Marks the field as failing validation. Always pair it with an error message saying what is wrong. |
| isDisabled | boolean | — | Use only when the reader can see why the field is unavailable. |
Anything else you pass is forwarded to the underlying input, so the standard attributes and event handlers work as they normally would.
Field props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | For Field, the label, the control and any message, in that order. |
Label props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | For Field, the label, the control and any message, in that order. |
| isRequired | boolean | — | Marks the label as required. Mark the required fields rather than the optional ones when most are 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.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | For Field, the label, the control and any message, in that order. |
ErrorMessage props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | For Field, the label, the control and any message, in that order. |
Accessibility
What the component does for you, and what it needs from you.
- The label is tied to the input, so clicking it focuses the field and a screen reader announces the two together.
- A placeholder is not a label. It vanishes on typing and is not reliably announced, which is why the one rule here is to use a real label.
- Helper and error messages are associated with the field, so they are read as part of it rather than as loose text nearby.
- The field is 40px tall with a 16px value, measured rather than guessed.