Select
Choose one option from a list — a dropdown on desktop, a bottom sheet on touch devices.Basic
Preview
Code
Apple
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Label, Select } from '@advui/core'
<Label htmlFor="country">Country</Label>
<Select id="country" value={country} onValueChange={setCountry} placeholder="Choose…">
<Select.Item value="mm">Myanmar</Select.Item>
<Select.Item value="th">Thailand</Select.Item>
</Select>Examples
Grouped options
Preview
Code
Select a timezone
API reference
Select
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected value. |
defaultValue | string | — | Starting `value` when uncontrolled. |
onValueChange | (value: string) => void | — | Called with the chosen value. |
placeholder | string | 'Select…' | Shown when nothing is selected. |
size | 'sm' | 'md' | 'lg' | 'md' | Trigger height. |
invalid | boolean | — | Error styling and `aria-invalid`. |
disabled | boolean | — | Not focusable or editable. |
id | string | — | Links the trigger to a Label’s `htmlFor`. |
aria-label | string | — | Names the select when there is no visible label. |
width | SizeTokens | string | '100%' | Trigger width. |
Select.Item
| Prop | Type | Default | Description |
|---|---|---|---|
value required | string | — | Option value. Children are the label. |
Select.Group
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Group heading. |
Accessibility
- The trigger is a
comboboxwitharia-expanded; options userole="option"andaria-selected. - Typeahead: typing letters jumps to matching options.
- On touch devices options open in a modal sheet with large touch targets.
| Key | Action |
|---|---|
| Enter / Space / ↓ | Opens the list. |
| ↑ ↓ | Moves between options. |
| Enter | Selects the focused option. |
| Escape | Closes without changing the value. |
Responsive behavior
Below the md breakpoint on touch devices the list becomes a bottom sheet.
Platform notes
Web
Server-renders a static trigger and mounts the interactive select after hydration (avoids SSR mismatches).
iOS
Opens in a bottom sheet (Tamagui Sheet).
Android
Opens in a bottom sheet; back button closes it. With
androidRipple (on in material()), presses show the native ripple.