Select

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

Demo

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

export function SelectDemo() {
  return (
    <Select
      items={{
        apple: 'Apple',
        banana: 'Banana',
        blueberry: 'Blueberry',
        grapes: 'Grapes',
        pineapple: 'Pineapple'
      }}
    >
      <SelectTrigger>
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <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>
  )
}

With Groups

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

export function SelectWithGroups() {
  return (
    <Select
      items={{
        apple: 'Apple',
        banana: 'Banana',
        blueberry: 'Blueberry',
        grapes: 'Grapes',
        pineapple: 'Pineapple',
        broccoli: 'Broccoli',
        carrot: 'Carrot',
        celery: 'Celery'
      }}
    >
      <SelectTrigger>
        <SelectValue placeholder="Select a food" />
      </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>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Veggies</SelectLabel>
          <SelectItem value="broccoli">Broccoli</SelectItem>
          <SelectItem value="carrot">Carrot</SelectItem>
          <SelectItem value="celery">Celery</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Icon-only trigger

icon={null} omits the chevron indicator entirely — the trigger is just its glyph (the header locale select on www).

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger
} from '@immit/ui/select'
import { Globe } from 'lucide-react'

export function SelectIconTrigger() {
  return (
    <Select items={{ en: 'English', ja: '日本語' }} defaultValue="en">
      <SelectTrigger
        variant="ghost"
        aria-label="Language Select"
        icon={null}
        className="hover:bg-accent size-8 w-8 justify-center rounded-full p-0"
      >
        <Globe className="size-4" />
      </SelectTrigger>
      <SelectContent align="end" alignItemWithTrigger={false}>
        <SelectItem value="en">English</SelectItem>
        <SelectItem value="ja">日本語</SelectItem>
      </SelectContent>
    </Select>
  )
}