Combo Box

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

Usage & Examples

Default

Framework

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."
      />

Props API

Combo Box props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	ARIA Describedby attribute forwarded to the relevant accessible element.
`aria-label`	`string`	No	aria	`—`	ARIA Label attribute forwarded to the relevant accessible element.
`aria-labelledby`	`string`	No	aria	`—`	ARIA Labelledby attribute forwarded to the relevant accessible element.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`disabled`	`boolean`	No	props	`false`	Whether the component is disabled.
`emptyMessage`	`ReactNode`	No	props	`"No options found"`	Empty Message.
`error`	`ReactNode`	No	props	`—`	Error message or error state displayed with the component.
`errorClassName`	`string`	No	props	`—`	Additional CSS class names for the error section.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Glass.
`helperText`	`ReactNode`	No	props	`—`	Helper text displayed with the field.
`helperTextClassName`	`string`	No	props	`—`	Additional CSS class names for the helper text section.