Select

Select allows users to make a single selection or multiple selections from a list of options.

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 { Select } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
options *	readonly SelectOption[]	—	The choices, in a deliberate order. Alphabetical unless something else is more useful.
placeholder	string	—	Shown when nothing is chosen. Say what is being chosen, as in Choose a queue.
isInvalid	boolean	—	Marks the field as failing validation. Pair it with a message.
isDisabled	boolean	—	Use only when the reader can see why.

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

What the component does for you, and what it needs from you.

It is a native select, so it gets the platform behaviour on every device, including the one readers already know how to use.
The label is tied to the control, and the placeholder is not a substitute for it.
The control is 40px tall with a 6px radius, measured rather than guessed.