shadcn.io is an independent project built on shadcn/ui
Each label has its own dot: Bug, Feature, Improvement, Documentation, and Question. The dot sits before the name in the list and on the button after a pick.
Use it for labels and tags people already know by color. A name with no color key is a plain Combobox row. In React, Ark UI does not paint the dot. The row does.
Installation
Anatomy
Usage
<Combobox
collection={collection}
onInputValueChange={handleInputValueChange}
onValueChange={handleValueChange}
positioning={{ getAnchorElement: () => triggerRef.current }}
selectionBehavior="clear"
value={value}
>
<ComboboxTrigger
className={cn(
buttonVariants({ variant: "outline" }),
"w-[250px] justify-between"
)}
ref={triggerRef}
>
{selected ? (
<span className="flex items-center gap-2">
<span
aria-hidden="true"
className={cn("size-3 rounded-full", selected.color)}
/>
{selected.label}
</span>
) : (
"Select label..."
)}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput
className="w-full"
placeholder="Search labels..."
{/* The rest of the file is under Installation. */}FAQ
How is the dot drawn?
A span with size-3 rounded-full and the label's background class. It's aria-hidden, since the name next to it says the same thing.
Which colors does it use?
Theme colors, so they follow light and dark mode: bg-destructive for Bug, bg-info for Feature, bg-success for Improvement, bg-primary for Documentation and bg-warning for Question.
How does the button show the dot?
It renders the picked label's dot and name side by side, and Select label... before a pick. The demo finds the label for the current value.
What does the search match?
The label names. The search box says Search labels..., and No label found. shows when nothing matches.
API Reference
Combobox
Sets collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
