Skip to content

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

Free

Items with Status Indicators Combobox for Ark UI

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, Ark 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
  collection={collection}
  onInputValueChange={handleInputValueChange}
  onValueChange={handleValueChange}
  positioning={{ getAnchorElement: () => triggerRef.current }}
  selectionBehavior="clear"
  value={value}
>
  <ComboboxTrigger
    className={cn(
      buttonVariants({ variant: "outline" }),
      "w-[280px] justify-between"
    )}
    ref={triggerRef}
  >
    {selected ? selected.label : "Select task..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search tasks..."
      showTrigger={false}
    />
    <ComboboxEmpty>No task found.</ComboboxEmpty>
    <ComboboxList>
      {collection.items.map((task) => (
        <ComboboxItem
          className="justify-between gap-2"
          item={task}
          key={task.value}
        >
{/* The rest of the file is under Installation. */}

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 collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.

Badge

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

All 42 combobox examples