Filter

A comprehensive filtering system with 17 different input types. Built with compound component pattern for maximum flexibility and composability.

Install Dependencies

npx quickcode-ui add Filter

pnpm dlx quickcode-ui add Filter

yarn dlx quickcode-ui add Filter

bunx quickcode-ui add Filter

Example

Complete Filter with All Components

Product Filters

All filter types in one place

Price Filters

Minimum Price

Description

Product Description

Stock Status

In Stock Only

Tags

Keywords

Search Keywords

You can add 10 more items.

Discount

Minimum Discount0%

Price Range

Minimum Range$0 - $5000

Release Date

After Date

Promotion Period

Promotion Dates

import { Filter } from "@/components/ui/Filter";
import { CheckboxGroup } from "@/components/ui/CheckboxGroup";
import { RadioGroupItem } from "@/components/ui/RadioGroup";
import { SelectItem } from "@/components/ui/Select";
import { MultiSelectItem } from "@/components/ui/MultiSelect";
import { Label } from "@/components/ui/Label";

export const ComprehensiveFilterExample = () => {
  const [searchQuery, setSearchQuery] = React.useState("");
  const [minPrice, setMinPrice] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [inStock, setInStock] = React.useState(false);
  const [categories, setCategories] = React.useState<string[]>([]);
  const [sortBy, setSortBy] = React.useState("");
  const [freeShipping, setFreeShipping] = React.useState(false);
  const [brand, setBrand] = React.useState("");
  const [tags, setTags] = React.useState<string[]>([]);
  const [keywords, setKeywords] = React.useState<string[]>([]);
  const [discount, setDiscount] = React.useState(0);
  const [priceRange, setPriceRange] = React.useState<[number, number]>([0, 5000]);
  const [releaseDate, setReleaseDate] = React.useState<Date | null>(null);
   interface DateRange {
    start: Date | null;
    end: Date | null;
  }

  const [promotionPeriod, setPromotionPeriod] = React.useState<DateRange>({
    start: null,
    end: null,
  });

  const handleClear = () => {
    setSearchQuery("");
    setMinPrice("");
    setDescription("");
    setInStock(false);
    setCategories([]);
    setSortBy("");
    setFreeShipping(false);
    setBrand("");
    setTags([]);
    setKeywords([]);
    setDiscount(0);
    setPriceRange([0, 5000]);
    setReleaseDate(null);
    setPromotionPeriod({ start: null, end: null });
  };

  const handleApply = () => {
    const filterData = {
      search: searchQuery,
      minPrice,
      description,
      inStock,
      categories,
      sortBy,
      freeShipping,
      brand,
      tags,
      keywords,
      discount,
      priceRange,
      releaseDate,
      promotionPeriod,
    };
    console.log("Applied filters:", filterData);
  };

  return (
     <div className="w-full max-w-2xl mx-auto p-6 border border-border rounded-lg bg-card">
        <Filter onClear={handleClear} onApply={handleApply}>
          <Filter.Header
            title="Product Filters"
            description="All filter types in one place"
          />

          <Filter.Search
            value={searchQuery}
            onChange={setSearchQuery}
            placeholder="Search products..."
          />

          <Filter.Separator />

          <Filter.Group title="Price Filters" collapsible>
            <Filter.Input
              label="Minimum Price"
              value={minPrice}
              onChange={setMinPrice}
              placeholder="Enter min price"
              type="number"
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Description">
            <Filter.Textarea
              label="Product Description"
              value={description}
              onChange={setDescription}
              placeholder="Enter description keywords..."
              rows={3}
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Stock Status">
            <Filter.Checkbox
              id="in-stock"
              checked={inStock}
              onChange={setInStock}
              label="In Stock Only"
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Categories" collapsible>
            <Filter.CheckboxGroup
              value={categories}
              onValueChange={setCategories}
            >
              <CheckboxGroup.Item value="Electronics" label="Electronics" />
              <CheckboxGroup.Item value="Clothing" label="Clothing" />
              <CheckboxGroup.Item value="Home & Garden" label="Home & Garden" />
              <CheckboxGroup.Item value="Sports" label="Sports" />
            </Filter.CheckboxGroup>
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Sort By">
            <Filter.RadioGroup value={sortBy} onValueChange={setSortBy}>
              <div className="flex items-center gap-3">
                <RadioGroupItem value="price-low" id="sort-1" />
                <Label htmlFor="sort-1">Price: Low to High</Label>
              </div>
              <div className="flex items-center gap-3">
                <RadioGroupItem value="price-high" id="sort-2" />
                <Label htmlFor="sort-2">Price: High to Low</Label>
              </div>
              <div className="flex items-center gap-3">
                <RadioGroupItem value="newest" id="sort-3" />
                <Label htmlFor="sort-3">Newest First</Label>
              </div>
            </Filter.RadioGroup>
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Shipping Options">
            <Filter.Switch
              id="free-shipping"
              checked={freeShipping}
              onCheckedChange={setFreeShipping}
              label="Free Shipping"
              description="Show only items with free shipping"
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Brand">
            <Filter.Select
              value={brand}
              onValueChange={setBrand}
              placeholder="Select brand"
            >
              <SelectItem value="Apple">Apple</SelectItem>
              <SelectItem value="Samsung">Samsung</SelectItem>
              <SelectItem value="Sony">Sony</SelectItem>
              <SelectItem value="Nike">Nike</SelectItem>
            </Filter.Select>
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Tags">
            <Filter.MultiSelect
              values={tags}
              onValuesChange={setTags}
              placeholder="Select tags"
            >
              <MultiSelectItem value="New Arrival">New Arrival</MultiSelectItem>
              <MultiSelectItem value="Best Seller">Best Seller</MultiSelectItem>
              <MultiSelectItem value="Trending">Trending</MultiSelectItem>
              <MultiSelectItem value="Sale">Sale</MultiSelectItem>
            </Filter.MultiSelect>
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Keywords">
            <Filter.MultiInput
              label="Search Keywords"
              value={keywords}
              onChange={setKeywords}
              placeholder="Add keywords..."
              max={10}
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Discount">
            <Filter.Slider
              label="Minimum Discount"
              defaultValue={0}
              value={discount}
              onChange={setDiscount}
              min={0}
              max={100}
              step={5}
               formatValue={(v) => `${v}%`}
         
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Price Range">
            <Filter.Range
              label="Minimum Range"
              defaultValue={[0, 5000]}
              value={priceRange}
              onChange={setPriceRange}
              min={0}
              max={5000}
              step={100}
              formatValue={(v) => `${v}%`}
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Release Date">
            <Filter.Date
              label="After Date"
              value={releaseDate}
              onChange={setReleaseDate}
              placeholder="Select release date"
            />
          </Filter.Group>

          <Filter.Separator />

          <Filter.Group title="Promotion Period">
            <Filter.DateRange
              label="Promotion Dates"
              value={promotionPeriod}
              onChange={setPromotionPeriod}
              placeholder="Select date range"
            />
          </Filter.Group>

          <Filter.Actions />
        </Filter>
      </div>
  );
};

