Select Component

Import

import { Select } from '@covers/ui';

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
} from '@covers/ui';

// Basic select
<Select value={fruit} onValueChange={setFruit}>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
  </SelectContent>
</Select>

// With groups
<Select>
  <SelectTrigger className="w-[240px]">
    <SelectValue placeholder="Select timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="est">Eastern (UTC-5)</SelectItem>
      <SelectItem value="cst">Central (UTC-6)</SelectItem>
      <SelectItem value="pst">Pacific (UTC-8)</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">GMT (UTC+0)</SelectItem>
      <SelectItem value="cet">CET (UTC+1)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

// Disabled
<Select disabled>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Disabled" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
  </SelectContent>
</Select>

Props

Default Styling

bg-slate-800 border border-slate-700 rounded-md px-3 py-2