Components
Loading preview...
A ComboBox combines a text input with a listbox, allowing users to filter a list of options to items matching a query. A combo box can be built using the <datalist> HTML element, but this is very limited in functionality and difficult to style. ComboBox helps achieve accessible combo box and autocomplete components that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/comboboximport { ChevronsUpDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
Combobox,
ComboboxInput,
ComboboxItem,
ComboboxListBox,
ComboboxPopover,
} from "@/components/ui/combobox"
import { FieldGroup, Label } from "@/components/ui/field"
export function ComboboxDemo() {
return (
<Combobox>
<Label>Favorite Animal</Label>
<FieldGroup className="p-0">
<ComboboxInput />
<Button variant="ghost" size="icon" className="mr-1 size-6 p-1">
<ChevronsUpDown aria-hidden="true" className="size-4 opacity-50" />
</Button>
</FieldGroup>
<ComboboxPopover>
<ComboboxListBox>
<ComboboxItem textValue="Aardvark">Aardvark</ComboboxItem>
<ComboboxItem textValue="Cat">Cat</ComboboxItem>
<ComboboxItem textValue="Dog">Dog</ComboboxItem>
<ComboboxItem textValue="Kangaroo">Kangaroo</ComboboxItem>
<ComboboxItem textValue="Panda">Panda</ComboboxItem>
<ComboboxItem textValue="Snake">Snake</ComboboxItem>
</ComboboxListBox>
</ComboboxPopover>
</Combobox>
)
}