Multi Select

A multi-select component with checkboxes and badge display.

Multi Select allows users to choose multiple options from a dropdown list. Selected items are displayed as badges with the ability to clear individual selections or all at once. The component supports keyboard navigation and provides a clean interface for managing multiple selections.

Registry Component: This component is available from the Strongtie registry. Add it using: npx shadcn@latest add @strongtie/multi-select

Example

"use client"

import { useState } from "react"
import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
} from "@/components/ui/multi-select"

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "angular", label: "Angular" },
  { value: "svelte", label: "Svelte" },
  { value: "nextjs", label: "Next.js" },
  { value: "nuxt", label: "Nuxt" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export function MultiSelectDefault() {
  const [value, setValue] = useState<string[]>([])

  return (
    <div className="w-[300px]">
      <MultiSelect value={value} onValueChange={setValue} items={frameworks}>
        <MultiSelectTrigger placeholder="Select frameworks..." />
        <MultiSelectContent>
          {frameworks.map((framework) => (
            <MultiSelectItem
              key={framework.value}
              value={framework.value}
              label={framework.label}
            />
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </div>
  )
}

Installation

Add this component from the Strongtie registry:


npx shadcn@latest add @strongtie/multi-select

Or by URL:


npx shadcn@latest add https://design.strongtie.io/r/multi-select.json

This will install the component and all required dependencies:

Usage

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

Components

This module exports the following components:

MultiSelectRoot
MultiSelectTrigger
MultiSelectContent
MultiSelectItem
MultiSelectSeparator
MultiSelectGroup
MultiSelectLabel
MultiSelectClearButton
useMultiSelect

Props

`<MultiSelectRoot>`

Prop	Type	Default	Description
`onValueChange` *	`(value: string[]) => void`	-	Callback when selected values change
`value` *	`string[]`	-	Array of selected values
`disabled`	`boolean`	`false`	Whether the multi-select is disabled
`items`	`MultiSelectItemType[]`	-	Items to display in the list
`maxItems`	`number`	-	Maximum number of items that can be selected

`<MultiSelectTrigger>`

Prop	Type	Default	Description
`placeholder`	`string`	-	Placeholder text when no items are selected

`<MultiSelectItem>`

Prop	Type	Default	Description
`label`	`string`	-	Display label for the item

Examples

Default

"use client"

import { useState } from "react"
import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
} from "@/components/ui/multi-select"

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "angular", label: "Angular" },
  { value: "svelte", label: "Svelte" },
  { value: "nextjs", label: "Next.js" },
  { value: "nuxt", label: "Nuxt" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export function MultiSelectDefault() {
  const [value, setValue] = useState<string[]>([])

  return (
    <div className="w-[300px]">
      <MultiSelect value={value} onValueChange={setValue} items={frameworks}>
        <MultiSelectTrigger placeholder="Select frameworks..." />
        <MultiSelectContent>
          {frameworks.map((framework) => (
            <MultiSelectItem
              key={framework.value}
              value={framework.value}
              label={framework.label}
            />
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </div>
  )
}

With Icons

"use client"

import * as React from "react"
import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
} from "@/components/ui/multi-select"

const options = [
  { value: "home", label: "Home" },
  { value: "settings", label: "Settings" },
  { value: "profile", label: "Profile" },
  { value: "notifications", label: "Notifications" },
]

export function MultiSelectWithIcons() {
  const [value, setValue] = React.useState<string[]>([])

  return (
    <div className="w-[300px]">
      <MultiSelect value={value} onValueChange={setValue} items={options}>
        <MultiSelectTrigger placeholder="Select options..." />
        <MultiSelectContent>
          {options.map((option) => (
            <MultiSelectItem
              key={option.value}
              value={option.value}
              label={option.label}
            />
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </div>
  )
}

Date Picker Tree

On This Page

Example Installation Usage Components Props <MultiSelectRoot><MultiSelectTrigger><MultiSelectItem>Examples Default With Icons

Contribute