Combobox
Select from a list of options with a search input.
Shadcn UI
This component is part of Shadcn UI.
Usage
import { z } from 'zod';
import { AutoForm } from '@vitnode/core/components/form/auto-form';
import { AutoFormCombobox } from '@vitnode/core/components/form/fields/combobox';
const formSchema = z.object({
type: z.enum(['option-one', 'option-two']),
});
<AutoForm
formSchema={formSchema}
fields={[
{
id: 'type',
component: props => (
<AutoFormCombobox
description="Select an option from the list"
label="Type"
labels={[
{
value: 'option-one',
label: 'Option One',
},
{
value: 'option-two',
label: 'Option Two',
},
]}
{...props}
/>
),
},
]}
/>
'use client';
import * as React from 'react';
import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
import { cn } from '@vitnode/core/lib/utils';
import { Button } from '@vitnode/core/components/ui/button';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '@vitnode/core/components/ui/command';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@vitnode/core/components/ui/popover';
const frameworks = [
{
value: 'next.js',
label: 'Next.js',
},
{
value: 'sveltekit',
label: 'SvelteKit',
},
{
value: 'nuxt.js',
label: 'Nuxt.js',
},
{
value: 'remix',
label: 'Remix',
},
{
value: 'astro',
label: 'Astro',
},
];
export function ExampleCombobox() {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState('');
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between"
>
{value
? frameworks.find(framework => framework.value === value)?.label
: 'Select framework...'}
<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search framework..." />
<CommandList>
<CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup>
{frameworks.map(framework => (
<CommandItem
key={framework.value}
value={framework.value}
onSelect={currentValue => {
setValue(currentValue === value ? '' : currentValue);
setOpen(false);
}}
>
<CheckIcon
className={cn(
'mr-2 h-4 w-4',
value === framework.value ? 'opacity-100' : 'opacity-0',
)}
/>
{framework.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
Props
Prop | Type | Default |
---|---|---|
searchPlaceholder? | string | Search... |
placeholder? | string | Select an option |
labels? | Array<{ value: string; label: string }> | [] |
description? | string | - |
label? | string | - |