āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/sadmann7/diceui/components/combobox ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
@diceui/combobox
npx shadcn@latest add "https://diceui.com/r/combobox"
```package-install
@diceui/combobox
```
<ComponentSource name="combobox" />
Import the parts, and compose them together.
import * as Combobox from "@diceui/combobox";
<Combobox.Root>
<Combobox.Label />
<Combobox.Anchor>
<Combobox.BadgeList>
<Combobox.BadgeItem>
<Combobox.BadgeItemDelete />
</Combobox.BadgeItem>
</Combobox.BadgeList>
<Combobox.Input />
<Combobox.Trigger />
<Combobox.Cancel />
</Combobox.Anchor>
<Combobox.Portal>
<Combobox.Content>
<Combobox.Arrow />
<Combobox.Loading />
<Combobox.Empty />
<Combobox.Group>
<Combobox.GroupLabel />
<Combobox.Item>
<Combobox.ItemText />
<Combobox.ItemIndicator />
</Combobox.Item>
</Combobox.Group>
<Combobox.Separator />
</Combobox.Content>
</Combobox.Portal>
</Combobox.Root>
The container for all combobox parts.
<AutoTypeTable path="./types/docs/combobox.ts" name="RootProps" />
<DataAttributesTable attributes={[ { title: "[data-state]", value: ["open", "closed"], }, { title: "[data-disabled]", value: "Present when disabled", }, ]} />
An accessible label that describes the combobox. Associates with the input element for screen readers.
<AutoTypeTable path="./types/docs/combobox.ts" name="LabelProps" />
A wrapper element that positions the combobox popover relative to the input and trigger. Provides the reference point for popover positioning.
<AutoTypeTable path="./types/docs/combobox.ts" name="AnchorProps" />
<DataAttributesTable
attributes={[
{
title: "[data-state]",
value: ["open", "closed"],
},
{
title: "[data-anchor]",
value: "Present when the anchor is present",
},
{
title: "[data-disabled]",
value: "Present when disabled",
},
{
title: "[data-focused]",
value: "Present when the anchor is focused",
},
]}
/>
A button that toggles the combobox popover. Handles focus management and keyboard interactions for opening/closing the popover.
<AutoTypeTable path="./types/docs/combobox.ts" name="TriggerProps" />
<DataAttributesTable attributes={[ { title: "[data-state]", value: ["open", "closed"], }, { title: "[data-disabled]", value: "Present when disabled", }, ]} />
The text input field that users can type into to filter options.
<AutoTypeTable path="./types/docs/combobox.ts" name="InputProps" />
A container for displaying selected items as badges in a multi-select combobox.
<AutoTypeTable path="./types/docs/combobox.ts" name="BadgeListProps" />
<DataAttributesTable attributes={[ { title: "[data-orientation]", value: ["horizontal", "vertical"], }, ]} />
An individual badge representing a selected item in a multi-select combobox.
<AutoTypeTable path="./types/docs/combobox.ts" name="BadgeItemProps" />
<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the badge is disabled", }, { title: "[data-highlighted]", value: "Present when the badge is highlighted", }, { title: "[data-orientation]", value: ["horizontal", "vertical"], }, ]} />
A button to remove a selected item from the multi-select combobox.
<AutoTypeTable path="./types/docs/combobox.ts" name="BadgeItemDeleteProps" />
<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the parent badge is disabled", }, { title: "[data-highlighted]", value: "Present when the parent badge is highlighted", }, ]} />
A button that clears the input value and resets the filter.
<AutoTypeTable path="./types/docs/combobox.ts" name="CancelProps" />
<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when disabled", }, ]} />
A portal for rendering the combobox content outside of its DOM hierarchy.
<AutoTypeTable path="./types/docs/combobox.ts" name="PortalProps" />
The popover container for combobox items. Positions the combobox popover relative to the anchor.
<AutoTypeTable path="./types/docs/combobox.ts" name="ContentProps" />
<DataAttributesTable attributes={[ { title: "[data-state]", value: ["open", "closed"], }, { title: "[data-side]", value: ["top", "right", "bottom", "left"], }, { title: "[data-align]", value: ["start", "center", "end"], }, ]} />
<CSSVariablesTable variables={[ { title: "--dice-transform-origin", description: "Transform origin for anchor positioning.", }, { title: "--dice-anchor-width", description: "Width of the anchor element.", }, { title: "--dice-anchor-height", description: "Height of the anchor element.", }, { title: "--dice-available-width", description: "Available width in the viewport for the popover element.", }, { title: "--dice-available-height", description: "Available height in the viewport for the popover element.", }, ]} />
A visual arrow element that points to the anchor.
<AutoTypeTable path="./types/docs/combobox.ts" name="ArrowProps" />
A loading indicator for asynchronous filtering operations.
<AutoTypeTable path="./types/docs/combobox.ts" name="LoadingProps" />
A placeholder component displayed when no options match the current filter.
<AutoTypeTable path="./types/docs/combobox.ts" name="EmptyProps" />
A container for logically grouping related options.
<AutoTypeTable path="./types/docs/combobox.ts" name="GroupProps" />
A label that describes a group of options.
<AutoTypeTable path="./types/docs/combobox.ts" name="GroupLabelProps" />
An interactive item in the combobox list.
<AutoTypeTable path="./types/docs/combobox.ts" name="ItemProps" />
<DataAttributesTable attributes={[ { title: "[data-highlighted]", value: "Present when the item is highlighted", }, { title: "[data-disabled]", value: "Present when the item is disabled", }, { title: "[data-state]", value: ["checked", "unchecked"], }, ]} />
The textual content of an item.
<AutoTypeTable path="./types/docs/combobox.ts" name="ItemTextProps" />
A visual indicator for selected options.
<AutoTypeTable path="./types/docs/combobox.ts" name="ItemIndicatorProps" />
A visual divider for separating options or groups.
<AutoTypeTable path="./types/docs/combobox.ts" name="SeparatorProps" />
<KeyboardShortcutsTable shortcuts={[ { keys: ["Enter"], description: "When open, selects the highlighted option. When a badge is highlighted in multiple mode, removes the badge." }, { keys: ["ArrowUp"], description: "When open, highlights the previous option." }, { keys: ["ArrowDown"], description: "When open, highlights the next option." }, { keys: ["ArrowLeft"], description: "In multiple mode: When cursor is at start of input, closes the menu and highlights the last badge. When a badge is highlighted, moves highlight to previous badge." }, { keys: ["ArrowRight"], description: "In multiple mode: When a badge is highlighted, moves highlight to next badge. If on last badge, removes highlight and focuses input." }, { keys: ["Backspace", "Delete"], description: "In multiple mode: When input is empty, removes the last badge. When a badge is highlighted, removes the highlighted badge." }, { keys: ["Home"], description: "When open, highlights the first option." }, { keys: ["End"], description: "When open, highlights the last option." }, { keys: ["PageUp"], description: "When open and modal is enabled, highlights the previous option." }, { keys: ["PageDown"], description: "When open and modal is enabled, highlights the next option." }, { keys: ["Escape"], description: "Closes the combobox popover, returns focus to the input, and resets or restores the input value." }, ]} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā