Select

A dropdown component for selecting one or more options from a list. Supports search, multi-select, and keyboard navigation.

Basic Usage

Select adapts automatically to the input device — no extra wiring needed:

Variant	Touch device behavior
`searchable`	Opens as a bottom sheet with a search field pinned at top and the option list filling the height — easier to type-and-pick than a floating dropdown.
Non-searchable	Falls back to the native `<select>` element so users get the OS-native scroller (iOS wheel, Android list).
`multiple`	Opens as a bottom sheet on touch when `searchable`; otherwise a checkbox list.

Desktop layout is unaffected — a floating dropdown anchored to the trigger.

Bottom sheet uses .tui-glass surface with drag-to-dismiss.
The search input gets font-size: 16px automatically on coarse pointer to prevent iOS auto-zoom.
For 4 or fewer fixed options, prefer non-searchable mode so the OS-native picker takes over (more familiar to users).

Please select an option

Prop	Type	Default	Description
`options`	`SelectOption[]`	-	Available options ({ value, label, disabled? })
`value`	`string \| string[]`	-	Controlled value (string for single, string[] for multi)
`defaultValue`	`string \| string[]`	-	Default value (uncontrolled)
`onChange`	`(value: string \| string[]) => void`	-	Change callback
`placeholder`	`string`	`'Select...'`	Placeholder text
`variant`	`'outlined' \| 'filled'`	`'outlined'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`searchable`	`boolean`	`false`	Enable search/filter
`multiple`	`boolean`	`false`	Enable multi-select
`label`	`string`	-	Label displayed above the select
`required`	`boolean`	`false`	Whether the field is required (shows red asterisk)
`disabled`	`boolean`	`false`	Whether the select is disabled
`error`	`boolean`	`false`	Whether the field is in error state
`errorMessage`	`string`	-	Error message
`fullWidth`	`boolean`	`false`	Stretches to fill container
`className`	`string`	-	Additional CSS class
`style`	`CSSProperties`	-	Inline styles