Select v0.6.0 · @behivetech

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

Prop	Type	Default	Description
`options*`	`SelectOption[]`	—	Options rendered in the dropdown
`asChild`	`boolean`	—	—
`className`	`string`	—	Additional class names to merge with the component root element
`defaultValue`	`string`	—	Initial selected value for uncontrolled usage
`invalid`	`boolean`	`false`	Marks the field as invalid: adds the `--invalid` modifier and sets `aria-invalid="true"`
`name`	`string`	—	Form field name submitted with the value
`onValueChange`	`((value: string) => void)`	—	Called with the new value when the selection changes
`placeholder`	`string`	—	Text shown when no value is selected
`required`	`boolean`	—	Marks the field as required for form validation
`value`	`string`	—	Controlled selected value

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

Usage

Examples

Properties

Select props

`Select` props