Select

A dropdown selector for choosing a single value from a list of options.

Import

tsx

import { Select } from '@tac-ui/native';

Playground

Interactively configure the Select props below.

Choose an option

Placeholder

Disabled

Error

tsx

<Select options={options} placeholder="Choose an option" />

Default

The base select renders a styled trigger button that opens a listbox with the available options.

Choose an option

tsx

<Select options={options} placeholder="Choose an option" />

Sizes

Three size variants are available via size: sm, md (default), and lg. Font size scales accordingly.

Small

Choose an option

Medium

Choose an option

Large

Choose an option

tsx

<Select options={options} label="Small" placeholder="Choose an option" size="sm" />
<Select options={options} label="Medium" placeholder="Choose an option" size="md" />
<Select options={options} label="Large" placeholder="Choose an option" size="lg" />

With Helper Text

helperText renders a muted hint below the trigger when there is no active error. The label prop renders an associated label above.

Error State

Set error to apply destructive border styling and pass errorMessage to display an accessible validation message below the trigger.

Disabled

When disabled is true the trigger button is non-interactive and the dropdown will not open.

Disabled select

tsx

<Select options={options} placeholder="Disabled select" disabled />

API Reference

Prop	Type	Default	Description
options	SelectOption[]	-	Array of { label, value, disabled? } option objects.
label	string	-	Label displayed above the select.
placeholder	string	"Select an option"	Placeholder option shown when no value is selected.
helperText	string	-	Helper text displayed below the select when there is no error.
size	"sm" \| "md" \| "lg"	"md"	Visual size of the select element.
value	string	-	Controlled selected value.
onChange	(value: string) => void	-	Called when an option is selected.
error	boolean	false	Applies error styling when true.
errorMessage	string	-	Error message displayed when error is true.
disabled	boolean	false	Disables the select when true.