Inputs

Elastic toggle switch

A pill toggle whose round thumb squashes into a blob while pressed and springs back to round with a soft bounce, sliding between a neutral off state and a solid accent fill.

Airplane mode

Wi-Fi

Using Elastic toggle switch

A pill toggle whose round thumb squashes into a blob while pressed and springs back to round with a soft bounce, sliding between a neutral off state and a solid accent fill.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: label, on, accent, size

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2759Bounce drop toggleInputsA tall vertical toggle switch whose ball drops to the bottom with a bouncy settle when switched off and glides back up with a tight spring when switched on.

2771Layout toggle switchInputsA switch whose knob crosses the track by animating an actual layout change rather than a translate, so the throw stays exact at any track width.

2781Spring layout toggleInputsA switch whose knob is aligned to one end of the track by layout alone and springs between the two measured positions whenever the state flips.

1980Icon crossfade switchInputsA toggle switch whose thumb icon fades and scales into a different icon as the switch flips between off and on.

2808Latching square toggleInputsA compact square icon button that latches between a faint outlined off state and a solid accent-filled pressed state.

2017Settings Toggle RowInputsA labeled settings row ending in an on off switch whose thumb stretches under a press and springs back when it settles.