shadcn.io is an independent project built on shadcn/ui
Premium (Coming Soon) and Enterprise (Contact Sales) are dimmed. Arrow keys skip them and clicks do nothing. Basic and Standard work as usual.
Use it to show a plan that exists without letting people choose it yet. Hiding the row is the other option on a Combobox. In Svelte, Ark UI skips a disabled option.
Installation
Anatomy
Usage
<Combobox collection={collection} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{ getAnchorElement: () => triggerRef }} selectionBehavior="clear" value={value}><ComboboxTrigger class={cn(
buttonVariants({ variant: "outline" }),
"w-[250px] justify-between"
)} bind:ref={triggerRef}>{#if selected}{selected.label}{:else}{"Select service..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search services..." showTrigger={false} /><ComboboxEmpty>No service found.</ComboboxEmpty><ComboboxList>{#each collection.items as service (service.value)}<ComboboxItem item={service}>{service.label}</ComboboxItem>{/each}</ComboboxList></ComboboxContent></Combobox>FAQ
Which items are disabled?
Premium (Coming Soon) and Enterprise (Contact Sales). Each service has a disabled flag in the data.
How is the flag passed to the combobox?
isItemDisabled in useListCollection reads it, so the collection knows which items are off.
Where does the dimmed look come from?
ComboboxItem styles its disabled state with opacity-50 and turns off pointer events, so the demo adds no classes.
Are disabled rows still found by search?
Yes. Typing prem shows Premium (Coming Soon), still disabled, so people learn it exists.
How do I say why an item is off?
Put the reason in the label, as this demo does, or add a short description under it as in Items with Descriptions.
API Reference
Combobox
Sets collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
