Select
BaselineChoose one option from a short, defined list.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'panel-ui-kit/select';import { Label } from 'panel-ui-kit/label'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Label htmlFor="reason">Topic</Label> <Select defaultValue="general"> <SelectTrigger id="reason"><SelectValue /></SelectTrigger> <SelectContent> <SelectItem value="general">General question</SelectItem> <SelectItem value="account">Account help</SelectItem> </SelectContent> </Select> </PanelUiTheme> );}When to use
Use a select for a finite set of options. Give the trigger a visible label and a useful initial value or placeholder.
Keyboard
Enter or Space opens the list. Arrow keys move between options. Enter selects; Escape closes.
Properties
| Property | Values | Default |
|---|---|---|
value | string | Caller owned |
onValueChange | (value: string) => void | — |
disabled | boolean | false |
motion | full · reduced · off · object | Inherited |