shadcn.io is an independent project built on shadcn/ui
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 Solid, Ark UI does not set the badge style.
Installation
Anatomy
Usage
<Combobox collection={_listCollection.collection()} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{
getAnchorElement: () => triggerRef
}} selectionBehavior="clear" value={value()}>
<ComboboxTrigger class={cn(buttonVariants({
variant: "outline"
}), "w-[280px] justify-between")} ref={triggerRef}>
{selected() ? selected()!.label : "Select task..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search tasks..." showTrigger={false} />
<ComboboxEmpty>No task found.</ComboboxEmpty>
<ComboboxList>
{_listCollection.collection().items.map(task => <ComboboxItem class="justify-between gap-2" item={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).
Can I search by status?
No, the search matches task names. Typing done finds nothing. Add the status label to the searched text if people filter that way.
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={_listCollection.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.
