CSS toggle switch. iOS ยท Material styles.
๐ŸŽš๏ธ Preview (click to test)

How to use

  1. Pick style (iOS / Material / square / minimal).
  2. Set size + colors (ON/OFF/thumb).
  3. Set transition speed.
  4. Copy HTML+CSS.

Key features

  • 4 styles
  • Free size, color, speed
  • Checkbox-based (accessible)
  • Instant HTML+CSS copy
  • Live click test

Use cases

  • Settings pages โ€” notification on/off
  • Dark-mode switch โ€” theme toggle
  • Admin panel โ€” feature activation
  • Mobile app โ€” permission toggles
  • Signup forms โ€” agreement

Toggle vs checkbox

(1) Toggle = instant effect (e.g., dark mode โ€” click โ†’ applies). (2) Checkbox = "agree" type, applies on form submit. UX guides: toggle for instant, checkbox for form agreement.

FAQ

Accessibility?

Checkbox-based: keyboard Tab + Space work. Wrap with label for click area.

Dark-mode support?

Use CSS variables for themed ON/OFF tokens.

React?

Use className. Manage checked state via useState.

Free?

Yes.