shadcn.io is not affiliated with official shadcn/ui
Search and Filter Task List Block for React
A task finder with a search field that marks matching words, All, Open and Done tabs with live counts, a foot that says what is showing, and an empty state with a way back.
Installation
Overview
Help people find one task among many, with this searchable to-do list block for React with Base UI. A search field built from Input Group filters the list as you type and a Search Highlight Text marks each match in the title, ignoring case and accents. Tabs switch between All, Open and Done, and each tab's count follows the search. The list region holds its height, so filtering never lifts the foot; a search with no results shows an Empty state with a Clear search button. The foot says "Showing 4 of 9 for 'invoice'", clears the finished tasks with a one-line Undo, and an add field with the Shine Button finishes the frame. Press the / key while focus is inside the block to jump to the search. Guides rule the bands. For task apps, inboxes and any list that grows past a screen.
FAQ
How does the search match?
It is a plain substring match on the title, with case and accents ignored, the same rule the highlight uses, so what is marked is what matched. It isn't fuzzy and it never uses a regular expression, so any character you type is taken literally.
What do the tab counts mean?
The number of tasks in that tab that match the current search. With an empty search they are the plain totals. They are computed from the task array, never typed.
How does the slash shortcut work?
A key handler on the block's frame focuses the search when you press / and focus isn't already in a text field. It listens on the block, not the window, so it can't collide with a page-wide shortcut.
Related
- Pro
A plain task list with an add field, checkboxes that count what is done, delete and Clear done, and a one-line Undo that puts removed tasks back where they were.
- Pro
A task list where finished tasks carry an Archive button, one header action archives them all with an Undo, and a closing Archive section restores tasks one at a time or all at once.
- Pro
Eighteen tasks on shared hairlines in two columns, with a Compact and Comfortable row switch that never moves the page, and an Add task button that opens a row in the first cell.
- Pro
A late-night task list that draws each check and runs a line through a finished title, with a soft glow on the row you are on and a rolling count of what is left.
- Pro
A priority backlog you reorder by dragging a grip or pressing Move up and Move down, with a live numbered Order list beside it and the new position announced after every move.
- Pro
A quiet task list with no row borders or counters: ticked tasks fold into a closed Done section, rows can be renamed in place, and one field at the foot adds a task.