Text field
A text field lets users enter or edit text.
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 { 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 | None | Marks the field as failing validation. Always pair it with an error message saying what is wrong. |
| isDisabled | boolean | None | Use only when people can see why the field is unavailable. |
Any other props are passed to the underlying input, so standard attributes and event handlers work as usual.
Field props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | 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 | None | For Field, the label, the control and any message, in that order. |
| isRequired | boolean | None | Marks the label as required. When most fields are required, mark the required ones, not the optional ones. |
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 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 | None | 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 disappears when people type, and screen readers do not always announce it. Always use a real label.
- Helper and error messages are linked to the field, so screen readers read them as part of it.
- The field is 40px tall with 16px text. Both sizes were measured.