Docs
Select
Select
Displays a list of options for the user to pick from—triggered by a button.
This component uses Radix UI
import * as React from 'react'
import {
Select_Shadcn_,
SelectContent_Shadcn_,
SelectGroup_Shadcn_,
SelectItem_Shadcn_,
SelectLabel_Shadcn_,
SelectTrigger_Shadcn_,
SelectValue_Shadcn_,
} from 'ui'
export function SelectDemo() {
return (
<Select_Shadcn_>
<SelectTrigger_Shadcn_ className="w-[180px]">
<SelectValue_Shadcn_ placeholder="Select a fruit" />
</SelectTrigger_Shadcn_>
<SelectContent_Shadcn_>
<SelectGroup_Shadcn_>
<SelectLabel_Shadcn_>Fruits</SelectLabel_Shadcn_>
<SelectItem_Shadcn_ value="apple">Apple</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="banana">Banana</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="blueberry">Blueberry</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="grapes">Grapes</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="pineapple">Pineapple</SelectItem_Shadcn_>
</SelectGroup_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
)
}Installation
npx shadcn-ui@latest add selectUsage
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>