# Multi Select

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.

> Composed · Pro · Forms & Inputs — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/multi-select
```

## Import

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

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `searchPlaceholder?` | `string` | Search placeholder. |
| `emptyText?` | `string` | Line shown when no options match the search. |
| `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}`. |
| `open?` | `boolean` | Controlled sheet state. Omit for uncontrolled. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `doneLabel?` | `string` | Footer button when nothing new was added. Default "Done". |
| `addLabel?` | `(n: number) => string` | Footer button once `n` values were added this time. Default `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. |
| `accessibilityLabel?` | `string` | Accessible label. Default `label` or "Multi select". |
| `className?` | `string` | — |

## Icons rendered

- `x` — /icons.html?i=x
- `check` — /icons.html?i=check
- `chevron-down` — /icons.html?i=chevron-down
- `search` — /icons.html?i=search

Source: https://lumioui.com/components/multi-select