Forms

Select

A native select with a themed chevron and 36px height.

StableUsed in Aback Tools, Aback LaunchRegistry JSON

Plan

Change at any time.

Region

Workspace type

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add select

Writes components/ui/select.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Select, selectClassName } from "@/components/ui/select";

Props and composition points for Select. Native element props pass through.

Prop	Type	Default	Description
`defaultValue / value / onChange`	`native select props`	None	Controlled or uncontrolled native selection.
`disabled`	`boolean`	None	Prevents interaction and reduces opacity.
`aria-invalid`	`boolean \| "true" \| "false"`	None	Styles the border as destructive and pairs with a Field error.
`className`	`string`	None	Width and layout adjustments.

Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Renders a real select, so screen readers, mobile pickers, and keyboard behavior are native.
Always use a visible label. An unlabeled select is not fixed by a placeholder option.
Use optgroup for long lists and keep option labels short and unambiguous.
A native select is not a combobox. If you need search, use a command menu rather than recreating one here.

Key	Action
`Space`or`Enter`	Open the native picker.
`ArrowUp`or`ArrowDown`	Change the selected option.
`Escape`	Close the picker without changing the value.

The Aback products whose interfaces shaped this component.