Select

v0.6.2
Stable

A bare select control (built on Radix's `Select`) — the Radix trigger button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.

pnpm add @behivetech/atoms.select

This is the snapshot of v0.6.2, the current version, as recorded on 2026-11-10. The live page runs its examples →

A bare select control (built on Radix's Select) — the Radix trigger button is this component's own root element. It has no built-in label/hint/error; wrap it in FormField for that chrome.

Usage

1import { Select } from '@behivetech/atoms.select';
2import { FormField } from '@behivetech/forms.form-field';
3

4const [value, setValue] = useState('');
5const roleOptions = [
6  { label: 'Editor', value: 'editor' },
7  { label: 'Admin', value: 'admin' },
8];
9

10<Select
11  placeholder="Choose a color"
12  options={[
13    { label: 'Red', value: 'red' },
14    { label: 'Green', value: 'green' },
15    { label: 'Blue', value: 'blue' },
16  ]}
17  value={value}
18  onValueChange={setValue}
19/>
20

21<FormField label="Role" htmlFor="role">
22  <Select id="role" options={roleOptions} value={value} onValueChange={setValue} />
23</FormField>

Pass invalid (adds the --invalid modifier and sets aria-invalid) to visually mark the field as invalid (pair with FormField's error prop for the message).

Examples

Open all 4 →
Basic Select
1const colorOptions = [
2  { label: "Red", value: "red" },
3  { label: "Green", value: "green" },
4  { label: "Blue", value: "blue" },
5];
6

7const BasicSelect = () => {
8  const [value, setValue] = useState("");
9  return (
10    <Select
11      placeholder="Choose a color"
12      options={colorOptions}
13      value={value}
14      onValueChange={setValue}
15    />
16  );
17};
18

19render(<BasicSelect />);
Select With Form Field
1const roleOptions = [
2  { label: "Admin", value: "admin" },
3  { label: "Editor", value: "editor" },
4  { label: "Viewer", value: "viewer" },
5  { label: "Guest (disabled)", value: "guest", disabled: true },
6];
7

8const SelectWithFormField = () => {
9  const [value, setValue] = useState("");
10  return (
11    <FormField
12      label="Role"
13      htmlFor="role"
14      hint="Determines what the user can access."
15    >
16      <Select
17        id="role"
18        placeholder="Select a role"
19        options={roleOptions}
20        value={value}
21        onValueChange={setValue}
22      />
23    </FormField>
24  );
25};
26

27render(<SelectWithFormField />);

Properties

Select props

PropTypeDefaultDescription
options*SelectOption[]—Options rendered in the dropdown
asChildboolean——
classNamestring—Additional class names to merge with the component root element
defaultValuestring—Initial selected value for uncontrolled usage
invalidbooleanfalseMarks the field as invalid: adds the `--invalid` modifier and sets `aria-invalid="true"`
namestring—Form field name submitted with the value
onValueChange((value: string) => void)—Called with the new value when the selection changes
placeholderstring—Text shown when no value is selected
requiredboolean—Marks the field as required for form validation
valuestring—Controlled selected value

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).