KQ-1640 · VETO/CHIPS

Veto Chips

A filter row where every value can be ignored, kept or ruled out: the first press keeps a chip as a check draws in on springs.flick, the second turns it over on a quick springs.snap flip to its muted, struck-through vetoed face and slides it into a separate Excluding row on springs.glide while the gap closes and the result count rolls, and a third flips it back and glides it home. Rows measure their chips once and gather what does not fit into a +N popover. The chips are one toolbar: arrows move, Space or Enter cycles, Shift+Space vetoes, Delete clears, and focus follows a chip to the row it lands in.

KQ-1640 · VETO/CHIPS

Work orders

15 of 48 work orders

keeping 1 · excluding 1 · 15 of 48 work orders

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/veto-chips

Props

chipStyle: "soft" | "outline" | "solid"; default "soft"; Chip finish: tinted fills, hairline outlines, or solid kept chips.
flipAxis: "x" | "y" | "none"; default "x"; How a chip turns over to its vetoed face: tumbling about its horizontal axis, turning about its vertical one, or a cross-fade.
tone: "danger" | "warn" | "ink"; default "danger"; The vetoed face's colour, muted: red, amber or ink.
groups: VetoGroup[]; default defaultVetoGroups; The groups of values (crews, materials, priorities) in bar order.
records: VetoRecord[]; default defaultVetoRecords; The records filtered, counted and listed; fields map a group id to a value id.
value / defaultValue: VetoValue; default defaultVetoValue; The include and exclude sets of group:value keys. Controlled or initial.
onChange: (value: VetoValue, change: VetoChange) => void; default —; Fires from the press or key that changed a chip, with both sets and the change.
onOpenRecord: (record: VetoRecord) => void; default —; A record row was opened.
showCounts: boolean; default true; Show each value's number of records in its chip.
listLimit: number; default 24; Most rows the list shows before "and N more".
status: "ready" | "loading" | "error"; default "ready"; Whether the filters and records have arrived: skeleton chips while loading, a retry when they failed.
onRetry: () => void; default —; Try again was pressed after a failed load.
title: string; default "Work orders"; The heading.
noun: { one: string; other: string }; default { one: "work order", other: "work orders" }; What one record is called in counts and announcements.
excludeLabel: string; default "Excluding"; The second row's label.
excludeShortLabel: string; default "Not"; Its short form, used when the rows stack.
label: string; default the title; The surface's accessible name.
disabled: boolean; default false; Read only: chips cannot change.
className: string; default —; Classes for the surface; give it a height and the list scrolls inside it.

Prop	Type	Default	Description
chipStyle	"soft" \| "outline" \| "solid"	"soft"	Chip finish: tinted fills, hairline outlines, or solid kept chips.
flipAxis	"x" \| "y" \| "none"	"x"	How a chip turns over to its vetoed face: tumbling about its horizontal axis, turning about its vertical one, or a cross-fade.
tone	"danger" \| "warn" \| "ink"	"danger"	The vetoed face's colour, muted: red, amber or ink.
groups	VetoGroup[]	defaultVetoGroups	The groups of values (crews, materials, priorities) in bar order.
records	VetoRecord[]	defaultVetoRecords	The records filtered, counted and listed; fields map a group id to a value id.
value / defaultValue	VetoValue	defaultVetoValue	The include and exclude sets of group:value keys. Controlled or initial.
onChange	(value: VetoValue, change: VetoChange) => void	—	Fires from the press or key that changed a chip, with both sets and the change.
onOpenRecord	(record: VetoRecord) => void	—	A record row was opened.
showCounts	boolean	true	Show each value's number of records in its chip.
listLimit	number	24	Most rows the list shows before "and N more".
status	"ready" \| "loading" \| "error"	"ready"	Whether the filters and records have arrived: skeleton chips while loading, a retry when they failed.
onRetry	() => void	—	Try again was pressed after a failed load.
title	string	"Work orders"	The heading.
noun	{ one: string; other: string }	{ one: "work order", other: "work orders" }	What one record is called in counts and announcements.
excludeLabel	string	"Excluding"	The second row's label.
excludeShortLabel	string	"Not"	Its short form, used when the rows stack.
label	string	the title	The surface's accessible name.
disabled	boolean	false	Read only: chips cannot change.
className	string	—	Classes for the surface; give it a height and the list scrolls inside it.