Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { FilterSegmented } from "@/components/beste/component/filter-segmented";
<FilterSegmented
label="Gender"
defaultValue="women"
onChange={(value) => console.log("selected:", value)} // null when cleared
options={[
{ label: "Women", value: "women" },
{ label: "Men", value: "men" },
{ label: "Kids", value: "kids" },
]}
/>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 radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Multi-select button chips for compact option sets like sizes. Works controlled or uncontrolled.
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.