shadcn.io is not affiliated with official shadcn/ui
Search Filter File Upload Block for React Aria
A file finder with a name search and four native filters (Type, Modified, Size, Owner) whose options carry counts, removable chips, a live result count and an empty state with Clear all.
Installation
Overview
Narrow a drive down without guessing, with this file search panel for React with React Aria. It is the finder of Lookwell, a small studio's drive: one search field and four Native Select filters (Type, Modified, Size and Owner) over a typed list of 24 files. Every option carries a count worked out from the search and the other three filters, such as "Spreadsheet (4)", so a choice never ends in a surprise empty list. Active filters and the search show as removable chips, a live line says "7 of 24 files match", and a search with no match shows an empty state with Clear all. On a phone the filters fold behind a "Filters (2)" button. Filtering is real and local, and the result list is a held scroll region, so the panel keeps its height. The panel is ruled by Guides. It is built from Input, Native Select, Button and Guides, with a CSS entrance only. For drives, asset libraries and any app with more files than a page can show.
FAQ
How are the counts in the options worked out?
For each option, the block filters the typed list by the search and by the other three filters, and counts the files that also pass that option. Choosing "Spreadsheet" with an Owner already set therefore shows only that owner's spreadsheets. The first option in each select shows the count with that filter off.
What are the chips for?
Each active filter and the search term is a button chip that removes it, named "Remove filter Type: Spreadsheet". The chip row holds its height and scrolls sideways when it is full, so adding a filter never moves the list. Clear all in the foot resets everything.
What happens on a phone?
The four selects sit behind a "Filters (2)" button with the number of active filters, and unfold in place; the chips and the count stay visible. From the medium width up the selects are in the band under the search.
What does a screen reader hear?
A polite status line says how many files match. After typing it waits about half a second so it does not speak every letter; after a filter or a chip it speaks at once. The count above the list is not read as a second announcement.