Multi-select color circles for color filtering. Each option paints its own CSS color and stays accessible via screen-reader labels.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/filter-swatchNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { FilterSwatch } from "@/components/beste/component/filter-swatch";
<FilterSwatch
label="Color"
defaultValue={["black"]}
onChange={(value) => console.log("selected:", value)}
options={[
{ label: "Black", value: "black", swatch: "#18181b" },
{ label: "Blue", value: "blue", swatch: "#2563eb" },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterSwatch } from "@/components/beste/component/filter-swatch";
<FilterSwatch
label="Color"
defaultValue={["black"]}
options={[{"label":"Black","value":"black","swatch":"#18181b"},{"label":"White","value":"white","swatch":"#fafafa"},{"label":"Blue","value":"blue","swatch":"#2563eb"},{"label":"Red","value":"red","swatch":"#dc2626"},{"label":"Green","value":"green","swatch":"#16a34a"}]}
/>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.
| Tab | Move between the boxes — each is its own control, not one list with an inner cursor. |
|---|---|
| Space | Tick or untick the focused one. |
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 swatches |
options | FilterSwatchOption[] | — | |
value | string[] | — | Controlled selection; omit to let the component manage its own state |
defaultValue | string[] | — | Initial selection when uncontrolled |
onChange | (value: string[]) => void | — | |
className | string | — |
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 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.