shadcn.io is an independent project built on shadcn/ui
Web has a globe, Mobile a phone, and GitHub the GitHub mark. After a pick, that icon and name both show on the button.
Use it for a platform, tool, or integration people recognize faster as an icon. No icon means a text Select. In Solid, Ark UI does not choose the icon. 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-[200px] justify-between")} ref={triggerRef}>
{selected() ? <span class="flex items-center gap-2">
<Dynamic component={selected()!.icon} aria-hidden="true" class="size-4" />
{selected()!.label}
</span> : "Select platform..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search platform..." showTrigger={false} />
<ComboboxEmpty>No platform found.</ComboboxEmpty>
<ComboboxList>
{_listCollection.collection().items.map(platform => <ComboboxItem class="gap-2" item={platform}>
<Dynamic component={platform.icon} aria-hidden="true" class="size-4" />
{platform.label}
</ComboboxItem>)}
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
Where do the icons live?
Each platform keeps its icon component next to its label and value, and the row renders it before the label at size-4. The GitHub mark is a small SVG component, since the icon set has no brand logos.
How does the button show the same icon?
It renders the selected platform's icon and label side by side, and Select platform... when nothing is picked. The demo finds the platform for the current value.
Does the search match the icons?
No, only the labels. Typing git finds GitHub. The search box says Search platform..., and No platform found. shows when nothing matches.
Are the icons announced?
No. They have aria-hidden, since the label next to them already says the same thing.
API Reference
Combobox
Sets collection={_listCollection.collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
