Skip to main content
The Select component provides a customizable dropdown for selecting from a list of options.

​
Installation

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectPortal,
  SelectPositioner,
  SelectPopup,
  SelectItem,
  SelectItemList,
} from "@craftdotui/baseui/components/select";

​
Usage

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectPortal>
    <SelectPositioner>
      <SelectPopup>
        <SelectItemList>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
          <SelectItem value="option3">Option 3</SelectItem>
        </SelectItemList>
      </SelectPopup>
    </SelectPositioner>
  </SelectPortal>
</Select>

​
Components

​
Select (Root)

​
value
string
Controlled selected value.
​
defaultValue
string
Default value for uncontrolled usage.
​
onValueChange
function
Callback when selection changes.

​
SelectTrigger

​
size
string
default:"md"
Size of the trigger. Options: sm, md, lg
​
variant
string
Variant style. Options: unstyled
​
hideSelectTriggerIcon
boolean
Hide the chevron icon.

​
SelectItem

​
value
string
required
Value of the option.
​
hideIndicator
boolean
Hide the check indicator.
​
disabled
boolean
Disable the item.

​
Examples

​
Basic Select

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Choose..." />
  </SelectTrigger>
  <SelectPortal>
    <SelectPositioner>
      <SelectPopup>
        <SelectItemList>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="orange">Orange</SelectItem>
        </SelectItemList>
      </SelectPopup>
    </SelectPositioner>
  </SelectPortal>
</Select>

​
With Groups

import { SelectGroup, SelectGroupLabel } from "@craftdotui/baseui/components/select";

<SelectItemList>
  <SelectGroup>
    <SelectGroupLabel>Fruits</SelectGroupLabel>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectGroup>
  <SelectGroup>
    <SelectGroupLabel>Vegetables</SelectGroupLabel>
    <SelectItem value="carrot">Carrot</SelectItem>
    <SelectItem value="potato">Potato</SelectItem>
  </SelectGroup>
</SelectItemList>

​
Sizes

<SelectTrigger size="sm">Small</SelectTrigger>
<SelectTrigger size="md">Medium</SelectTrigger>
<SelectTrigger size="lg">Large</SelectTrigger>

​
Accessibility

  • Built on @base-ui/react for ARIA compliance
  • Keyboard navigation (Arrow keys, Enter, Escape)
  • Type-ahead search support
  • Focus management
  • Screen reader announcements

Build docs developers (and LLMs) love

Get started for freeTalk to us