Tac UIv1.1.2

Select

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

Import

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

Playground

Interactively configure the Select props below.

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

Default

The base select renders a styled trigger button that opens a keyboard-navigable listbox dropdown with animated entrance and exit transitions.

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

Sizes

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

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 element above.

Select the category that best fits.
tsx
<Select options={options} label="Category" placeholder="Pick a category" helperText="Select the category that best fits." />

Error State

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

Please select a category.
tsx
<Select options={options} label="Category" placeholder="Pick a category" error errorMessage="Please select a category." />

Disabled

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

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

API Reference

PropTypeDefaultDescription
optionsSelectOption[]-Array of { label, value, disabled? } option objects.
labelstring-Label displayed above the select.
placeholderstring-Placeholder option shown when no value is selected.
helperTextstring-Helper text displayed below the select when there is no error.
size"sm" | "md" | "lg""md"Visual size of the select element.
valuestring-Controlled selected value.
onChange(value: string) => void-Called when an option is selected.
errorbooleanfalseApplies error styling when true.
errorMessagestring-Error message displayed when error is true.
idstring-ID attribute for the trigger button; auto-generated if omitted.
disabledbooleanfalseDisables the select when true.