Select

A form control for choosing a predefined value from a dropdown list.

Fruit

Choose a fruit

import { Select } from '@ontoui/react';

<Select.Root>
  <Select.Label>Fruit</Select.Label>
  <Select.Trigger placeholder="Choose a fruit" />
  <Select.Popup>
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="banana">Banana</Select.Item>
    <Select.Item value="orange">Orange</Select.Item>
  </Select.Popup>
</Select.Root>;

Anatomy

Part	Description
Select.Root	Groups all parts of the select.
Select.Label	An accessible label associated with the trigger.
Select.Trigger	A button that opens the select popup and shows the selected value.
Select.Popup	A container for the select items.
Select.Item	An individual selectable option.
Select.Group	Groups related options together.
Select.GroupLabel	A label for a group of options.
Select.Separator	A visual separator between items or groups.

Examples

Disabled

A disabled select prevents user interaction.

Fruit

Choose a fruit

<Select.Root disabled>
  <Select.Label>Fruit</Select.Label>
  <Select.Trigger placeholder="Choose a fruit" />
  <Select.Popup>
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="banana">Banana</Select.Item>
  </Select.Popup>
</Select.Root>

Grouped

Use Select.Group and Select.GroupLabel to organize related options into sections.

Produce

Choose an item

<Select.Root>
  <Select.Label>Produce</Select.Label>
  <Select.Trigger placeholder="Choose an item" />
  <Select.Popup>
    <Select.Group>
      <Select.GroupLabel>Fruits</Select.GroupLabel>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="banana">Banana</Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Group>
      <Select.GroupLabel>Vegetables</Select.GroupLabel>
      <Select.Item value="carrot">Carrot</Select.Item>
      <Select.Item value="lettuce">Lettuce</Select.Item>
    </Select.Group>
  </Select.Popup>
</Select.Root>

API Reference

Select.Root

Prop	Type	Default
children?	ReactNode	—
defaultOpen?	boolean	—
defaultValue?	string	—
disabled?	boolean	—
name?	string	—
open?	boolean	—
required?	boolean	—
value?	string	—
onOpenChange?	(open: boolean) => void	—
onValueChange?	(value: string | null) => void	—

Select.Label

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Select.Trigger

Prop	Type	Default
className?	string	—
placeholder?	string	—
ref?	Ref<HTMLDivElement>	—

Select.Popup

Prop	Type	Default
children?	ReactNode	—
className?	string	—
alignItemWithTrigger?	boolean	true
ref?	Ref<HTMLDivElement>	—

Select.Item

Prop	Type	Default
children?	ReactNode	—
className?	string	—
value	string	—
disabled?	boolean	—
ref?	Ref<HTMLDivElement>	—

Select.Group

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Select.GroupLabel

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Select.Separator

Prop	Type	Default
className?	string	—
ref?	Ref<HTMLDivElement>	—