Skip to content

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

Free

With Item Icons Combobox for React

A platform combobox with an icon beside Web, Mobile, and GitHub, repeated on the button after a pick.

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 React, Base UI does not choose the icon. 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={platforms}>
  <ComboboxTrigger
    render={
      <Button className="w-[200px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue>{renderValue}</ComboboxValue>
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search platform..." showTrigger={false} />
    <ComboboxEmpty>No platform found.</ComboboxEmpty>
    <ComboboxList>
      {(platform: Platform) => (
        <ComboboxItem className="gap-2" key={platform.value} value={platform}>
          <platform.icon aria-hidden="true" className="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. ComboboxValue takes a function that gets the selected platform.

Are the icons announced?

No. They have aria-hidden, since the label next to them already says the same thing.

How is the selected platform marked?

ComboboxItem adds its check at the end of the row, after the icon and the label.

Can I use other icons?

Yes. Any icon component works, from Lucide or your own SVG. Keep them the same size so the labels line up.

API Reference

Combobox

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

Button

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

All 42 combobox examples