Loading…

Liquid Toggle

beta

A switch whose knob squashes like a droplet as it travels, and can be dragged across.

Forms
1 file
3 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add liquid-toggle

npm packages installed: class-variance-authority, motion, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { LiquidToggle } from "@/components/ui/liquid-toggle";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery

API

Generated from the component's own types, so a prop cannot appear here without existing.

<LiquidToggle>

Prop	Type	Default
`size`	`"sm" \| "md"`	`"md"`
`speed` Spring stiffness, 0–100: how quickly the knob crosses.	`number`	`50`
`stretch` Velocity squash and stretch, 0–100. 0 keeps the knob a rigid circle.	`number`	`36`
`stroke`	`boolean`	—

Every prop of Radix UI’s Switch.Root, plus className.

Accessibility

Built on the Radix switch primitive: role="switch" with aria-checked, toggled by click, Space or Enter, with a visible focus ring (missing in the source) and a hidden input inside forms. It has no visible label, so name it with aria-label or a <label>. Dragging the knob is a pointer convenience; releasing a drag never also counts as a click. Under reduced motion the knob jumps and never deforms.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes