Select

A form control for choosing one option from a list of predefined values.

#Installation

npx @dinachi/cli@latest add select

#Usage

tsx

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

#Examples

Default Select

A basic select with simple options

Select with Groups

Select with grouped and labeled options

Select with Indicator

Select items with a check indicator for the selected item

Controlled Select

Select with controlled value and disabled option

Selected: None

#API Reference

Prop	Type	Default	Description
value	string	—	The controlled selected value.
defaultValue	string	—	The initially selected value when uncontrolled.
onValueChange	(value: string) => void	—	Callback fired when selection changes.
SelectContent.portal	boolean	true	Whether to render the dropdown in a portal. Set to false when used inside a Dialog or Drawer to keep it within the modal focus trap.
SelectContent.position	'item-aligned' \| 'popper'	'popper'	Controls popup positioning strategy.
SelectContent.sideOffset	number	4	Distance between trigger and popup.
SelectItem.showIndicator	boolean	false	Shows a selection indicator icon for selected items.
SelectItem.indicatorPosition	'left' \| 'right'	'left'	Positions the selection indicator.