shadcn.io is an independent project built on shadcn/ui
The title is Search & Filter. A Search field comes first, then Categories with Category 1, Category 2, and Category 3. Apply Filters sits at the bottom.
Use it when filters should not push the results down the page. Keep one or two on the page as a Checkbox if people use them every time. In Solid, Ark UI does not filter the list.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger asChild={props => <Button {...props()} variant="outline">Filters</Button>} />
<SheetContent>
<SheetHeader>
<SheetTitle>Search &FAQ
How is the search field set up?
It's an input with type="search" and the label Search, in a Field. Browsers add a clear button to search inputs, and phones show a search key.
How are the categories grouped?
In a FieldSet whose FieldLegend reads Categories. Each category is a horizontal Field with the checkbox first and its label after, so clicking the label toggles the box.
Does Apply Filters filter anything?
Not yet: the checkboxes are uncontrolled and the button has no handler. Read the values when it's pressed, apply them to your list, and close the sheet.
How do I close the sheet after applying?
Control the open state and set it to false in the Apply handler:
Pass open to Sheet and read details.open in onOpenChange.
API Reference
Sheet
Sets asChild and props. The rest is on the Sheet page.
Button
Sets props and variant="outline". The rest is on the Button page.
