Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
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 },
]}
/>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 | — |