KQ-1097 · GEL/SWITCH

Gel Switch

A switch whose knob is a drop of gel. Pressed, the droplet reaches toward its new side while the rest holds back, a neck forms and pinches, and the tail lets go and catches up; it lands with a jiggle and the track fills with liquid behind it. It can be dragged 1:1, rubber-bands past either end, and a thrown release commits to the side it was heading for.

KQ-1097 · GEL/SWITCH

Round-ups

Spare change from card payments goes to Savings.

round-ups on · every card payment

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/gel-switch

Props

checked / defaultChecked: boolean; default false; Controlled or initial on/off state.
onCheckedChange: (checked: boolean) => void; default —; Fires from the press, key or drag that changed it, with the new state.
label: string; default —; What the switch controls: its accessible name, and shown beside it unless hideLabel.
hideLabel: boolean; default false; Keep the label for assistive technology only.
viscosity: number; default 0.5; How thick the gel is, 0 to 1: runny gel is quick and splashy, thick gel slow and composed.
stretch: number; default 0.6; How far the droplet reaches toward its new side before the rest of it follows, 0 to 1.
wobble: number; default 0.5; How much the droplet jiggles when it lands, 0 to 1.
fill: boolean; default true; Fill the track with liquid behind the droplet while on.
size: "sm" | "md" | "lg"; default "md"; The switch's size; the droplet's sounds pitch with it.
sound: boolean; default false; Play the droplet's synthesised sounds. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Disables the switch and dims its label.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
checked / defaultChecked	boolean	false	Controlled or initial on/off state.
onCheckedChange	(checked: boolean) => void	—	Fires from the press, key or drag that changed it, with the new state.
label	string	—	What the switch controls: its accessible name, and shown beside it unless hideLabel.
hideLabel	boolean	false	Keep the label for assistive technology only.
viscosity	number	0.5	How thick the gel is, 0 to 1: runny gel is quick and splashy, thick gel slow and composed.
stretch	number	0.6	How far the droplet reaches toward its new side before the rest of it follows, 0 to 1.
wobble	number	0.5	How much the droplet jiggles when it lands, 0 to 1.
fill	boolean	true	Fill the track with liquid behind the droplet while on.
size	"sm" \| "md" \| "lg"	"md"	The switch's size; the droplet's sounds pitch with it.
sound	boolean	false	Play the droplet's synthesised sounds. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Disables the switch and dims its label.
className	string	—	Merged onto the root element's classes.