Select

Import

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@timelycare/helix-ui"

Props

interface SelectProps {
  value?: string
  defaultValue?: string
  onValueChange?: (value: string) => void
  disabled?: boolean
}

interface SelectTriggerProps {
  className?: string
  children: React.ReactNode
}

interface SelectItemProps {
  value: string
  disabled?: boolean
  className?: string
  children: React.ReactNode
}

Structure

States

Positioning

SelectContent uses popper positioning (position="popper"), which is the default. The dropdown menu appears directly below (or above, if space is limited) the trigger, aligned to the trigger edge. It never overlaps the trigger.

Do not use position="item-aligned", which aligns the popup to the selected item and overlaps the trigger. Popper positioning keeps the trigger visible while the menu is open and provides a clearer visual relationship between the trigger and the option list.

The dropdown width matches or exceeds the trigger width via min-w-[var(--radix-select-trigger-width)].

The trigger itself is w-full, so a select lines up with the inputs above and below it in a form. For inline placements — a toolbar, a filter row, a button group — pass className="w-fit" to size it to its content, or a fixed w-[200px] when a stable width reads better than a shifting one.

Item Variants

Common Patterns

Basic Select

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

With Label and Description

<div className="space-y-2">
  <Label htmlFor="framework" className="font-medium text-sm">
    Label
  </Label>
  <Select>
    <SelectTrigger id="framework" className="w-[200px]">
      <SelectValue placeholder="Placeholder" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="next">Next.js</SelectItem>
      <SelectItem value="remix">Remix</SelectItem>
    </SelectContent>
  </Select>
  <p className="text-sm text-muted-foreground">
    This is a select description.
  </p>
</div>

With Groups

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="carrot">Carrot</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Scrollable List

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Large list" />
  </SelectTrigger>
  <SelectContent className="max-h-[200px]">
    {items.map((item) => (
      <SelectItem key={item.value} value={item.value}>
        {item.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

Accessibility

• Built on Radix Select — handles keyboard and focus automatically
• Keyboard: Enter/Space to open, Arrow keys to navigate, Enter to select, Escape to close
• Screen reader: announces selected value and available options
• Typeahead search supported
• Requires label association via Label component

Gotchas

See Also

• Related Components: Combobox (with search), Form (form integration), Radio Group (inline alternative)
• Accessibility: Forms Accessibility — Select ARIA patterns
• Patterns: Component Match — Select vs Combobox

Last updated: February 27, 2026