Select

The Select component provides a dropdown menu for choosing one option from a list. It's designed for forms and settings where users need to select from predefined options.

Select provides a native form autofill experience while maintaining custom styling.

Features

Single option selection
Grouped options with labels
Placeholder support
Typeahead search
Keyboard navigation
Form autofill support
Controlled and uncontrolled modes
Scroll buttons for long lists

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@loke/design-system/select';

export default function Example() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="orange">Orange</SelectItem>
      </SelectContent>
    </Select>
  );
}

Tips:

Use SelectValue with a placeholder for unselected state.
Group related items with SelectGroup and SelectLabel.
Type to jump to items (typeahead).

Props

Select

Prop

Type

SelectContent

Prop

Type

SelectItem

Prop

Type

Examples

Basic select

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="blueberry">Blueberry</SelectItem>
    <SelectItem value="grapes">Grapes</SelectItem>
    <SelectItem value="pineapple">Pineapple</SelectItem>
  </SelectContent>
</Select>

With groups

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select a timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
      <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
      <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
      <SelectItem value="cet">Central European Time (CET)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

With placeholder

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Choose your team" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="engineering">Engineering</SelectItem>
    <SelectItem value="design">Design</SelectItem>
    <SelectItem value="product">Product</SelectItem>
    <SelectItem value="marketing">Marketing</SelectItem>
  </SelectContent>
</Select>

Controlled select

Selected: None

const [value, setValue] = useState("");

<Select value={value} onValueChange={setValue}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select status" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="active">Active</SelectItem>
    <SelectItem value="paused">Paused</SelectItem>
    <SelectItem value="completed">Completed</SelectItem>
  </SelectContent>
</Select>

<p>Selected: {value || "None"}</p>

Disabled states

Fully disabled:

Disabled items:

<Select disabled>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Disabled select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Some disabled" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="available">Available</SelectItem>
    <SelectItem value="unavailable" disabled>Unavailable</SelectItem>
  </SelectContent>
</Select>

Accessibility

Uses role="combobox" with proper ARIA attributes.
Arrow keys navigate between options.
Enter/Space selects the focused option.
Typeahead allows jumping to options by typing.
Home/End keys jump to first/last options.
Tab closes the dropdown.
Escape closes without selecting.

Best practices

Use a clear placeholder that describes the expected selection.
Group related options with SelectGroup and SelectLabel.
Keep option labels concise and scannable.
Consider using SelectSeparator between groups.
Use disabled on items that are temporarily unavailable.
For more than 10-15 options, consider searchable alternatives.
Provide meaningful textValue if children contain icons or complex content.

Select

On this page