Select

Displays an animated list of options for the user to choose from —smoothly triggered by a button.

Installation

npx shadcn@latest add @scrollxui/select

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="light">Light</SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

API Reference

Select

Displays an animated list of options for the user to choose from —smoothly triggered by a button.

Props

Property	Type	Default	Description
`animate`	boolean	`true`	Enables motion animations for trigger, dropdown, items, and separator.
`value`	string	`—`	Controlled selected value.
`defaultValue`	string	`—`	Initial selected value (uncontrolled mode).
`onValueChange`	(value: string) => void	`—`	Callback triggered when selected value changes.
`open`	boolean	`—`	Controls dropdown open state.
`defaultOpen`	boolean	`—`	Initial open state (uncontrolled mode).
`onOpenChange`	(open: boolean) => void	`—`	Callback triggered when open state changes.
`disabled`	boolean	`false`	Disables the entire Select component.
`size (SelectTrigger)`	"default" \| "sm"	`"default"`	Controls trigger height and radius styling.
`position (SelectContent)`	"item-aligned" \| "popper"	`"item-aligned"`	Controls dropdown positioning strategy.
`align (SelectContent)`	"start" \| "center" \| "end"	`"center"`	Aligns dropdown relative to trigger.
`value (SelectItem)`	string	`required`	Unique value for each Select item.
`disabled (SelectItem)`	boolean	`false`	Disables a specific Select item.
`className`	string	`—`	Custom Tailwind classes for styling any subcomponent.
`children`	ReactNode	`required`	Used in: Select, Trigger, Content, Item, Group, Label — nested elements.
`...props`	Radix Select props	`—`	Supports all native Radix Select props and accessibility attributes.