Components
Loading preview...
A filterable select field that lets people search, choose, and enter values from a popover list.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-combo-box"use client";
import {ComboBox, Input, Label, ListBox} from "@/components/ui/heroui-combo-box";
export default function WithDisabledOptionsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<ComboBox className="w-[256px]" disabledKeys={["cat", "kangaroo"]}>
<Label>Animal</Label>
<ComboBox.InputGroup>
<Input placeholder="Search animals..." />
<ComboBox.Trigger />
</ComboBox.InputGroup>
<ComboBox.Popover>
<ListBox>
<ListBox.Item id="dog" textValue="Dog">Dog<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="cat" textValue="Cat">Cat<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="bird" textValue="Bird">Bird<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="kangaroo" textValue="Kangaroo">Kangaroo<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="elephant" textValue="Elephant">Elephant<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="tiger" textValue="Tiger">Tiger<ListBox.ItemIndicator /></ListBox.Item>
</ListBox>
</ComboBox.Popover>
</ComboBox>
</div>
);
}
export { WithDisabledOptionsDemo };