iOS Toggle

The iOS switch at its real dimensions — 51×31 with a 27px thumb — using Apple's system green and the spring-like easing curve from the platform.

Mobile

switchtoggleiosform

Airplane ModeWi-FiBluetooth

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { IosToggle } from "@/registry/components/ios-toggle";

export function Example() {
  return <IosToggle />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Mobile

Dock

macOS dock magnification. The scale falloff uses a cosine curve rather than a linear ramp, which is what makes neighbouring icons swell smoothly instead of stepping.

Segmented Control

The iOS segmented control as a CSS grid, so the thumb width is derived from the number of options and the translate is a whole multiple of it.