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 →

Examples of v0.6.2 are shown as code; only the latest version runs live. Open the live examples →

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 />);
Select With Error
1const colorOptions = [
2  { label: "Red", value: "red" },
3  { label: "Green", value: "green" },
4  { label: "Blue", value: "blue" },
5];
6

7const SelectWithError = () => (
8  <FormField label="Status" htmlFor="status" error="Please select a status.">
9    <Select
10      id="status"
11      invalid
12      placeholder="Select status"
13      options={colorOptions}
14    />
15  </FormField>
16);
17

18render(<SelectWithError />);
Disabled Select
1const colorOptions = [
2  { label: "Red", value: "red" },
3  { label: "Green", value: "green" },
4  { label: "Blue", value: "blue" },
5];
6

7const DisabledSelect = () => (
8  <Select disabled options={colorOptions} value="red" />
9);
10

11render(<DisabledSelect />);