Select

Ready

Accessible dropdown select menus with keyboard navigation

Basic Select

Simple dropdown selection

Framework

Grouped Options

Organize options into groups with labels

Timezone

Form with Multiple Selects

Common use case in forms

Country

Language

Notification Frequency

Disabled State

Disabled select and individual options

Disabled Select

Select with Disabled Options

Installation

Install the required dependencies

npm install @radix-ui/react-select

Usage

Basic implementation example

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

export default function Example() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
        <SelectItem value="option3">Option 3</SelectItem>
      </SelectContent>
    </Select>
  )
}

Props

Select component props

Prop	Type	Default	Description
value	string	-	Controlled value
defaultValue	string	-	Default value (uncontrolled)
onValueChange	(value: string) => void	-	Callback when value changes
disabled	boolean	false	Disable the select
required	boolean	false	Mark as required in forms

Features

Built-in functionality

Keyboard navigation - Arrow keys, Home, End, Page Up/Down
Type-ahead search - Type to filter options
Grouped options - Organize with labels and separators
Accessible - ARIA roles and keyboard support
Smooth animations - Fade and zoom transitions
8px border radius - Consistent with Eidetic design