# Select

> A pill trigger with a springy menu, typeahead, and full keyboard support.

Component · Free · https://lodeui.com/components/select

## When to use

- Picking one value from a short list: status, assignee, priority.
- Property panels where the current value reads as text with an icon.

## When not to use

- Long lists people need to search: use a combobox.
- Two or three options that should stay visible: use a segmented control.
- Multiple values: use a combobox with multiple.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/select.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Select } from "@/components/ui/select";

const priorities = [
  { value: "high", label: "High" },
  { value: "medium", label: "Medium" },
  { value: "low", label: "Low" },
] as const;

export function PriorityField() {
  return <Select aria-label="Priority" options={priorities} defaultValue="medium" />;
}
```

## API reference

### Select

A pill trigger that opens a listbox. The menu flips above the trigger when there isn't room below.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `readonly { value: T; label: string; icon?: ReactNode }[]` | – | The choices. |
| value / defaultValue | `T` | – | Controlled or uncontrolled value. |
| onValueChange | `(value: T) => void` | – | Called when an option is chosen. |
| placeholder | `string` | `"Select"` | Shown when there's no value. |
| align | `"start" \| "end"` | `"end"` | Which edge of the trigger the menu lines up with. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space / ↓ | Open the menu |
| ↑ / ↓ | Move the highlight |
| Home / End | First or last option |
| Enter / Space | Choose |
| Esc | Close and return focus |
| Letters | Jump to the matching option |

## Accessibility

- Trigger has aria-haspopup="listbox" and aria-expanded.
- The menu is a listbox using aria-activedescendant, so focus stays on one element.
- Selected option has aria-selected and a check mark.

## Motion

- The menu scales in from its anchor corner (spring, 300ms).
- The trigger's width and label animate when the value changes.

## Responsive behavior

- The trigger hugs its label; the menu is at least 192px wide.
- Opening near the bottom of the viewport flips the menu upward.

## Performance

- Options render only while open. Typeahead resets after 600ms.

## Notes for AI

- Always pass aria-label when there's no visible label.
- For more than ~10 options use Combobox instead.

## Related

- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.