Forms

Select

Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.

State × Size — 15 variants

betaReact AvailableFigma AvailableDocs Partial

React last updated: 2026-07-13
Documentation last updated: 2026-06-01
Accessibility target: WCAG 2.2 AA (target)
Version: 0.2.0-beta

Known open questions

Decorative CaretDown icon overlays native appearance:none styling.

Live preview

Select uses a custom listbox popover positioned below the trigger, with a hidden native select for form submission. Use Combobox when the field must be searchable.

Default

Role

Custom listbox popover positioned below the trigger, with a hidden native select for form submission.

Sizes

Small / Medium / Large

Small

Medium

Large

Form submission

Required field validation

States

Required / Error / Disabled

Country

Timezone

Choose a timezone.

Legacy plan

Purpose

Choosing one option from a list too long to show all at once, hidden behind a dropdown trigger.

Anatomy

Select = combobox trigger + Popover listbox + hidden native select + FormField label/validation.

Variants and states

default · error · disabled

When to use

More than ~6 options, or when vertical space is limited.

When not to use

Fewer than ~6 options (use Radio). A field that also needs free-text search/filter (use Combobox).

Accessibility

Renders as a real <select> or a fully custom listbox with role="listbox"/role="option" and complete keyboard support.

Keyboard behavior

Combobox opens the listbox. Arrow keys, Home, and End move between options. Native select remains for form fallback.

Common mistakes

Building a custom-styled dropdown without replicating native <select> keyboard behavior.

Properties

State × Size as variants. Value (text, the currently selected option's display text).

Why is this not a Combobox?

Select preserves a non-editable trigger and native select fallback. Combobox is the searchable editable input for long predefined lists.

Tokens used

component/radius/controlsemantic/border/defaultsemantic/icon/muted

Component API

Prop	Type	Default	Description
label	string	—	Visible field label via FormField.
options	SelectOption[]	—	Flat list of value/label pairs.
placeholder	string	—	Empty disabled hidden placeholder option.
required	boolean	—	Requires a non-placeholder selection.
error	string	—	Validation message rendered through FormField.

React example

Copy React example

import { Select } from "@/components/ui/Select";

export function Example() {
  return (
    <Select
      label="Role"
      placeholder="Choose a role"
      options={[
        { value: "viewer", label: "Viewer" },
        { value: "editor", label: "Editor" },
      ]}
    />
  );
}