Nobody notices the switch. Everybody feels it.

There is a switch in the settings of almost every app you use. You have flicked thousands of them, and you cannot remember a single one.

That is rather the point of a switch. It should do its job and get out of the way. But there is a gap between a switch that works and a switch that feels good to use, and a surprising amount of a brand lives in that gap. Nobody will ever write in to praise your toggle. They will, without quite knowing why, trust the product a little more.

So let’s give the plainest control on a screen far more attention than it deserves, and build it up a layer at a time. Every example below is live, so use them as you read.

One bit of information

A checkbox and a switch do the same job: one bit, on or off. The switch earns its place because it reads as a physical object, a small lever with a direction. That is why Apple’s guidance keeps switches for settings that take effect straight away, and why the Nielsen Norman Group warns against using them for choices people confirm later with a button.

At this point ours is accurate and inert. Touch it and the state flips, with nothing in between.

Name the pieces first

Design conversations go faster with a shared vocabulary, and a switch only needs three words. The knob is the thing in motion. The track holds it, and its colour reports the state. The travel is how far the knob moves from one end to the other, and it matters more than it looks: every speed, stretch and timing choice later on is really a fraction of that distance.

Stop teleporting

The first upgrade costs almost nothing. Let the knob cover the distance instead of reappearing at the far end, and the eye starts reading it as a thing that moved rather than a value that changed.

Keep it short. Roughly 150 to 250 milliseconds feels immediate. Go much past that and the interface seems to hesitate. Push the duration up and notice where it stops feeling quick and starts feeling slow.

Two ways to stretch

Soft objects change shape when they move fast. Cartoon animators formalised this as squash and stretch in the 1930s, and a small dose of it gives a knob a sense of mass.

The quick way to get it is a horizontal scale transform. It’s one line of code, and it distorts the curved ends, so the circle turns into an egg. The better way is to animate the knob’s actual width, which keeps the ends as true semicircles while the middle lengthens. At normal speed the difference is subliminal. Slowed down, it’s obvious, and you will start spotting the egg everywhere.

Swap the stopwatch for a spring

A duration plus an easing curve is a script: start here, finish there, in exactly this long. A spring is a set of physical properties instead, stiffness and friction, and the motion falls out of them. You no longer choose when it finishes. It comes to rest when the forces balance, and it reacts naturally if it’s interrupted halfway. Josh Comeau’s introduction to spring physics is the clearest explanation I know of why this feels more natural.

The chart traces where the knob is over time, against a standard ease-out in dashes. Lower the damping and the spring carries past its target. A knob can’t leave its track, so we spend that extra energy compressing it against the end instead. Too much and it’s a bouncy castle. The craft is stopping just short of that.

Wait for the let-go

This is the refinement I’d defend hardest, and the one fewest people will ever register.

A typical switch commits on contact. This one tips a little towards its new position while your finger is down, then completes the move when you lift. Drag away before lifting and it quietly returns. It’s how a real rocker switch works, with a small give before the click, and it’s also more forgiving, because the decision isn’t final until you let go.

A switch that waits for you to let go is a switch that trusts you to change your mind.

Tune it yourself

Below is the complete switch with every setting on a slider. Start from a tuning, adjust until it suits your product’s personality, and take the numbers with you. There’s also a plain-English brief you can paste into an AI coding tool to rebuild it in whatever framework you use.

Two things hold whatever you choose. It has to be a real switch to assistive technology, which means the right role, a labelled state and full keyboard support, as the W3C’s switch pattern sets out. And it has to respect people who have asked their device for less motion. Every demo on this page drops its animation when that setting is on.

Why a studio spends a morning on a switch

Because the switch was never really the point. Most of what makes a product feel premium is a stack of decisions like this one, each too small to defend in a meeting and too small for a competitor to notice they are missing. On their own they are invisible. Together they are the difference between software that feels assembled and software that feels made.

It is the same argument I made in Competence is now free. Taste isn’t. When anyone can produce something that works, how it feels is what is left to compete on. Care at this scale is a position, and it is one your customers can feel long before they can name it.

If your product is full of switches that merely work, we should talk.

Credit where it is due: this piece was sparked by Kabarza’s excellent breakdown of the same idea. Their work is well worth following.