KQ-1137 · BRUSH/SELECT

Brush Select

Filter chips you select by painting: a click toggles one chip, but press on a chip and drag and the press becomes a brush — the first chip flips, and every chip the stroke passes takes its new state (or flips, in toggle mode), once per stroke. The paint wipes across each chip from the side the brush came in on an enter tween, each chip dips under the bristles on an impulse given to the snap spring, and its check draws on the flick; the stroke reports once, on release. Space toggles the focused chip, Shift+Arrow carries its state onto the next chip with the same wipe and tick, and Shift+Home/End or Cmd/Ctrl+A paint a whole run on one staggered beat.

KQ-1137 · BRUSH/SELECT

Fieldline Topics for your digest

3 / 12

3 of 12 topics · tap a topic or paint across

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/brush-select

Props

items: BrushSelectItem[]; default —; The chips, in order: id and label.
label: string; default —; The chip set's accessible name.
value / defaultValue: string[]; default []; The selected ids, controlled or uncontrolled. During a stroke the chips show its draft; a controlled set then shows the host's answer.
onValueChange: (value: string[]) => void; default —; Fires once on the release of a stroke, on a tap and on each key, with the new selection in item order.
mode: "set" | "toggle"; default "set"; Paint the first chip's new state onto every chip the stroke passes, or flip each one.
layout: "wrap" | "grid"; default "wrap"; Pills of their natural width in wrapping rows, or equal rounded cells in a grid.
check: boolean; default true; A round indicator on every chip that fills and draws a check when the chip turns on. Off, colour alone carries the state.
sound: boolean; default false; A tick per chip the brush passes, climbing a pentatonic scale through the stroke (falling when the paint takes chips off). Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the chips and blocks taps, strokes and keys that change them; arrow keys still move focus.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
items	BrushSelectItem[]	—	The chips, in order: id and label.
label	string	—	The chip set's accessible name.
value / defaultValue	string[]	[]	The selected ids, controlled or uncontrolled. During a stroke the chips show its draft; a controlled set then shows the host's answer.
onValueChange	(value: string[]) => void	—	Fires once on the release of a stroke, on a tap and on each key, with the new selection in item order.
mode	"set" \| "toggle"	"set"	Paint the first chip's new state onto every chip the stroke passes, or flip each one.
layout	"wrap" \| "grid"	"wrap"	Pills of their natural width in wrapping rows, or equal rounded cells in a grid.
check	boolean	true	A round indicator on every chip that fills and draws a check when the chip turns on. Off, colour alone carries the state.
sound	boolean	false	A tick per chip the brush passes, climbing a pentatonic scale through the stroke (falling when the paint takes chips off). Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the chips and blocks taps, strokes and keys that change them; arrow keys still move focus.
className	string	—	Merged onto the root's classes.