Combobox
Combobox component documentation.

Usage
import {
Combobox,
ComboboxGroup,
ComboboxItem,
ComboboxEmpty,
} from "@aqqo/aqqo-ui";
// Example data
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",
},
]
<Combobox
options={frameworks}
value={value}
setValue={setValue}
selectPlaceholder="Select framework..."
searchPlaceholder="Search frameworks..."
>
<ComboboxGroup>
{frameworks.map((framework) => (
<ComboboxItem
key={framework.value}
value={framework.value} // value to search on (could use framework.label instead)
onSelect={() => setValue(framework.value)}
>
{framework.label}
<Check weight="bold" className={cm("size-4 opacity-0", value === framework.value && "opacity-100")} />
</ComboboxItem>
))}
</ComboboxGroup>
<ComboboxEmpty>No framework found.</ComboboxEmpty>
</Combobox>