Combo Box

Name: Boreal UI
Author: Davin Chiupka

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.
`autoComplete`	`string`	No	props	`—`	-
`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.
`errorClassName`	`string`	No	props	`—`	Additional CSS class names for the error section.
`errorMessage`	`ReactNode`	No	props	`—`	Error message or error state displayed with the component.
`helperText`	`ReactNode`	No	props	`—`	Helper text displayed with the field.
`helperTextClassName`	`string`	No	props	`—`	Additional CSS class names for the helper text section.