Multi-select

Select several values while keeping the field readable.

npx shadcn@latest add @silicon-ui/multi-select
fieldchoice
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/multi-select

Manually

  1. Install the dependencies.

    npm install lucide-react motion
  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/multi-select/multi-select.tsx
    • components/silicon-ui/multi-select/multi-select.module.css
  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { MultiSelect } from "@/components/silicon-ui/multi-select/multi-select";

API reference

PropTypeDefault
label*string—
options*MultiSelectOption[]—
valuestring[]—
defaultValuestring[][]
onValueChange(value: string[]) => void—
placeholderstring"Select options"
descriptionstring—
maxVisiblenumber2
disabledbooleanfalse
classNamestring—

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens