MultiSelect

Storybook

Go to Story

MultiSelect()

function MultiSelect(__namedParameters): Element;

Defined in: src/components/MultiSelect/MultiSelect.tsx:93

Root component that provides context for building a multi-select input.

Compose with MultiSelectTrigger, MultiSelectValue, and MultiSelectContent.

Parameters

Parameter	Type
__namedParameters	MultiSelectProps

Returns

Element

Example

<MultiSelect>
  <MultiSelectTrigger className="w-full max-w-[400px]">
    <MultiSelectValue placeholder="Select fruit..." />
  </MultiSelectTrigger>
  <MultiSelectContent>
    <MultiSelectGroup>
      <MultiSelectItem value="apple">Apple</MultiSelectItem>
      <MultiSelectItem value="banana">Banana</MultiSelectItem>
    </MultiSelectGroup>
  </MultiSelectContent>
</MultiSelect>

---

MultiSelectTrigger()

function MultiSelectTrigger(__namedParameters): Element;

Defined in: src/components/MultiSelect/MultiSelect.tsx:156

Clickable trigger element that opens the selection popover.

Renders like an input using the Button component. Place MultiSelectValue inside to show selected items.

Parameters

Parameter	Type
__namedParameters	MultiSelectTriggerProps

Returns

Element

Example

<MultiSelectTrigger>
  <MultiSelectValue placeholder="Choose options..." />
</MultiSelectTrigger>

---

MultiSelectValue()

function MultiSelectValue(__namedParameters): Element;

Defined in: src/components/MultiSelect/MultiSelect.tsx:220

Displays the current selection inside the trigger, with badges for each selected item.

Parameters

Parameter	Type
__namedParameters	MultiSelectValueProps

Returns

Element

Example

<MultiSelectTrigger>
  <MultiSelectValue placeholder="Select tags..." overflowBehavior="cutoff" />
</MultiSelectTrigger>

---

MultiSelectContent()

function MultiSelectContent(__namedParameters): Element;

Defined in: src/components/MultiSelect/MultiSelect.tsx:387

Popover content that renders the Command-based searchable list of items.

Parameters

Parameter	Type
__namedParameters	MultiSelectContentProps

Returns

Element

Examples

<MultiSelectContent search={{ placeholder: "Search fruits...", emptyMessage: "Nothing found" }}>
  <MultiSelectGroup>
    <MultiSelectItem value="apple">Apple</MultiSelectItem>
  </MultiSelectGroup>
</MultiSelectContent>

// Without search field
<MultiSelectContent search={false}>
  <MultiSelectItem value="a">A</MultiSelectItem>
</MultiSelectContent>

---

MultiSelectItem()

function MultiSelectItem(__namedParameters): Element;

Defined in: src/components/MultiSelect/MultiSelect.tsx:451

Selectable item within the list. Toggles inclusion in the selection.

Parameters

Parameter	Type
__namedParameters	MultiSelectItemProps

Returns

Element

Examples

<MultiSelectItem value="apple">Apple</MultiSelectItem>

<MultiSelectItem value="us" badgeLabel={<span>United States</span>}>
  USA
</MultiSelectItem>

---

MultiSelectGroup()

function MultiSelectGroup(props): Element;

Defined in: src/components/MultiSelect/MultiSelect.tsx:491

Group wrapper for grouping related MultiSelectItems under a heading.

Parameters

Parameter	Type
props	Children & Omit<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<MultiSelectGroup heading="Fruits">
  <MultiSelectItem value="apple">Apple</MultiSelectItem>
</MultiSelectGroup>

---

MultiSelectSeparator()

function MultiSelectSeparator(props): Element;

Defined in: src/components/MultiSelect/MultiSelect.tsx:507

Visual separator between groups or sections in the list.

Parameters

Parameter	Type
props	Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<>
  <MultiSelectGroup heading="A" />
  <MultiSelectSeparator />
  <MultiSelectGroup heading="B" />
</>