Components
ComboBox [react-aria-components]
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.
Loading preview...
import { 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>
)
}