Displays a list of options for the user to pick from—triggered by a button.
Basic usage of the Monolith Select.
Installation
$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/select.json"
Copy Usage
After you add the component with the CLI, import it from your UI folder:
Copy import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" Copy < 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 > Examples
Grouped Options
With Label
Disabled
Error State
Theme Select Please select a theme.
API Reference
The Select component extends the Radix UI Select primitive and supports the following props:
Prop Type Description valuestringThe controlled value of the select. defaultValuestringThe default value when initially rendered. onValueChange(value: string) => voidEvent handler called when the value changes. disabledbooleanWhen true, prevents the user from interacting with the select. aria-invalidbooleanApplies the error state styling to the SelectTrigger.