Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { FilterRadio } from "@/components/beste/component/filter-radio";
<FilterRadio
label="Fit"
defaultValue="regular"
onChange={(value) => console.log("selected:", value)} // null when cleared
options={[
{ label: "Regular", value: "regular", count: 32 },
{ label: "Oversized", value: "oversized", count: 14 },
]}
/>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.
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.
Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.