Skip to content
FelicityUI

Select

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

Installation

terminal
npx felicityui add select --platform react

Usage

example.tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

<Select defaultValue="system">
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="light">Light</SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Composition

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   └── SelectItem
    └── SelectSeparator

Default

Align item with trigger

alignItemWithTrigger={false} keeps the popup edge-aligned.

Groups

SelectGroup, SelectLabel, and SelectSeparator.

Scrollable

Long lists scroll inside SelectContent.

Disabled

Invalid

error / invalid set data-invalid and aria-invalid.

RTL

dir=rtl

API Reference

PropTypeDefaultDescription
valuestring—Controlled selected value.
defaultValuestring—Uncontrolled initial value.
onValueChange(value: string) => void—Called when selection changes.
alignItemWithTriggerbooleantrueScroll selected item into view when opening.
labelReactNode—Optional field label.
errorReactNode—Error message; sets invalid styling.
disabledboolean—Disables the select.

Accessibility

WCAG 2.2 AA

  • Trigger is combobox with aria-expanded and aria-controls.
  • Popup is listbox; items are options with aria-selected.
  • Arrow key navigation, Escape closes.
  • aria-invalid when invalid.

Platform notes

React

Custom combobox/listbox with Felicity tokens. Paper surface, hairline border — not Base UI / Radix runtime. Prefer native-select for a plain HTML select.

  • Client component (open/value state).
  • Composition: SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem, SelectSeparator.
  • alignItemWithTrigger scrolls the selected item into view on open.
  • Optional Felicity field chrome via label/description/error on Select.