Multi select

This is demo and docs for multi select

Multi Select

Allows selecting multiple values

Multi Select - Chip Style

Styling chip using chipStyle props

Custom Selected UI

Custom rendering of selected values

Media Rich Options

Options with image and extra metadata

Checkbox Style List

Multi select rendered as checkbox list

Banana

Multi Select with label and error

Multi select with label,error, helperText and all

Select Fruits *

Banana

Please select at least one

1️⃣ Component Documentation — `MultiSelectPopover`

This is written in the same tone + structure you’ve been using for your design system docs.

MultiSelectPopover

A flexible, controlled/uncontrolled multi-select popover built on Radix Popover. Supports single & multiple selection, search, select-all, custom rendering, and chip-style selected values.

✨ Features

Single & multiple selection modes
Searchable options
Select all / deselect all (multiple mode)
Controlled & uncontrolled usage
Custom option rendering
Custom selected value rendering
Automatically matches trigger width
Headless internal hook (useMultiSelect)

Basic Usage

<MultiSelectPopover
  options={[
    { label: "React", value: "react" },
    { label: "Vue", value: "vue" },
    { label: "Svelte", value: "svelte" },
  ]}
/>

Controlled Usage

const [value, setValue] = useState<string[]>([]);

<MultiSelectPopover
  options={options}
  value={value}
  onValueChange={setValue}
/>;

Single Select Mode

<MultiSelectPopover
  mode="single"
  options={options}
  placeholder="Select one"
/>

Custom Selected Rendering

<MultiSelectPopover
  options={options}
  renderSelected={(items) => (
    <span>{items.map((i) => i.label).join(", ")}</span>
  )}
/>

Custom Option Rendering

<MultiSelectPopover
  options={options}
  renderOption={(option, isSelected) => (
    <div className="flex items-center gap-2">
      <span>{option.label}</span>
      {isSelected && <CheckIcon />}
    </div>
  )}
/>

Props

Prop	Type	Default	Description
options	{ label: string; value: string }[]	—	List of selectable options.
placeholder	string	"Select..."	Placeholder text shown when no value is selected.
mode	"single" \| "multiple"	"multiple"	Controls whether single or multiple selection is allowed.
value	string[]	—	Controlled selected values.
defaultValue	string[]	[]	Initial selection for uncontrolled usage.
onValueChange	(value: string[]) => void	—	Callback fired when selection changes.
renderSelected	(options) => ReactNode	—	Custom renderer for selected values.
renderOption	(option, selected) => ReactNode	—	Custom renderer for dropdown options.
chipStyle	"default" \| "outline" \| "solid"	"default"	Visual style of selected chips.

3️⃣ Hook Documentation — `useMultiSelect`

This hook is headless, reusable, and UI-agnostic.

Purpose

Manages:

selection state
search filtering
single / multiple logic
select all behavior
controlled & uncontrolled values

Hook API

useMultiSelect<T>({
  options,
  value,
  defaultValue,
  onValueChange,
  mode,
});

Returned Values

Key	Description
selected	Current selected values.
selectedOptions	Full option objects corresponding to selected values.
search	Current search string.
filteredOptions	Options filtered based on the search input.
allSelected	Whether all currently visible options are selected.
someSelected	Indicates a partial selection state.
toggle	Toggle selection for a single option.
remove	Remove a selected value.
toggleAll	Select or deselect all filtered options.
setSearch	Update the search string used for filtering options.