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 {ChevronsExpandVertical, ComboBox, Input, Label, ListBox} from "@/components/ui/heroui-combo-box";
export default function CustomIndicatorDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<ComboBox className="w-[256px]">
<Label>Favorite Animal</Label>
<ComboBox.InputGroup>
<Input placeholder="Search animals..." />
<ComboBox.Trigger className="size-3">
<ChevronsExpandVertical />
</ComboBox.Trigger>
</ComboBox.InputGroup>
<ComboBox.Popover>
<ListBox>
<ListBox.Item id="aardvark" textValue="Aardvark">Aardvark<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="cat" textValue="Cat">Cat<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="dog" textValue="Dog">Dog<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="kangaroo" textValue="Kangaroo">Kangaroo<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="panda" textValue="Panda">Panda<ListBox.ItemIndicator /></ListBox.Item>
<ListBox.Item id="snake" textValue="Snake">Snake<ListBox.ItemIndicator /></ListBox.Item>
</ListBox>
</ComboBox.Popover>
</ComboBox>
</div>
);
}
export { CustomIndicatorDemo };