shadcn.io is not affiliated with official shadcn/ui
Search and Filter Task List Block for Solid
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 Solid with Ark 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.