Multi Select

Pro

Multi-select field with a searchable bottom-sheet list. Drag down the checkboxes to pick or clear many rows at once, select all results, set a limit, and see your choices appear as chips.

Preview

Installation

npx @lumioui/cli add pro/multi-select

Usage

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

API reference

Prop Type Default
options* MultiSelectOption[] —
value string[]

Controlled selected values, in pick order.

 —
defaultValue string[]

Initial selected values (uncontrolled).

 —
onValueChange (value: string[]) => void —
label string

Visible label above the field (also the sheet title by default).

 —
title string

Sheet title. Default label, else "Select".

 —
placeholder string

Placeholder shown when nothing is selected.

 "Select…"
searchPlaceholder string

Search placeholder.

 "Search…"
emptyText string

Line shown when no options match the search.

 "Nothing matches. Check the sp…
disabled boolean —
max number

Most values that may be selected. Going past it flickers the count.

 —
maxLabel (max: number) => string

Footer note about the limit. Default Up to ${max}.

 (m) => `Up to ${m}`
open boolean

Controlled sheet state. Omit for uncontrolled.

 —
onOpenChange (open: boolean) => void —
doneLabel string

Footer button when nothing new was added. Default "Done".

 "Done"
addLabel (n: number) => string

Footer button once n values were added this time. Default Add ${n}.

 (n) => `Add ${n}`
travel boolean

@deprecated Chips now ignite in their slot; ignored.

 —
confirmed boolean

The selection was sent or saved: chips lock and switch on to solid one by one. Default false.

 false
accessibilityLabel string

Accessible label. Default label or "Multi select".

 —
className string —