KQ-1502 · GOO/RADIO

Goo Radio

A radio group whose selected marker is a drop of goo: choosing another option pulls it out of its ring, the head leading on its own spring and the tail following on a softer one with a metaball neck between them, while a remnant left in the old ring necks, thins and splits off before shrinking back on springs.flick. The head lands nearly critically damped, wobbles on an underdamped jiggle whose liveliness is the viscosity, and the new ring swells on flick and settles on springs.recoil as it takes the colour. Arrow keys move the selection with the same flow, Home and End jump, Space chooses, and the drop can be dragged along the rail and thrown to an option.

KQ-1502 · GOO/RADIO

Coldbrook house blend

Roast · 340 g

roast medium · cocoa, round

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/goo-radio

Props

options: { value: string; label: string; description?: string; disabled?: boolean }[]; default —; The options in rail order; disabled ones are shown, aria-disabled and skipped by the arrow keys.
value / defaultValue: string; default — / none; The chosen option's value, controlled or uncontrolled. Nothing is chosen when both are left out, as with native radios.
onValueChange: (value: string) => void; default —; Fires from the press, drag or key that chose an option.
label: string; default —; The group's accessible name.
name: string; default —; A form field name: adds a hidden input carrying the value.
orientation: "horizontal" | "vertical"; default "horizontal"; Rings in a row with labels under them, or in a column with labels beside them.
viscosity: number; default 0.5; How thick the goo is, 0 to 1: runny goo is quick with a lively landing wobble, thick goo slow and composed.
neck: number; default 0.5; How far the neck reaches before it splits, 0 to 1: a short snap or a long string of goo. Also how long the travelling drop may stretch.
squash: number; default 0.5; How much the drop squashes across its travel and wobbles on landing, 0 to 1.
size: "sm" | "md" | "lg"; default "md"; Ring and drop size and the type beside them; a narrow group steps its type down one size instead of truncating.
color: "cobalt" | "signal" | "ember" | "rose" | string; default "cobalt"; The drop's pigment, the seated ring and the wet streak: a preset tuned for both themes or any CSS colour.
ringColor: string; default "var(--hairline-strong)"; The rings and the rail at rest; any CSS colour.
rail: boolean; default true; Draw the rail the drop flows along.
sound: boolean; default false; Play a blup as the neck splits and a softer, higher one as the drop lands; only for the visitor's own presses, drags and keys.
disabled: boolean; default false; Disables every option.
className: string; default —; Classes for the radiogroup box.

Prop	Type	Default	Description
options	{ value: string; label: string; description?: string; disabled?: boolean }[]	—	The options in rail order; disabled ones are shown, aria-disabled and skipped by the arrow keys.
value / defaultValue	string	— / none	The chosen option's value, controlled or uncontrolled. Nothing is chosen when both are left out, as with native radios.
onValueChange	(value: string) => void	—	Fires from the press, drag or key that chose an option.
label	string	—	The group's accessible name.
name	string	—	A form field name: adds a hidden input carrying the value.
orientation	"horizontal" \| "vertical"	"horizontal"	Rings in a row with labels under them, or in a column with labels beside them.
viscosity	number	0.5	How thick the goo is, 0 to 1: runny goo is quick with a lively landing wobble, thick goo slow and composed.
neck	number	0.5	How far the neck reaches before it splits, 0 to 1: a short snap or a long string of goo. Also how long the travelling drop may stretch.
squash	number	0.5	How much the drop squashes across its travel and wobbles on landing, 0 to 1.
size	"sm" \| "md" \| "lg"	"md"	Ring and drop size and the type beside them; a narrow group steps its type down one size instead of truncating.
color	"cobalt" \| "signal" \| "ember" \| "rose" \| string	"cobalt"	The drop's pigment, the seated ring and the wet streak: a preset tuned for both themes or any CSS colour.
ringColor	string	"var(--hairline-strong)"	The rings and the rail at rest; any CSS colour.
rail	boolean	true	Draw the rail the drop flows along.
sound	boolean	false	Play a blup as the neck splits and a softer, higher one as the drop lands; only for the visitor's own presses, drags and keys.
disabled	boolean	false	Disables every option.
className	string	—	Classes for the radiogroup box.