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 Solid, Ark UI does not paint the dot. The row does.
Installation
Anatomy
Usage
<Combobox collection={_listCollection.collection()} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{
getAnchorElement: () => triggerRef
}} selectionBehavior="clear" value={value()}>
<ComboboxTrigger class={cn(buttonVariants({
variant: "outline"
}), "w-[250px] justify-between")} ref={triggerRef}>
{selected() ? <span class="flex items-center gap-2">
<span aria-hidden="true" class={cn("size-3 rounded-full", selected()!.color)} />
{selected()!.label}
</span> : "Select label..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search labels..." showTrigger={false} />
<ComboboxEmpty>No label found.</ComboboxEmpty>
<ComboboxList>
{_listCollection.collection().items.map(label => <ComboboxItem class="gap-2" item={label}>
<span aria-hidden="true" class={cn("size-3 shrink-0 rounded-full", label.color)} />
{label.label}
</ComboboxItem>)}
</ComboboxList>
</ComboboxContent>
</Combobox>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={_listCollection.collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
