Toggle

Forms

Smooth animated toggle switch with multiple sizes and label support.

Dependencies:

framer-motion

Full

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { Toggle } from '@/components/Toggle'

Related Components

AnimatedInput

Input field with floating label animation, validation states, and multiple variants.

SearchInput

Search input with expandable animation, loading state, and optional suggestions dropdown.

Checkbox

Animated checkbox with spring effect, supporting indeterminate state and checkbox groups.

← Back to Components

Toggle

Forms

Smooth animated toggle switch with multiple sizes and label support.

Dependencies:

framer-motion

Full

Sizes

SmallMediumLarge

Settings Example

Push Notifications

Receive notifications about updates

Auto-save

Automatically save your work

Beta Features

Access experimental features

Dark Mode Toggle

Dark mode

Current States

Basic: OFFNotifications: ONAuto-save: OFFDark Mode: OFF