Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/filter-radioNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
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 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterRadio } from "@/components/beste/component/filter-radio";
<FilterRadio
label="Fit"
className="w-56"
defaultValue="regular"
options={[{"label":"Regular","value":"regular","count":32},{"label":"Oversized","value":"oversized","count":14},{"label":"Slim","value":"slim","count":21}]}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Arrow keys | Move through the options. A radio group is one tab stop, so the arrows are how you get around inside it. |
|---|---|
| Space | Take the focused option. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Optional group heading rendered above the list |
options | FilterRadioOption[] | — | |
value | string | null | — | Controlled selection; omit to let the component manage its own state |
defaultValue | string | — | Initial selection when uncontrolled |
allowClear | boolean | — | Clicking the active option clears the selection (default true) |
onChange | (value: string | null) => void | — | |
className | string | — |
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.