Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

With Disabled Items Combobox for Ark UI

A service combobox where Basic and Standard can be picked, and Premium and Enterprise are shown but locked.

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 React, Ark UI skips a disabled option.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

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 ? selected.label : "Select service..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search services..."
      showTrigger={false}
    />
    <ComboboxEmpty>No service found.</ComboboxEmpty>
    <ComboboxList>
      {collection.items.map((service) => (
        <ComboboxItem item={service} key={service.value}>
          {service.label}
        </ComboboxItem>
      ))}
    </ComboboxList>
{/* The rest of the file is under Installation. */}

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.

Can the keyboard reach a disabled row?

No. The arrow keys skip it and Enter can't select it.

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.

All 42 combobox examples