Props

Filter

Prop	Type	Default	Description
`onClear`	`() => void`	`undefined`	Callback when clear filters button is clicked
`onApply`	`() => void`	`undefined`	Callback when apply filters button is clicked
`className`	`string`	`undefined`	Additional CSS classes
`children`	`React.ReactNode`	—	Filter components to render

Filter.Header

Prop	Type	Default	Description
`title`	`string`	`"Filters"`	Header title text
`description`	`string`	`undefined`	Optional description below title
`showCount`	`boolean`	`true`	Show active filter count badge
`className`	`string`	`undefined`	Additional CSS classes

Filter.Search

Prop	Type	Default	Description
`value`	`string`	`undefined`	Controlled search value
`onChange`	`(value: string) => void`	`undefined`	Search change handler
`placeholder`	`string`	`"Search..."`	Input placeholder text
`className`	`string`	`undefined`	Additional CSS classes

Filter.Group

Prop	Type	Default	Description
`title`	`string`	`undefined`	Group title
`collapsible`	`boolean`	`false`	Enable collapse/expand functionality
`defaultCollapsed`	`boolean`	`false`	Initial collapsed state
`className`	`string`	`undefined`	Additional CSS classes
`children`	`React.ReactNode`	—	Group content

Filter.Input

Prop	Type	Default	Description
`value`	`string`	`undefined`	Input value
`onChange`	`(value: string) => void`	`undefined`	Change handler
`placeholder`	`string`	`undefined`	Placeholder text
`label`	`string`	`undefined`	Input label
`type`	`string`	`"text"`	Input type
`className`	`string`	`undefined`	Additional CSS classes

Filter.Textarea

Prop	Type	Default	Description
`value`	`string`	`undefined`	Textarea value
`onChange`	`(value: string) => void`	`undefined`	Change handler
`placeholder`	`string`	`undefined`	Placeholder text
`label`	`string`	`undefined`	Textarea label
`rows`	`number`	`3`	Number of rows
`className`	`string`	`undefined`	Additional CSS classes

Filter.Checkbox

Prop	Type	Default	Description
`checked`	`boolean`	`undefined`	Checkbox checked state
`onChange`	`(checked: boolean) => void`	`undefined`	Change handler
`label`	`string`	`undefined`	Checkbox label
`id`	`string`	—	Unique identifier
`className`	`string`	`undefined`	Additional CSS classes

