shadcn.io is not affiliated with official shadcn/ui
Form examples · Patterns
Search Filter Form for React
A product search form with a query, a sort select, a price range, category checkboxes and an in-stock filter.
Filters for a product list: a search query, a sort order, a min and max price, categories and an in-stock toggle, all in one form. Every control is wired to React Hook Form by a Controller; the price range and categories are FieldSets with a FieldLegend, and the category checkboxes write one array of ids. Apply Filters submits the values and Reset puts every filter back. Use it beside product lists, search results or catalogs.
Preview
Installation
FAQ
Does the search box have to contain text?
No. query is a plain z.string() starting as "", so an empty search submits. The Input has type="search" and the placeholder "Search products...".
How does Sort By get its starting value?
From defaultValues: sortBy is relevance, so the trigger shows Relevance. The other options are Price: Low to High, Price: High to Low and Newest First.
What do blank min and max prices become?
undefined. Both are z.number().min(0).optional(), and each number Input passes undefined to field.onChange when empty and a number otherwise. A negative price fails with Zod's default message.
How does a category checkbox update the array?
Each box is checked when field.value includes its id. Checking it adds the id to a new array and unchecking filters it out, then field.onChange stores the result. The handler is onCheckedChange.
Related
- Search Input FormA search form with one search input that
- Form with CheckboxA form with three checkboxes and their
- Settings FormAn app settings form with language and
- Contact FormA contact form with name, email, a
- Simple Command MenuAn inline command menu with a search
- Checkout FormA checkout form with a contact email