Components
Loading preview...
Filters large lists to selectable options based on the matching query.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/comboboximport { Combobox } from "@/components/ui/combobox";
const options = [
{ value: "a", label: "One" },
{ value: "b", label: "Two" },
{ value: "c", label: "Three" }
];
export default function SizesDemo() {
return (
<div className="flex flex-col items-center gap-4 w-3/4">
<Combobox placeholder="Search..." size="small">
<Combobox.Input />
<Combobox.List>
{options.map((option) => (
<Combobox.Option key={option.value} value={option.value}>
{option.label}
</Combobox.Option>
))}
</Combobox.List>
</Combobox>
<Combobox placeholder="Search...">
<Combobox.Input />
<Combobox.List>
{options.map((option) => (
<Combobox.Option key={option.value} value={option.value}>
{option.label}
</Combobox.Option>
))}
</Combobox.List>
</Combobox>
<Combobox placeholder="Search..." size="large">
<Combobox.Input />
<Combobox.List>
{options.map((option) => (
<Combobox.Option key={option.value} value={option.value}>
{option.label}
</Combobox.Option>
))}
</Combobox.List>
</Combobox>
</div>
);
}