Searchable Multi Select

Anatomy

import {Field, SearchableMultiSelect} from '@staffbase/design';

<Field.Root>
  <Field.Label />
  <Field.Description />
  <SearchableMultiSelect.Root>
    <SearchableMultiSelect.Value>
      <SearchableMultiSelect.Chip />
      <SearchableMultiSelect.Input />
    </SearchableMultiSelect.Value>

    <SearchableMultiSelect.Popup>
      <SearchableMultiSelect.Empty />
      <SearchableMultiSelect.List>
        <SearchableMultiSelect.Group>
          <SearchableMultiSelect.GroupLabel />
          <SearchableMultiSelect.Collection>
            <SearchableMultiSelect.Item />
          </SearchableMultiSelect.Collection>
        </SearchableMultiSelect.Group>
      </SearchableMultiSelect.List>
    </SearchableMultiSelect.Popup>

  </SearchableMultiSelect.Root>
  <Field.Error />
</Field.Root>

API reference

Use the Field component to wrap SearchableMultiSelect and provide label, description, and error content.

All parts inherit their base behavior from Base UI Combobox. The sections below document all exports and highlight design-system additions.

Root

Creates the combobox context and state for filtering and multi-selection.

SearchableMultiSelect.Root always enables multi-select behavior (multiple={true}).

Value

Renders the value container, selected chips, clear button, and popup trigger.

Input

Text input used to filter available options.

Popup

Composed from Portal + Positioner + Popup in one part.

List

Container for options, groups, separators, and collection rendering.

Item

Selectable option row with built-in selected indicator.

Group

Groups related options together, typically with GroupLabel and Collection.

GroupLabel

Label for a grouped section of options.

Separator

Visual divider between list sections.

Chip

Represents a selected value and includes a built-in remove action.

Empty

Fallback content shown when no options match the current query.

Collection

Helper part for rendering nested collections (commonly used inside grouped lists).

Status

Optional live-region/status output for communicating result state to assistive technologies.

Examples

Grouped

With avatars