Select

Single-choice menu for forms and filters. Prefer select when options are longer than a short radio group.

Examples

Fruit

Overview

Select is a composed Base UI control: trigger with value and icon, then a portaled popup list of items. Pass an items map on the root so SelectValue can show labels instead of raw values.

tsx

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectIcon,
  SelectPortal,
  SelectPositioner,
  SelectPopup,
  SelectList,
  SelectItem,
  SelectItemText,
} from "@standard-ui/react"

<Select
  items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
  defaultValue="apple"
>
  <SelectTrigger>
    <SelectValue />
    <SelectIcon />
  </SelectTrigger>
  <SelectPortal>
    <SelectPositioner>
      <SelectPopup>
        <SelectList>
          <SelectItem value="apple">
            <SelectItemText>Apple</SelectItemText>
          </SelectItem>
        </SelectList>
      </SelectPopup>
    </SelectPositioner>
  </SelectPortal>
</Select>

Usage

Items map

When you pass items, SelectValue renders the matching label for the selected value. Keep keys aligned with each item's value.

tsx

<Select
  items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
  defaultValue="apple"
>
  {/* trigger + popup */}
</Select>

Anatomy

Compose the full tree so positioning and accessibility stay intact: trigger → portal → positioner → popup → list → item.

tsx

Select
  SelectTrigger
    SelectValue
    SelectIcon
  SelectPortal
    SelectPositioner
      SelectPopup
        SelectList
          SelectItem
            SelectItemText

API

Root accepts Base UI Select props. Common props and parts:

Prop / part	Type	Default	Description
items	Record<string, ReactNode>	—	Value → label map for SelectValue.
defaultValue	string \| null	—	Uncontrolled initial value.
value	string \| null	—	Controlled value.
onValueChange	(value, event) => void	—	Called when the selection changes.
disabled	boolean	false	Disables the select.
SelectTrigger	—	—	Opens the popup; hosts value and icon.
SelectItem	—	—	Option row. Requires a `value`.