Checkbox Filter

Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.

Category

24
18
9
12

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { FilterCheckbox } from "@/components/beste/component/filter-checkbox";

<FilterCheckbox
  label="Category"
  defaultValue={["sneakers"]}          // uncontrolled initial selection
  onChange={(value) => console.log("selected:", value)}
  options={[
    { label: "Sneakers", value: "sneakers", count: 24 },
    { label: "T-Shirts", value: "t-shirts", count: 18 },
  ]}
/>

// Controlled: pass `value` and keep it in your own state
<FilterCheckbox
  options={[{ label: "Sneakers", value: "sneakers" }]}
  value={["sneakers"]}
  onChange={(value) => console.log("selected:", value)}
/>

More Filter components

View all Filter

Size

Multiselect Filter

filter-multiselect

Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.

Category

Select Filter

filter-select

Single-select dropdown for long option lists that would crowd a sidebar. Supports a clear item, result counts, and a disabled state for dependent filters.

Category

42
24
10
8
38
12

Tree Filter

filter-tree

Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.

Fit

32
14
21

Radio Filter

filter-radio

Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.

Brand

Combobox Filter

filter-combobox

Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.

Size

Chips Filter

filter-chips

Multi-select button chips for compact option sets like sizes. Works controlled or uncontrolled.