select

The Select component provides a styled dropdown menu with async options support.

Usage & Examples

Default

default.tsx

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

// States

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

// Sizes

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

// Variants

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

// Rounding

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

// Shadows

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

Interaction states

Disabled
interaction-states.tsx
// Disabled

  <Select
    placeholder="Choose an option"
    options={[
      { label: "Option A", value: "a" },
      { label: "Option B", value: "b" },
      { label: "Option C", value: "c" },
    ]}
    value="a"
    onChange={(value) => console.log("Selected:", value)}
  />

Props API

42 props
Columns
select props API
Default
Description
aria-busybooleanNoaria—Indicates the select is busy, useful while async options are loading.
aria-describedbystringNoaria—Optional aria-describedby id reference for helper/error text.
aria-descriptionstringNoaria—Optional description text for the select element.
aria-invalidbooleanNoaria—Marks the field as invalid for assistive technology. If omitted, component logic may still infer invalid from state === "error".
aria-labelstringNoaria—Optional aria-label for screen readers. Useful when no visible label is provided.
aria-labelledbystringNoaria—Optional aria-labelledby id reference. Prefer this when an external label element exists.
aria-live"off" | "polite" | "assertive"Noaria"polite"Optional aria-live setting for async status messaging.
aria-requiredbooleanNoaria—Indicates the field is required to assistive technology.
asyncOptions((query: string) => Promise<Option[]>)Noevents—If provided, the select element will render options asynchronously. Should return a Promise resolving to Option[] based on search query.
autoCompletestringNoprops—Optional autocomplete behavior for compatible use cases.
classNamestringNostyling—Additional class name(s) for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.