Design System
Select
Select components allow users to choose an option from a dropdown menu. They provide a compact way to display multiple options.
Basic Usage
Select components are controlled components that require state management for interactive use.
Select
States
Select components support default, disabled, and focused states.
Default
Disabled
Usage
"use client";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useState } from "react";
export function MyComponent() {
const [selected, setSelected] = useState("");
return (
<Select value={selected} onValueChange={setSelected}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The selected value |
onValueChange | (value: string) => void | - | Callback fired when the selected value changes |
disabled | boolean | false | Whether the select is disabled |
Material 3 Features
- Elevation: Dropdown content uses Material 3 elevation tokens
- Focus Ring: Proper focus indicators for keyboard navigation
- Theme Support: Automatically adapts to light and dark themes
- Accessibility: Full keyboard navigation and ARIA support via Radix UI
- Portal: Dropdown content renders in a portal for proper layering