Multi Select

Multiple selection component.

import { useState } from 'react'
import {
  MultiSelector,
  MultiSelectorContent,
  MultiSelectorItem,
  MultiSelectorList,
  MultiSelectorTrigger,
} from 'ui-patterns/multi-select'
 
export function MultiSelectDemo() {
  const [selectedValues, setSelectedValues] = useState<string[]>([])
 
  const fruits = [
    { value: 'Apple', isDisabled: false },
    { value: 'Banana', isDisabled: false },
    { value: 'Cherry', isDisabled: false },
    { value: 'Date', isDisabled: false },
    { value: 'Elderberrie', isDisabled: false },
    { value: 'Fig', isDisabled: false },
    { value: 'Grape', isDisabled: false },
    { value: 'Kiwi', isDisabled: true },
    { value: 'Mango', isDisabled: false },
    { value: 'Strawberry', isDisabled: false },
  ]
 
  return (
    <MultiSelector values={selectedValues} onValuesChange={setSelectedValues}>
      <MultiSelectorTrigger className="w-72" label="Select fruits" badgeLimit="wrap" />
      <MultiSelectorContent>
        <MultiSelectorList>
          {fruits.map(({ value, isDisabled }) => (
            <MultiSelectorItem key={value} value={value} disabled={isDisabled}>
              {value}
            </MultiSelectorItem>
          ))}
        </MultiSelectorList>
      </MultiSelectorContent>
    </MultiSelector>
  )
}

Usage

import {
  MultiSelector,
  MultiSelectorContent,
  MultiSelectorItem,
  MultiSelectorTrigger,
} from 'ui-patterns/multi-select'

<MultiSelector
  open={open}
  onOpenChange={setOpen}
  selected={selected}
  onSelectedChange={onSelectedChange}
>
  <MultiSelectorTrigger className="w-72" label="Fruits" />
  <MultiSelectorContent sameWidthAsTrigger>
    <MultiSelectorItem value="Apple">Apple</MultiSelectorItem>
    <MultiSelectorItem value="Banana">Banana</MultiSelectorItem>
    <MultiSelectorItem value="Grape">Grape</MultiSelectorItem>
    <MultiSelectorItem value="Strawberry">Strawberry</MultiSelectorItem>
  </MultiSelectorContent>
</MultiSelector>

Examples

Disabled

Without trigger icon

Set showIcon={false} to hide the trigger icon.

Badge Combo Box

Use MultiSelectorInputto add a search input.

Badge Combo Box with creatable selector

creatable: boolean creatable prop on the MultiSelectorList component can be used to add a new option if no items match

Badge limit

badgeLimit: number | "wrap". badgeLimit prop on the MultiSelectorTrigger component can be used to limit the number of badges displayed.

Limit: 2

Wrapped badge limit

Combine badgeLimit with wrapBadges to limit the number of badges and allow them to wrap onto additional lines. Use badgeLimit="wrap" to show and wrap every selected badge.

Limit: 3

Deletable Badge

Add the deletableBadge prop on the MultiSelectorTrigger component to enable badge removal directly from the badge.

Inline search input

Use mode="inline-combobox" on the MultiSelectorTrigger component to add an inline search input.

Inside a dialog

Use mode="inline-combobox" on the MultiSelectorTrigger component to add an inline search input.

PreviousForm Item Layout

NextFilter Bar