Select

Displays a list of options for the user to pick from—triggered by a button.

Installation

npx neobrutal add select

Usage

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

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

Props

Select

Prop	Type	Default	Description
value	string	-	The controlled value of the select.
defaultValue	string	-	The default value of the select when uncontrolled.
onValueChange	(value: string) => void	-	Event handler called when the value changes.
open	boolean	-	The controlled open state of the select.
defaultOpen	boolean	-	The default open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Event handler called when the open state changes.