Select

A custom select with grouped options and accessible listbox behavior.

Overview

Select is a custom dropdown for styled surfaces. It works best for short to medium option lists where keyboard listbox navigation is enough.

Use Combobox when users need to search or filter a long list. Use Native Select when you need the platform picker or native form semantics only.

Preview

Theme

Customize

Disabled

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add select

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export function PageField() {
  return (
    <Select defaultValue="docs">
      <SelectTrigger aria-label="Page">
        <SelectValue placeholder="Select a page" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="docs">Documentation</SelectItem>
        <SelectItem value="components">Components</SelectItem>
      </SelectContent>
    </Select>
  );
}

Examples

Basic

Default Select — a conventional styled picker.

Grouped

Timezone-style groups with labels and separators.

Version selector

Compact selector for a short list of release versions.

Disabled

Disabled Select and disabled options.

Long list

Scroll through many options in a fixed-height listbox.

Form example

Use name for native form posts with a hidden input.

Dashboard example

Compact filter control for analytics surfaces.

Revenue

Last 7d

In practice

Pair Select with Label for locale and timezone preferences. For long lists that need filtering, use Combobox instead.

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`value`	string	—	Controlled selected value. Use with onValueChange.
`defaultValue`	string	—	Initial value for an uncontrolled Select.
`onValueChange`	(value: string) => void	—	Called when the user selects an option.
`open / onOpenChange`	boolean	—	Control the dropdown open state.
`disabled`	boolean	—	Prevents opening and selection.
`name`	string	—	Optional hidden input name for form submission.

Accessibility

The trigger exposes role="combobox" with aria-expanded and aria-controls. Options render in a role="listbox" with role="option" and aria-selected.

Open with Enter, Space, or Arrow Down on the trigger. The selected option or the first option receives focus. Move with Arrow Up/Down, Home, and End; select with Enter or click; close with Escape. Tab moves through options while open and exits at the ends without trapping focus. Focus returns to the trigger when the list closes.