Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.
The import and the props worth knowing about, in one place.
import { FilterRating } from "@/components/beste/component/filter-rating";
<FilterRating
label="Rating"
defaultValue="4"
onChange={(value) => console.log("minimum rating:", value)} // null when cleared
options={[
{ label: "4 & up", value: "4" },
{ label: "3 & up", value: "3" },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterRating } from "@/components/beste/component/filter-rating";
<FilterRating
label="Rating"
className="w-56"
defaultValue="4"
options={[{"label":"4 & up","value":"4"},{"label":"3 & up","value":"3"},{"label":"2 & up","value":"2"}]}
/>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 rows |
options | FilterRatingOption[] | — | |
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 row clears the selection (default true) |
onChange | (value: string | null) => void | — | |
className | string | — |
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment 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.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.