About Component

TogglePro is a fully animated, accessible toggle switch for Framer. Smooth thumb slide with a subtle squish bounce, a focus ring, and a live light/dark showcase mode to preview every state at once. Perfect for settings panels, forms and feature toggles.

• Smooth thumb slide animation with squish/bounce effect on toggle

• Customizable track, thumb and focus ring colors

• Adjustable width, height, padding and auto border radius

• Built-in focus ring with customizable color and width

• Customizable label font — family, size, weight, line-height, letter-spacing

• Optional helper text below the label

• Label position control — left or right of the switch

• Three preview states: Default, Focused, Disabled — design without writing code

• Demo Mode — live light & dark showcase panels with all states side by side

• Fully responsive showcase — auto switches to vertical stack on smaller screens

Use Cases

Settings & preferences panels

SaaS dashboard & admin interfaces

Account & profile settings pages

Onboarding & feature opt-in flows

Pricing pages — plan & add-on toggles

Forms & multi-step signup flows

Cookie consent & privacy controls

Notification & email preference centers

Dark mode / theme switchers

E-commerce filters & product option selectors

Keywords

Toggle switch, animated toggle, framer toggle component, switch button ui, ios style toggle, on off switch, custom toggle switch, toggle switch animation, settings toggle, switch ui framer, checkbox toggle, accessible toggle switch, dark mode switch, toggle with label, animated switch button, focus ring toggle, responsive toggle switch, toggle ui component, switch component framer, smooth toggle animation