Select
A select lets users choose one or more options from a list.
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 { Select } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| options * | readonly SelectOption[] | None | The choices, in a sensible order. Use alphabetical order unless another order is more useful. |
| placeholder | string | None | Shown when nothing is selected. Say what to choose, as in Choose a queue. |
| isInvalid | boolean | None | Marks the field as failing validation. Pair it with a message. |
| isDisabled | boolean | None | Use only when people can see why. |
Any other props are passed to the underlying select, so standard attributes and event handlers work as usual.
Accessibility
What the component does for you, and what it needs from you.
- It is a native select, so it behaves the way people expect on every device.
- The label is linked to the control. The placeholder does not replace it.
- The control is 40px tall with a 6px radius.