Atoms

Multi Select

A multi-select component with badges and search.

FormanceCustom component built for Formance products.

Installation#

npx shadcn@latest add @formance/multi-select

Install the following dependencies:

npm install lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectGroup,
  MultiSelectInput,
  MultiSelectItem,
  MultiSelectSeparator,
  MultiSelectTrigger,
  MultiSelectValue,
} from '@/components/ui/multi-select'

<MultiSelect defaultValues={['ledgers']}>
  <MultiSelectTrigger className="w-[280px]">
    <MultiSelectValue placeholder="Select services..." />
  </MultiSelectTrigger>
  <MultiSelectContent>
    <MultiSelectGroup>
      <MultiSelectItem value="ledgers">Ledgers</MultiSelectItem>
      <MultiSelectItem value="payments">Payments</MultiSelectItem>
      <MultiSelectItem value="wallets">Wallets</MultiSelectItem>
    </MultiSelectGroup>
  </MultiSelectContent>
</MultiSelect>