Skip to content

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

Free

Color-Coded Items Combobox for React

An issue-label combobox with a colored dot beside Bug, Feature, Improvement, Documentation, and Question.

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 React, Base UI does not paint the dot. The row does.

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={labels}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue>{renderValue}</ComboboxValue>
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search labels..." showTrigger={false} />
    <ComboboxEmpty>No label found.</ComboboxEmpty>
    <ComboboxList>
      {(label: Label) => (
        <ComboboxItem className="gap-2" key={label.value} value={label}>
          <span
            aria-hidden="true"
            className={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. ComboboxValue takes a function that gets the picked label.

Is color the only cue?

No. Every dot has its name beside it, so the labels can be told apart without seeing color.

Can I add my own colors?

Yes. Store any background class with the label, or set the dot's color inline from a hex value saved with the label.

API Reference

Combobox

Sets items={labels}, placeholder="Search labels...", showTrigger={false} and value={label}. The rest is on the Combobox page.

Button

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

All 42 combobox examples