Installation
Run the following command
pnpm dlx @shadext/cli add multi-select
API Reference
| prop | type | defaultValue |
|---|---|---|
values | string[] | -- |
onValuesChange | (value: string[]) => void | -- |
loop | boolean | false |
Accessibility
The Multi Select component adheres to the WAI-ARIA design pattern. It is accessible
Keyboard Navigation
| key | description |
|---|---|
Enter | opens the list |
Escape | closes the list |
ArrowUp | Move to the previous item |
ArrowDown | Move to the next item |
Delete/Backspace | remove the selected item , otherwise removes the last item |
Usage
import {
MultiSelector,
MultiSelectorContent,
MultiSelectorInput,
MultiSelectorItem,
MultiSelectorList,
MultiSelectorTrigger,
} from "@/components/extension/multi-select";<MultiSelector
values={value}
onValuesChange={setValue}
loop
className="max-w-xs"
>
<MultiSelectorTrigger>
<MultiSelectorInput placeholder="Select your framework" />
</MultiSelectorTrigger>
<MultiSelectorContent>
<MultiSelectorList>
<MultiSelectorItem value={"React"}>React</MultiSelectorItem>
<MultiSelectorItem value={"Vue"}>Vue</MultiSelectorItem>
<MultiSelectorItem value={"Svelte"}>Svelte</MultiSelectorItem>
</MultiSelectorList>
</MultiSelectorContent>
</MultiSelector>Example
Basic
"use client";
import { useState } from "react";
import { MultiSelector } from "@/components/extension/multi-select";const MultiSelect = ()=>{
const [value , setValue] = useState([])
return (
<MultiSelector>
{...}
</MultiSelector>
)
}Form
"use client";
import { Form, FormField, FormItem } from "@/components/ui/form";
import z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
const schema = z.object({
frameworks: z.array(z.string()),
});
type FormValues = z.infer<typeof schema>;const MultiSelectForm = () => {
return (
<Form {...multiForm}>
<form onSubmit={multiForm.handleSubmit(onSubmit)} className="space-y-3">
<FormField
control={multiForm.control}
name="value"
render={({ field }) => (
<FormItem>
<FormLabel>Invite people</FormLabel>
<MultiSelector onValuesChange={field.onChange} values={field.value}>
{...}
</MultiSelector>
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
)
}