Inputs

Sliding Thumb Switch

An on/off switch built from a hidden checkbox: a pill track that recolors and a round thumb that slides to the opposite edge.

Wi-Fi

Auto-sync

Using Sliding Thumb Switch

An on/off switch built from a hidden checkbox: a pill track that recolors and a round thumb that slides to the opposite edge.

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: checked, accentColor, disabled

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 code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2802Settings toggle switchInputsA small pill on/off switch with a sliding knob that flips a single setting, its track going from muted to a solid accent while the knob stretches like elastic if pressed mid-slide.

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.

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.

2343Drawn check checkboxInputsA checkbox whose check mark draws itself stroke by stroke as the box fills with a solid accent color.

1954Elastic toggle switchInputsA 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.

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