Select

import {
  Select,
  SelectContent,

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/select.json

Usage

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

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
  </SelectContent>
</Select>

Examples

With Groups

import {
  Select,
  SelectContent,

API Reference

Component	Description
`Select`	The root component
`SelectTrigger`	The trigger button
`SelectValue`	The selected value display
`SelectContent`	The dropdown content
`SelectItem`	Individual select option
`SelectGroup`	Group of items
`SelectLabel`	Label for a group
`SelectSeparator`	Visual separator

Select Props

Prop	Type	Default	Description
`value`	`string`	-	The controlled value
`defaultValue`	`string`	-	The default value
`onValueChange`	`(value: string) => void`	-	Callback when value changes
`disabled`	`boolean`	`false`	Disable the select

SelectItem Props

Prop	Type	Default	Description
`value`	`string`	-	The value of the item (required)
`disabled`	`boolean`	`false`	Disable the item

Select

Installation

Usage

Examples

With Groups

API Reference

Select

Select Props

SelectItem Props

On this page