Multi Select

1'use client'
2
3import React from 'react'
4
5import { Label } from '@/components/ui/label'
6import MultiSelect from '@/components/ui/multi-select'
7
8const options = [
9    { value: 'next', label: 'Next.js' },
10    { value: 'react', label: 'React' },
11    { value: 'svelte', label: 'Svelte' },
12    { value: 'vue', label: 'Vue' },
13    { value: 'angular', label: 'Angular' },
14    { value: 'solid', label: 'SolidJS' },
15    { value: 'preact', label: 'Preact' },
16    { value: 'ember', label: 'Ember' },
17    { value: 'alpine', label: 'Alpine.js' },
18    { value: 'jquery', label: 'jQuery' },
19]
20
21const groups = [
22    {
23        label: 'Frontend',
24        options: [
25            { value: 'react', label: 'React' },
26            { value: 'vue', label: 'Vue' },
27            { value: 'svelte', label: 'Svelte' },
28            { value: 'preact', label: 'Preact' },
29        ],
30    },
31    {
32        label: 'Meta Frameworks',
33        options: [
34            { value: 'next', label: 'Next.js' },
35            { value: 'solid', label: 'SolidJS' },
36            { value: 'ember', label: 'Ember' },
37        ],
38    },
39]
40
41export function MultiSelectDemo() {
42    const [flatValue, setFlatValue] = React.useState<string[]>([])
43    const [groupValue, setGroupValue] = React.useState<string[]>([])
44
45    return (
46        <div className="space-y-6">
47            <div className="w-72 space-y-2 sm:w-96">
48                <Label>Without Group Multiselect</Label>
49                <MultiSelect
50                    options={options}
51                    value={flatValue}
52                    onValueChange={setFlatValue}
53                    placeholder="Select frameworks..."
54                    selectAll
55                    searchInputProps={{
56                        placeholder: 'Search frameworks...',
57                    }}
58                    notFoundProps={{
59                        children: 'No frameworks found.',
60                    }}
61                />
62            </div>
63
64            <div className="w-72 space-y-2 sm:w-96">
65                <Label>With Group Multiselect</Label>
66                <MultiSelect
67                    groups={groups}
68                    value={groupValue}
69                    onValueChange={setGroupValue}
70                    placeholder="Select grouped frameworks..."
71                    selectAll
72                />
73            </div>
74        </div>
75    )
76}
77

1'use client'
2
3import React from 'react'
4
5import { Label } from '@/components/ui/label'
6import MultiSelect from '@/components/ui/multi-select'
7
8const options = [
9    { value: 'next', label: 'Next.js' },
10    { value: 'react', label: 'React' },
11    { value: 'svelte', label: 'Svelte' },
12    { value: 'vue', label: 'Vue' },
13    { value: 'angular', label: 'Angular' },
14    { value: 'solid', label: 'SolidJS' },
15    { value: 'preact', label: 'Preact' },
16    { value: 'ember', label: 'Ember' },
17    { value: 'alpine', label: 'Alpine.js' },
18    { value: 'jquery', label: 'jQuery' },
19]
20
21const groups = [
22    {
23        label: 'Frontend',
24        options: [
25            { value: 'react', label: 'React' },
26            { value: 'vue', label: 'Vue' },
27            { value: 'svelte', label: 'Svelte' },
28            { value: 'preact', label: 'Preact' },
29        ],
30    },
31    {
32        label: 'Meta Frameworks',
33        options: [
34            { value: 'next', label: 'Next.js' },
35            { value: 'solid', label: 'SolidJS' },
36            { value: 'ember', label: 'Ember' },
37        ],
38    },
39]
40
41export function MultiSelectCheckbox() {
42    const [flatValue, setFlatValue] = React.useState<string[]>([])
43    const [groupValue, setGroupValue] = React.useState<string[]>([])
44
45    return (
46        <div className="space-y-6">
47            <div className="w-72 space-y-2 sm:w-96">
48                <Label>Without Group (Checkbox)</Label>
49                <MultiSelect
50                    options={options}
51                    value={flatValue}
52                    onValueChange={setFlatValue}
53                    placeholder="Select frameworks..."
54                    checkbox
55                    selectAll
56                />
57            </div>
58
59            <div className="w-72 space-y-2 sm:w-96">
60                <Label>With Group (Checkbox)</Label>
61                <MultiSelect
62                    groups={groups}
63                    value={groupValue}
64                    onValueChange={setGroupValue}
65                    placeholder="Select grouped frameworks..."
66                    checkbox
67                    selectAll
68                />
69            </div>
70        </div>
71    )
72}
73

1'use client'
2
3import React from 'react'
4
5import { Label } from '@/components/ui/label'
6import MultiSelect from '@/components/ui/multi-select'
7
8const options = [
9    { value: 'next', label: 'Next.js' },
10    { value: 'react', label: 'React' },
11    { value: 'svelte', label: 'Svelte' },
12    { value: 'vue', label: 'Vue' },
13    { value: 'angular', label: 'Angular' },
14    { value: 'solid', label: 'SolidJS' },
15    { value: 'preact', label: 'Preact' },
16    { value: 'ember', label: 'Ember' },
17]
18
19export function MultiSelectMaxLimitExamples() {
20    const [valueA, setValueA] = React.useState<string[]>([])
21    const [valueB, setValueB] = React.useState<string[]>([])
22
23    return (
24        <div className="space-y-6">
25            <div className="w-72 space-y-2 sm:w-96">
26                <Label>Comma separated (with limit)</Label>
27                <MultiSelect
28                    options={options}
29                    value={valueB}
30                    onValueChange={setValueB}
31                    placeholder="Select items..."
32                    commaSeparated
33                    maxSelectedLabels={4}
34                />
35            </div>
36            <div className="w-72 space-y-2 sm:w-96">
37                <Label>Max selected labels (chips)</Label>
38                <MultiSelect
39                    options={options}
40                    value={valueA}
41                    onValueChange={setValueA}
42                    placeholder="Select up to many..."
43                    maxSelectedLabels={3}
44                />
45            </div>
46        </div>
47    )
48}
49