Select

A dropdown for choosing one option from a list.

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

export default function SelectDemo() {
  return (
    <Select defaultValue="Apple">
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="Apple">Apple</SelectItem>
        <SelectItem value="Banana">Banana</SelectItem>
        <SelectItem value="Blueberry">Blueberry</SelectItem>
        <SelectItem value="Grapes">Grapes</SelectItem>
        <SelectItem value="Pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/select.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Select imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

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

Examples

Grouped options

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

export default function SelectGroups() {
  return (
    <Select>
      <SelectTrigger className="w-[220px]">
        <SelectValue placeholder="Select a timezone" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectGroupLabel>North America</SelectGroupLabel>
          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectGroupLabel>Asia</SelectGroupLabel>
          <SelectItem value="ist">India Standard Time (IST)</SelectItem>
          <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

API Reference

Name	Type	Default	Description
value / onValueChange	unknown / (value) => void	—	Controlled selected value (set on Select).
defaultValue	unknown	—	Initial selected value (uncontrolled).
disabled	boolean	false	Ignores user interaction.
multiple	boolean	false	Allows more than one item to be selected.
SelectValue placeholder	ReactNode	—	Shown when no value is selected.