Toggle

How this works

A toggle has exactly one moving part on one axis, which makes it the clearest place in this library to feel what stiffness and damping actually do — there's no loading state or icon swap competing for your attention, just the thumb.

Spring stiffness

How quickly the thumb starts moving toward the new side once you click. Low stiffness (100) feels like it's wading through syrup; high stiffness (800) feels like it's already arrived before you've registered the click. The default, 500, is the system's 'snappy' preset — toggles are physically light objects, so per Rauno Freiberg's weight principle they get the fastest spring in the library.

Spring damping

How much the thumb resists overshooting past its target and wobbling before settling. Push it down to 10–15 and you'll see the thumb visibly fly past the edge and bounce back — that's exactly why the rest of this library keeps damping high (around 30). It's not that overshoot is impossible to build, it's that Linear-style interfaces deliberately choose not to use it for routine actions.

Track color duration

The track's color crossfade runs independently of the thumb's spring — it's a non-physical property (color isn't a position in space), so it stays duration-based rather than spring-based. At 0ms the color snaps instantly, which can feel disconnected from the thumb's motion; at 300ms it visibly lags behind the thumb arriving. 100ms is the default because it's fast enough to read as 'simultaneous' with the spring without competing for attention.

Why two different motion systems on one component

This is the core lesson of the toggle: physical motion (the thumb moving in space) uses a spring because it needs to respond naturally to interruption; non-physical change (a color swap) uses a fixed duration because there's no 'physics' to a color — it just needs to be fast and consistent.