Rhetoric-ds

Filter

Combines dropdowns and checkboxes to refine displayed data or search results.

Code

Installation

npx shadcn@latest add dropdown-menu checkbox

Select Filter

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" const [category, setCategory] = useState("") <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Select Category</Button> </DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuItem onClick={() => setCategory("Electronics")}> Electronics </DropdownMenuItem> <DropdownMenuItem onClick={() => setCategory("Clothing")}> Clothing </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu>

Multi-Select Filter

import { Checkbox } from "@/components/ui/checkbox" const [selectedBrands, setSelectedBrands] = useState<string[]>([]) <DropdownMenuContent> <DropdownMenuLabel>Brands</DropdownMenuLabel> <DropdownMenuSeparator /> <div className="p-2 space-y-2"> {brands.map((brand) => ( <div key={brand.id} className="flex items-center space-x-2"> <Checkbox checked={selectedBrands.includes(brand.id)} onCheckedChange={() => toggleBrand(brand.id)} /> <label>{brand.label}</label> </div> ))} </div> </DropdownMenuContent>

Reference

Multi-Select Filter

Usage Guidelines

When to Use

Use filter components to help users narrow down and find specific content. Single-select dropdowns work well for categories and sorting. Multi-select filters with checkboxes are ideal for tags, brands, and attributes.

Combine multiple filters to create powerful search and discovery experiences. Show active filters as badges and provide a clear way to reset filters.

Best Practices

  • Show active filter count in the trigger button
  • Display selected filters as badges for easy removal
  • Provide a "Clear all" option for multiple filters
  • Use checkboxes for multi-select, dropdowns for single-select
  • Group related filters together

Accessibility

Ensure filter labels are clear and descriptive. For checkbox filters, properly associate labels with checkboxes using htmlFor attributes. Filter controls should be keyboard accessible and provide clear feedback about selected state.

Show active filters clearly and provide easy ways to remove them. Consider using ARIA labels to indicate the number of results or active filters for screen reader users.