Select

A control for choosing one value from a list. The listbox rises with overlay depth; the selected item shows a check.

tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/seam/ui/select"

export default function SelectDemo() {
  return (
    <Select defaultValue="spring">
      <SelectTrigger className="w-52">
        <SelectValue placeholder="Choose a transition" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="spring">Spring</SelectItem>
        <SelectItem value="snappy">Snappy</SelectItem>
        <SelectItem value="surface">Surface</SelectItem>
        <SelectItem value="bouncy">Bouncy</SelectItem>
      </SelectContent>
    </Select>
  )
}

bunx --bun @seamui/cli@latest add select

API

Prop	Type	Default	Description
value / onValueChange	Value, (value, eventDetails) => void	—	Controlled selection on <Select>.
defaultValue	Value	—	Initial selection when uncontrolled.
variant	"default" \| "ghost"	"default"	On <SelectTrigger> — recessed muted well, or naked text + chevron for inline dropdowns.
sideOffset	number	6	On <SelectContent> — gap between trigger and popup.

<Select> forwards all Base UI Select.Root props.

Notes

alignItemWithTrigger is disabled, so the list drops below the trigger like a dropdown instead of Base UI's native-style overlay of the selected item on top of it.
The popup condenses in/out via CSS keyed to Base UI's data-starting-style / data-ending-style, so the exit is awaited before unmount.
The list matches the trigger's width via --anchor-width and caps its height to the available viewport space.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.