Overrides
Combobox
Extended Features
- Rewrite inspired by Select to use only Popover, Command, and Button.
Install
This component requires button, command, and popover. Install them from the default shadcn
registry first:
npx shadcn@latest add button command popoverThen configure your registry in components.json:
{
"registries": {
"@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
}
}Then run:
npx shadcn@latest add @uxio/comboboxUsage
"use client"
import {
Combobox,
ComboboxContent,
ComboboxGroup,
ComboboxItem,
ComboboxText,
ComboboxTrigger,
ComboboxValue,
} from "@/components/ui/combobox"
const options = [
{ value: "next.js", label: "Next.js" },
{ value: "sveltekit", label: "SvelteKit" },
]
export function FrameworkCombobox() {
return (
<Combobox>
<ComboboxTrigger>
<ComboboxValue placeholder="Select framework..." />
</ComboboxTrigger>
<ComboboxContent search={{ placeholder: "Filter...", emptyMessage: "No framework found." }}>
<ComboboxGroup>
{options.map((opt) => (
<ComboboxItem key={opt.value} value={opt.value}>
<ComboboxText>{opt.label}</ComboboxText>
</ComboboxItem>
))}
</ComboboxGroup>
</ComboboxContent>
</Combobox>
)
}Examples
Default
Combobox with search, placeholder, and grouped options.