Select

Visual Hierarchy

The trigger uses border-input styling to match other form controls. The chevron icon provides a clear affordance that the element is expandable. Selected values display in text-foreground while placeholder text uses text-muted-foreground to differentiate empty from filled states.

Spacing & Layout

Set an explicit width on the trigger (e.g., w-[180px] or w-full) to prevent layout shifts when the selected value changes length. Use SelectGroup with SelectLabel to organize long lists into logical categories. Groups are visually separated and help users scan options faster.

Responsive Behavior

The dropdown content positions itself via Radix popper to stay within the viewport. On small screens, consider using w-full on the trigger so it spans the full container width. For mobile-heavy interfaces, consider Native Select which uses the platform picker for better touch interaction.

Color & Contrast

The dropdown uses bg-popover with text-popover-foreground for the content area. Focused items are highlighted with bg-accent and text-accent-foreground. Invalid states use border-destructive with a subtle ring to clearly communicate validation errors. All color combinations meet WCAG 2.1 AA contrast requirements.

Keyboard Navigation

• Tab — Move focus to the select trigger
• Enter or Space — Open the dropdown or select the focused item
• Arrow Down / Arrow Up — Navigate between options
• Escape — Close the dropdown without selecting
• Type a letter to jump to the first matching option (typeahead)

Screen Reader Support

• Built on Radix UI Select primitive with full WAI-ARIA listbox pattern
• Trigger announces its role as a combobox with the current value or placeholder
• Options announce their text content, position in the list, and selected state
• Group labels are announced as the user navigates into each section
• Disabled items are announced as unavailable

Focus Management

Visible focus ring with 3px width using focus-visible:ring-[3px]. When the dropdown opens, focus moves to the previously selected item or the first item. On close, focus returns to the trigger element. Focus is trapped within the dropdown while open.

ARIA Attributes

{/* Basic select with accessible label */}
<Select>
  <SelectTrigger aria-label="Choose a fruit">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

{/* Select with external label */}
<Label htmlFor="country-select">Country</Label>
<Select>
  <SelectTrigger id="country-select">
    <SelectValue placeholder="Select a country" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="us">United States</SelectItem>
    <SelectItem value="uk">United Kingdom</SelectItem>
  </SelectContent>
</Select>

{/* Select with validation error */}
<Select aria-invalid="true">
  <SelectTrigger aria-describedby="select-error">
    <SelectValue placeholder="Select a role" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="admin">Admin</SelectItem>
    <SelectItem value="user">User</SelectItem>
  </SelectContent>
</Select>
<p id="select-error" className="text-sm text-destructive">
  Please select a role.
</p>