Multi Select

Docs

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"
        showIcon={false}
      />
      <MultiSelectorContent>
        <MultiSelectorList>
          {fruits.map(({ value, isDisabled }) => (
            <MultiSelectorItem key={value} value={value} disabled={isDisabled}>
              {value}
            </MultiSelectorItem>
          ))}
        </MultiSelectorList>
      </MultiSelectorContent>
    </MultiSelector>
  )
}

Usage

import {
  MultiSelector,
  MultiSelectorTrigger,
  MultiSelectorContent,
  MultiSelectorItem,
} 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

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

Badge Limit="wrap"

badgeLimit prop can also be "wrap" to wrap the badges to the next line.

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.

PreviousForm Item Layout

NextFilter Bar