# Multi Select

Multi-select list with checkboxes and select-all



<ComponentPreview base="ink" name="multi-select-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/multi-select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="ink" name="multi-select" title="components/ui/multi-select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

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

```tsx
<MultiSelect
  options={[
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" },
    { value: "svelte", label: "Svelte" },
  ]}
  onChange={(values) => {}}
/>
```

API Reference [#api-reference]

MultiSelect [#multiselect]

| Prop        | Type                     | Default    |
| ----------- | ------------------------ | ---------- |
| `options`   | `MultiSelectOption<T>[]` | `required` |
| `value`     | `T[]`                    | -          |
| `onChange`  | `(values: T[]) => void`  | -          |
| `onSubmit`  | `(values: T[]) => void`  | -          |
| `cursor`    | `string`                 | `"›"`      |
| `checkmark` | `string`                 | `"◉"`      |
| `height`    | `number`                 | -          |