Combo Box

The ComboBox component is used to select an option from a list with support for filtering and custom rendering.

Usage & Examples

Default

Start typing to filter the available options.
default.tsx
<ComboBox
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

Visual variants

Themes

primary
Start typing to filter the available options.
secondary
Start typing to filter the available options.
tertiary
Start typing to filter the available options.
quaternary
Start typing to filter the available options.

States

success
Start typing to filter the available options.
warning
Start typing to filter the available options.
error
Start typing to filter the available options.
info
Start typing to filter the available options.

Sizes

xs
Start typing to filter the available options.
small
Start typing to filter the available options.
medium
Start typing to filter the available options.
large
Start typing to filter the available options.

Variants

solid
Start typing to filter the available options.
outline
Start typing to filter the available options.
glass
Start typing to filter the available options.

Rounding

none
Start typing to filter the available options.
medium
Start typing to filter the available options.
large
Start typing to filter the available options.

Shadows

none
Start typing to filter the available options.
light
Start typing to filter the available options.
strong
Start typing to filter the available options.
visual-variants.tsx
// Themes
<ComboBox theme="primary"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox theme="secondary"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox theme="tertiary"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox theme="quaternary"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

// States
<ComboBox state="success"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox state="warning"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox state="error"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox state="info"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

// Sizes
<ComboBox size="xs"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox size="small"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox size="medium"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox size="large"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

// Variants
<ComboBox variant="solid"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox variant="outline"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox variant="glass"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

// Rounding
<ComboBox rounding="none"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox rounding="medium"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox rounding="large"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

// Shadows
<ComboBox shadow="none"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox shadow="light"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
<ComboBox shadow="strong"
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

Interaction states

Disabled
Start typing to filter the available options.
Loading
Start typing to filter the available options.
interaction-states.tsx
// Disabled
<ComboBox disabled
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />
// Loading
<ComboBox loading
          label="Framework"
          options={[
            { value: "react", label: "React", description: "UI library" },
            { value: "next", label: "Next.js", description: "App framework" },
            { value: "vite", label: "Vite", description: "Build tool" },
            {
              value: "astro",
              label: "Astro",
              description: "Content-focused framework",
            },
          ]}
          placeholder="Search frameworks"
          helperText="Start typing to filter the available options."
        />

Props API

38 props
Columns
Combo Box props API
Default
Description
aria-describedbystringNoaria—ARIA Describedby attribute forwarded to the relevant accessible element.
aria-labelstringNoaria—ARIA Label attribute forwarded to the relevant accessible element.
aria-labelledbystringNoaria—ARIA Labelledby attribute forwarded to the relevant accessible element.
autoCompletestringNoprops—-
classNamestringNostyling—Additional CSS class names for the component root.
data-testidstringNotesting—Test id used to identify the component in tests.
disabledbooleanNopropsfalseWhether the component is disabled.
emptyMessageReactNodeNoprops"No options found"Empty Message.
errorClassNamestringNoprops—Additional CSS class names for the error section.
errorMessageReactNodeNoprops—Error message or error state displayed with the component.
helperTextReactNodeNoprops—Helper text displayed with the field.
helperTextClassNamestringNoprops—Additional CSS class names for the helper text section.