Skip to content

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

Free

With Disabled Items Combobox for React

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, Base 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 items={services}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select service..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search services..." showTrigger={false} />
    <ComboboxEmpty>No service found.</ComboboxEmpty>
    <ComboboxList>
      {(service: Service) => (
        <ComboboxItem
          disabled={service.disabled}
          key={service.value}
          value={service}
        >
          {service.label}
        </ComboboxItem>
      )}
    </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?

Each ComboboxItem gets disabled.

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 items={services}, placeholder="Select service...", placeholder="Search services...", showTrigger={false}, disabled={service.disabled} and value={service}. The rest is on the Combobox page.

Button

Sets variant="outline". The rest is on the Button page.

All 42 combobox examples