Select

A dropdown select component for choosing from a list of options. Built on Base UI Select primitives.

Usage

import {
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectPortal,
  SelectPositioner,
  SelectPopup,
  SelectList,
  SelectItem,
} from "@/components/ui/static/select"

<SelectRoot>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectPortal>
    <SelectPositioner>
      <SelectPopup>
        <SelectList>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectList>
      </SelectPopup>
    </SelectPositioner>
  </SelectPortal>
</SelectRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react @phosphor-icons/react

Examples

With Groups

API Reference

valuestring

Controlled value of the select.

onValueChange(value: string) => void

Callback when value changes.

defaultValuestring

Default value for uncontrolled usage.

disabledboolean

Whether the select is disabled.