Skip to content

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

Free

Items with Status Indicators Combobox for React

A task picker combobox that ends each row with a status badge for Done, In Progress, or To Do.

Each task row ends with a badge. Done, In Progress, and To Do use different badge styles, so the state is easy to scan. The button shows the task name after a pick.

Use it for tasks, tickets, or orders, where the state matters while choosing. A status with no list is just a Badge. In React, Base UI does not set the badge style.

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={tasks}>
  <ComboboxTrigger
    render={
      <Button className="w-[280px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select task..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search tasks..." showTrigger={false} />
    <ComboboxEmpty>No task found.</ComboboxEmpty>
    <ComboboxList>
      {(task: Task) => (
        <ComboboxItem
          className="justify-between gap-2"
          key={task.value}
          value={task}
        >
          {task.label}
          <Badge variant={statusConfig[task.status].variant}>
            {statusConfig[task.status].label}
          </Badge>
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

How is a status turned into a badge?

A statusConfig map gives each status a label and a Badge variant: completed is Done with default, in-progress is In Progress with secondary, and todo is To Do with outline.

How is the badge placed?

ComboboxItem gets justify-between gap-2, so the task name sits at the start and the badge at the end, before the check.

Which tasks are listed?

Update documentation (Done), Fix login bug (In Progress), Add dark mode (To Do) and Optimize performance (In Progress).

What does the button show?

The picked task's name, or Select task... before a pick. No task found. shows when nothing matches.

Can I stop finished tasks from being picked?

Yes, disable them, as in With Disabled Items. The badge still shows why.

API Reference

Combobox

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

Button

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

Badge

Sets variant={statusConfig[task.status].variant}. The rest is on the Badge page.

All 42 combobox examples