Multi-Select

Form

Select multiple values from a dropdown with tag-style display of selections.

Searchable multiple selectionCollapsed chipsClear all

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

multi-select.tsx

"use client";

import { MultiSelect } from "@dashboardpack/core/components/ui/multi-select";
import { useState } from "react";

const options = [
  { value: "design", label: "Design" },
  { value: "engineering", label: "Engineering" },
  { value: "marketing", label: "Marketing" },
];

export default function MultiSelectExample() {
  const [values, setValues] = useState<string[]>([]);
  return (
    <div className="w-full max-w-sm space-y-3">
      <MultiSelect
        options={options}
        value={values}
        onValueChange={setValues}
        ariaLabel="Departments"
        placeholder="Choose departments"
        maxDisplay={2}
      />
      <p className="text-sm text-muted-foreground">
        {values.length} departments selected. Search, toggle, or clear all.
      </p>
    </div>
  );
}

Usage

Store selected option values in an array. The popup supports search, toggling choices, and clearing the selection. maxDisplay limits visible chips.

Import

import { MultiSelect } from "@dashboardpack/core/components/ui/multi-select";

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Multi-Select props
Prop	Type / Default	Description
options	`MultiSelectOption[]` Default: required	Array of { value, label } choices.
value	`string[]` Default: required	Selected option values.
onValueChange	`(values: string[]) => void` Default: required	Receives the next selection.
maxDisplay	`number` Default: 3	Maximum visible selected chips.
ariaLabel	`string` Default: placeholder	Accessible trigger name.
disabled	`boolean` Default: false	Disable selection.

Build with these too

Combobox Checkbox