Filter.CheckboxGroup

Prop	Type	Default	Description
`value`	`string[]`	`undefined`	Selected checkbox values
`onValueChange`	`(value: string[]) => void`	`undefined`	Change handler
`label`	`string`	`undefined`	Group label
`className`	`string`	`undefined`	Additional CSS classes
`children`	`React.ReactNode`	—	CheckboxGroup.Item components

Filter.RadioGroup

Prop	Type	Default	Description
`value`	`string`	`undefined`	Selected radio value
`onValueChange`	`(value: string) => void`	`undefined`	Change handler
`label`	`string`	`undefined`	Group label
`className`	`string`	`undefined`	Additional CSS classes
`children`	`React.ReactNode`	—	RadioGroupItem components

Filter.Switch

Prop	Type	Default	Description
`checked`	`boolean`	`undefined`	Switch checked state
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	Change handler
`label`	`string`	`undefined`	Switch label
`description`	`string`	`undefined`	Helper text
`id`	`string`	—	Unique identifier
`className`	`string`	`undefined`	Additional CSS classes

Filter.Select

Prop	Type	Default	Description
`value`	`string`	`undefined`	Selected value
`onValueChange`	`(value: string) => void`	`undefined`	Change handler
`placeholder`	`string`	`"Select option"`	Placeholder text
`label`	`string`	`undefined`	Input label
`className`	`string`	`undefined`	Additional CSS classes
`children`	`React.ReactNode`	—	SelectItem components

Filter.MultiSelect

Prop	Type	Default	Description
`values`	`string[]`	`undefined`	Selected values
`onValuesChange`	`(values: string[]) => void`	`undefined`	Change handler
`placeholder`	`string`	`"Select options"`	Placeholder text
`label`	`string`	`undefined`	Input label
`className`	`string`	`undefined`	Additional CSS classes
`children`	`React.ReactNode`	—	MultiSelectItem components

Filter.MultiInput

Prop	Type	Default	Description
`value`	`string[]`	`undefined`	Input values
`onChange`	`(values: string[]) => void`	`undefined`	Change handler
`label`	`string`	`undefined`	Input label
`placeholder`	`string`	`undefined`	Placeholder text
`max`	`number`	`undefined`	Maximum number of items
`className`	`string`	`undefined`	Additional CSS classes

Filter.Slider

Prop	Type	Default	Description
`value`	`number`	`undefined`	Slider value
`onChange`	`(value: number) => void`	`undefined`	Change handler
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`label`	`string`	`undefined`	Slider label
`showValue`	`boolean`	`true`	Display current value
`formatValue`	`(value: number) => string`	`(v) => v.toString()`	Format value display
`className`	`string`	`undefined`	Additional CSS classes

Filter.Range

Prop	Type	Default	Description
`value`	`[number, number]`	`undefined`	Range values [min, max]
`onChange`	`(value: [number, number]) => void`	`undefined`	Change handler
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`label`	`string`	`undefined`	Range label
`showValues`	`boolean`	`true`	Display current values
`formatValue`	`(value: number) => string`	`(v) => v.toString()`	Format value display
`className`	`string`	`undefined`	Additional CSS classes

Filter.Date

Prop	Type	Default	Description
`value`	`Date \| null`	`undefined`	Selected date
`onChange`	`(date: Date \| null) => void`	`undefined`	Change handler
`label`	`string`	`undefined`	Input label
`placeholder`	`string`	`"Select date"`	Placeholder text
`includeTime`	`boolean`	`false`	Include time picker
`className`	`string`	`undefined`	Additional CSS classes

Filter.DateRange

Prop	Type	Default	Description
`value`	`DateRange`	`undefined`	Selected date range
`onChange`	`(range: DateRange) => void`	`undefined`	Change handler
`label`	`string`	`undefined`	Input label
`placeholder`	`string`	`"Select date range"`	Placeholder text
`className`	`string`	`undefined`	Additional CSS classes

Filter.Actions

Prop	Type	Default	Description
`showClear`	`boolean`	`true`	Show clear button
`showApply`	`boolean`	`true`	Show apply button
`clearLabel`	`string`	`"Clear Filters"`	Clear button text
`applyLabel`	`string`	`"Apply Filters"`	Apply button text
`className`	`string`	`undefined`	Additional CSS classes
`showCountOnClear`	`boolean`	`false`	Show active filter count badge on clear button
`showCountOnApply`	`boolean`	`false`	Show active filter count badge on apply button

Filter.Separator

Renders a horizontal separator line. Accepts all standard div props including className.