Skip to content
Borneo Design System

Select

Stable

Choose one option from a known list. Built on Radix Select so typeahead, arrow-key navigation and focus restoration behave the way a native dropdown does — with styling the native element will not allow.

Added in v1.2.0 · import from "@borneo/react"

Interactive previewPermalink to this section

Open the list and type the first letters of a region — typeahead works exactly as it does on a native select.

Size
State
select-preview.tsx
<Select>
  <SelectTrigger size="md">
    <SelectValue placeholder="Choose a region" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="eu-west">Europe — Dublin</SelectItem>
    <SelectItem value="us-east">North America — Virginia</SelectItem>
  </SelectContent>
</Select>

AnatomyPermalink to this section

The list renders in a portal, above everything else.

Grouped optionsPermalink to this section

Group when the list has natural categories. Groups make a long list scannable without adding a second control.

Sizes and statesPermalink to this section

Small — 36px

Medium — 44px

Selected

Invalid

Paired with a message

Disabled

With a disabled option

Related components