Elastic Toggle

A preference switch whose track and thumb redistribute together and settle with an explicit On/Off state.

controls
elastic
jelly
switch
toggle
form
control

Notifications

Sounds

Quick usage

usage

import { ElasticToggle } from "@pinky-ui/components";

<ElasticToggle
  label="Reduced motion"
  onCheckedChange={setEnabled}
/>

Presets

Subtle

Almost no deformation.

stretch={0.2}

Soft

The default.

stretch={0.5}

Playful

Rubbery. Use once.

stretch={1}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add elastic-toggle

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled state. Omit to let the toggle own it.
defaultChecked	boolean	false	Initial state when uncontrolled.
onCheckedChange	(checked: boolean) => void	—	Called on every change.
label	string	—	Visible label. Without it, pass aria-label.
stretch	number	0.5	How much the thumb deforms while travelling, 0–1.
disabled	boolean	false	Disables the control.

Accessibility

role=switch with aria-checked — announced as on/off, not as a checkbox.
Operable with Space and Enter; the visible label toggles it too.
State is carried by position and colour, never by the animation alone.
Disabled state is conveyed to assistive technology and blocks interaction.

Reduced motion

With prefers-reduced-motion: reduce, the thumb moves instantly with no stretch. The control reads and behaves identically.

When to use

Settings and preference panels
Instant-effect options with no save step

When not to use

Anything needing a confirm step — use a checkbox and a submit
Destructive switches, where playfulness undercuts the weight of the action