shadcn.io is not affiliated with official shadcn/ui
Inline Filter Fields Form Block for Ark UI
An invoice archive with a search box, Category and Status selects and Apply and Reset on one line, removable chips for the applied filters and a list of twelve invoices that really filters.
Installation
Overview
Put a filter on one line and make it do something with this inline fields form for React with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. The first band is a search form: a search box, a Category select, a Status select, Apply and Reset on one line from the large width, two columns from the small one and one column on a phone. The fields keep what you type until Apply, so the list changes only when you ask. Each applied filter shows as a chip that takes itself off, and the count line reads "Showing 3 of 12 invoices". Under it twelve typed invoices sit in a scroll region of a held height, each with a client, a number, a category, a date, a status in a glyph and a word, and an amount. Filter to nothing and an empty state offers Reset without the panel changing height. It's built from the Select, Input, Button, Empty, Shine Button and Guides. For archives, admin lists, log views and any list with a short row of filters.
FAQ
Why filter on Apply and not as you type?
A filter row with selects and a search box changes three things at once, and a list that jumps on every key is hard to read. Apply commits the three together and Enter in the search box does the same, since it is a real form. If your list is cheap and short, call setApplied from the change handlers to make it live.
How do I filter my own data?
Replace INVOICES and the two collections, and change matchesOf, which is the only place a filter is applied. For a server list, send the applied filters as the request's query and show the rows and the total you get back.
How does it work with a keyboard and a screen reader?
The form is a search landmark, each control has a visible label, and Tab runs search, Category, Status, Apply and Reset. The chips are buttons named "Remove filter Category: Hosting". The count line is the one polite region, so each Apply announces how many invoices are showing. The list is a named region you can focus and scroll with the arrow keys.
How does it look on a phone?
The fields stack with Apply and Reset side by side under them. In the list each row folds into two lines, the client over its number, category and date, with the status under them and the amount at the end.