Accessible custom select dropdown with search, keyboard navigation, and floating positioning.

Select

The Select component provides a fully accessible custom dropdown with keyboard navigation, optional search/filtering, and floating UI positioning. It replaces the native <select> with a customizable interface while maintaining all accessibility semantics.

Select requires multiple sub-components: SelectTrigger, SelectValue, SelectContent, SelectItem, and optionally SelectGroup, SelectLabel, and SelectSeparator.

Features

Controlled/uncontrolled modes
Keyboard navigation (arrow keys, Home, End, Type to search)
Grouped items with labels
Scroll buttons for long lists
Floating positioning (no clipping)
Form integration (works in forms)
RTL support

Usage

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel } from '@loke/ui/select';

export default function Example() {
  const [value, setValue] = React.useState('apple');

  return (
    <Select value={value} onValueChange={setValue}>
      <SelectTrigger>
        <SelectValue placeholder="Choose a fruit..." />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="orange">Orange</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}