Select.

The precipice of choice. Unlike a native dropdown, this primitive offers styling freedom, typeahead navigation, and portal-aware rendering to escape overflow traps.

import { Select, SelectContent, SelectItem } from "@/components/ui/select"

Configuration

Context

State

Interface Theme

Controls the visual rendering mode of the dashboard.

Item Composition (Icon + Text)

Portal Escapism

Native dropdowns get clipped by `overflow: hidden` containers. We use a React Portal to render the `SelectContent` at the root of the body, ensuring it floats above all other UI layers (z-index wars won) while maintaining its logical position in the DOM tree.

Keyboard Typeahead

Accessibility isn't optional. This component supports native-like typeahead behavior. Focusing the trigger and typing 'L' immediately jumps focus to 'Light Mode' or 'London', matching user expectations for power-keyboard usage.

UserSettings.tsx

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