Components / inputs

Multi Combobox

A Combobox that chooses any number of options.

import { MultiCombobox } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { MultiCombobox } from '@basiiik/ui';

<MultiCombobox options={[{ value: 'lis', label: 'Lisbon' }, { value: 'osl', label: 'Oslo' }]} label="Teams" />

• Example values were filled in for the required props options, label: replace them with your own.
• Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
• Hover and Focused are CSS. Open is open / defaultOpen. Error is the error prop. Disabled uses the disabled attribute. Filled is one or more chosen values, shown as tags. Needs label or aria-label.
• Compose with: combobox-option, tag.
• Storybook: Inputs/Multi Combobox.

Props

Other props

States. Hover and Focused are CSS. Open is open / defaultOpen. Error is the error prop. Disabled uses the disabled attribute. Filled is one or more chosen values, shown as tags. Needs label or aria-label.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Select multiple options from a long list (roughly more than 8): teams, labels, recipients, filters
• A multiselect where people search by typing; chosen options show as removable tags

Do not use it when

• Only one option can be chosen (use Combobox or Select)
• Fewer than 6 options, all worth seeing at once (use Checkbox)
• Free text that becomes tags, such as pasted email addresses (use Tag Input)
• The chosen values are a filter shown as buttons that toggle (use Chip Group)

Rules for agents

• Pass the full list as options and the chosen ones as values (or defaultValues); onValuesChange(values) gets the whole list in the order chosen
• A value is always one of the options; the typed text only filters
• Needs a label or aria-label, like Combobox
• Use name to submit one form field per chosen value
• Chosen options show as Tags inside the field: do not render your own tags next to it
• Say what is chosen in the label or helper text when it is not obvious ("Teams that can see this project")
• Use error with a message when a required choice is missing; required is met by one chosen option

Avoid

• Using Combobox and keeping an array in your own state
• Hand-building tags above or below the field
• A MultiCombobox for two or three options (use Checkbox)
• Putting commas in the typed text to separate values (not supported)

Writing the content

• Label: a plural noun: "Teams"
• Placeholder: what typing does: "Search teams"
• Option labels are short, unique and sentence case

Keyboard

• ArrowDown / ArrowUp open the list and move the highlight
• Enter or a click adds the highlighted option, or removes it if it is already chosen
• Backspace in an empty field removes the last tag
• Escape closes the list; a second Escape clears the typed text (the tags stay)
• Each tag has a remove button in the tab order; Delete or Backspace on it removes the tag

Accessibility

• Same editable combobox pattern as Combobox; the list is a listbox with aria-multiselectable
• Each change is announced politely with the count ("Engineering selected, 2 selected"); translate it with formatChange
• A tag's remove button is named "Remove Engineering"; translate it with formatRemove

Colour tokens it reads

Related

• Combobox
• Select
• Tag
• Checkbox
• Chip
• Tag Input

inputs 12 Figma variants Try it in the live demo