Select

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

Code

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  SelectGroup,
  SelectLabel,
} from '@/components/ui/Select';
<Select>
  <SelectTrigger className='w-[180px]'>
    <SelectValue placeholder='Select a fruit' />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <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>
    </SelectGroup>
  </SelectContent>
</Select>