Components · Select

Select

Choosing one value from a known, finite set. Radix supplies the listbox ARIA model, typeahead and focus behaviour; LUC supplies the trigger chrome — identical to Input — and the menu surface. If the list needs searching that is Combobox; if the action needs running that is CommandMenu.

Examples

Trigger and menu

One size token drives the trigger height, the type scale and the menu rhythm, so a dropdown is never hand-tuned.

Range

Applies to every chart in the group.

Value: 1y

Venue

Placeholder shows until a venue is chosen.

Disabled

Disabled controls keep their label and value.

Invalid

A venue is required for this run

<Select defaultValue="1y">
  <SelectTrigger aria-label="Range">
    <SelectValue placeholder="Choose a range" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1y">1 year</SelectItem>
  </SelectContent>
</Select>

Sizes

One size drives the trigger's height, its type scale and the menu's rhythm, so a dropdown is never hand-tuned.

<Select size="sm">…</Select>
<Select size="md">…</Select>
<Select size="lg">…</Select>

A long list scrolls

The menu caps its own height and scrolls, so a hundred-option list stays inside the viewport.

Instrument

Type a few letters to jump — the listbox has typeahead.

<Select>
  <SelectTrigger aria-label="Instrument">
    <SelectValue placeholder="Choose an instrument" />
  </SelectTrigger>
  <SelectContent>
    {symbols.map((symbol) => (
      <SelectItem key={symbol} value={symbol}>{symbol}</SelectItem>
    ))}
  </SelectContent>
</Select>

Groups, descriptions and disabled options

A group is a heading, not a nesting level. Descriptions carry the code or the unit; the label stays short.

Instrument

The universe drives every downstream column.

<Select>
  <SelectTrigger aria-label="Instrument">
    <SelectValue placeholder="Choose an instrument" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Equities</SelectLabel>
      <SelectItem value="AAPL" description="Nasdaq">Apple</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectItem value="SPX" disabled description="Unavailable">S&P 500</SelectItem>
  </SelectContent>
</Select>

Usage

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@luc/ui";

<Select value={range} onValueChange={setRange}>
  <SelectTrigger aria-label="Range">
    <SelectValue placeholder="Choose a range" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1y">1 year</SelectItem>
  </SelectContent>
</Select>

The trigger is the tab stop and the menu owns the active option; `size` on the root drives both. Radix supplies the listbox model, the typeahead and the focus behaviour.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`Select`	14 documented props	`({ size, children, ...props }: SelectProps) => import("@types/react").JSX.Element`
`SelectContent`	18 documented props	`({ className, children, size, position, sideOffset, ...props }: SelectContentProps) => import("@types/react").JSX.Element`
`SelectGroup`	1 documented props	`import("@types/react").ForwardRefExoticComponent<RadixSelect.SelectGroupProps & import("@types/react").RefAttributes<HTMLDivElement>>`
`SelectItem`	5 documented props	`({ className, children, description, ...props }: SelectItemProps) => import("@types/react").JSX.Element`
`SelectLabel`	1 documented props	`({ className, ...props }: React.ComponentPropsWithRef<typeof RadixSelect.Label>) => import("@types/react").JSX.Element`
`SelectRoot`	13 documented props	`import("@types/react").FC<RadixSelect.SelectProps>`
`SelectSeparator`	1 documented props	`import("@types/react").ForwardRefExoticComponent<RadixSelect.SelectSeparatorProps & import("@types/react").RefAttributes<HTMLDivElement>>`
`SelectTrigger`	4 documented props	`({ className, children, size, leadingIcon, invalid, disabled, id, ...props }: SelectTriggerProps) => import("@types/react").JSX.Element`
`SelectValue`	2 documented props	`import("@types/react").ForwardRefExoticComponent<RadixSelect.SelectValueProps & import("@types/react").RefAttributes<HTMLSpanElement>>`