Toggle Switch Component

iOS-style toggle switch with smooth animations, async support, and full accessibility

Live Demo

Loading demo...

Documentation

# Toggle Switch Component

An iOS-style toggle switch component with smooth animations, async support, and full accessibility. Perfect for settings panels, forms, and preference controls.

Features

iOS-Style Design: Smooth animations and familiar interaction patterns
Async Support: Loading states for server-side operations
Size Variants: Small, default, and large sizes
Icon Support: Optional icons for on/off states
Color Themes: Default, colored (red/green), custom colors
State Labels: Optional ON/OFF text labels
Group Behavior: Settings panel with dependent toggles
Accessibility: Full ARIA support, keyboard navigation
Loading States: Built-in spinner for async operations
Feedback: Success/error animations

Usage Examples

Basic Toggle


  Enable Feature

Toggle with Description


  
    Notifications
    Receive alerts

Async Toggle

// Listen for toggle events
document.addEventListener('toggle:beforeChange', async (e) => {
  const { toggleId, newState } = e.detail;
// Validate or prevent change
  if (!canToggle) {
    e.preventDefault();
  }
});document.addEventListener('toggle:change', (e) => {
  console.log('Toggle changed:', e.detail);
});

Programmatic Control

// Set toggle state
toggleSwitchComponent.setToggleState('toggle-wifi', true);
// Toggle state
toggleSwitchComponent.toggleState('toggle-bluetooth');
// Enable/disable
toggleSwitchComponent.setEnabled('toggle-airplane', false);
// Get state
const isEnabled = toggleSwitchComponent.getState('toggle-wifi');// Get all states
const allStates = toggleSwitchComponent.getAllStates();

Create Toggle Dynamically

const toggle = toggleSwitchComponent.createToggle({
  label: 'Dark Mode',
  description: 'Use dark theme',
  checked: false,
  withIcons: true,
  async: true
});document.querySelector('.settings').appendChild(toggle);

Toggle Variants

Basic Toggle

Standard on/off switch with label.

Toggle with Icons

Shows sun/moon icons for theme switching.

Colored Toggle

Red when off, green when on.

Small/Large Sizes

Compact or prominent toggle sizes.

Async Toggle

Loading spinner during server operations.

Settings List

Group of toggles in a settings panel.

State Labels

Shows ON/OFF text beside toggle.

Events

Event	Description	Detail
`toggle:change`	Fired when toggle changes	`{ toggleId, checked }`
`toggle:beforeChange`	Before async change (cancelable)	`{ toggleId, newState }`
`toggle:error`	Async operation failed	`{ toggleId, error }`
`toggle:reset`	Toggle reset to original	`{ toggleId }`
`toggle:set`	Set toggle state via API	`{ toggleId, checked }`
`toggle:toggle`	Toggle state via API	`{ toggleId }`
`toggle:enable`	Enable/disable via API	`{ toggleId, enabled }`

API Methods

Method	Description	Parameters	Returns
`setToggleState(id, checked)`	Set toggle state	`id: string, checked: boolean`	`void`
`toggleState(id)`	Toggle state	`id: string`	`void`
`setEnabled(id, enabled)`	Enable/disable toggle	`id: string, enabled: boolean`	`void`
`getState(id)`	Get toggle state	`id: string`	`boolean`
`getAllStates()`	Get all toggle states	-	`object`
`resetToggle(id)`	Reset to original state	`id: string`	`void`
`resetAll()`	Reset all toggles	-	`void`
`createToggle(options)`	Create toggle dynamically	`options: object`	`HTMLElement`

Accessibility Notes

Role & ARIA: Uses role="switch" with aria-checked state
Keyboard Navigation:

- Space or Enter - Toggle state
- Tab - Navigate between toggles

Screen Reader: Announces state changes with proper labels
Focus Indicators: Clear 2px outline on focus
Disabled State: Properly conveyed with reduced opacity and cursor
Loading State: Uses aria-busy during async operations
Labels: All toggles have associated labels for context

CSS Variables

/ Customize toggle appearance /
--toggle-width: 44px;
--toggle-height: 24px;
--toggle-thumb-size: 20px;
--toggle-bg-off: #cbd5e1;
--toggle-bg-on: #3b82f6;
--toggle-transition: 0.2s ease-in-out;

Keyboard Shortcuts

Space/Enter - Toggle switch state
Tab - Move to next toggle
Shift+Tab - Move to previous toggle

Best Practices

1. Always provide clear labels describing what the toggle controls
2. Use descriptions for complex settings
3. Group related toggles together
4. Provide feedback for async operations
5. Handle errors gracefully with visual feedback
6. Use appropriate size variants for context
7. Consider using state labels for clarity
8. Test keyboard navigation thoroughly
9. Ensure sufficient color contrast
10. Avoid using toggles for actions (use buttons instead)

Component Code

HTML Structure

<!-- Toggle Switch Component HTML -->
<div class="toggle-showcase">
  <!-- Basic Toggle Switch -->
  <div class="toggle-group">
    <label class="toggle-wrapper" for="toggle-basic">
      <span class="toggle-label">Basic Toggle</span>
      <input type="checkbox" id="toggle-basic" class="toggle-input" role="switch" aria-checked="false">
      <span class="toggle-switch"></span>
    </label>
  </div>

  <!-- Toggle with Description -->
  <div class="toggle-group">
    <label class="toggle-wrapper toggle-with-description" for="toggle-description">
      <div class="toggle-content">
        <span class="toggle-label">Enable Notifications</span>
        <span class="toggle-description">Receive alerts for important updates</span>
      </div>
      <input type="checkbox" id="toggle-description" class="toggle-input" role="switch" aria-checked="false">
      <span class="toggle-switch"></span>
    </label>
  </div>

  <!-- Toggle with Icons -->
  <div class="toggle-group">
    <label class="toggle-wrapper" for="toggle-icons">
      <span class="toggle-label">Dark Mode</span>
      <input type="checkbox" id="toggle-icons" class="toggle-input" role="switch" aria-checked="false">
      <span class="toggle-switch toggle-switch-icons">
        <span class="toggle-icon toggle-icon-off">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <circle cx="12" cy="12" r="5"/>
            <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 12h6m6 0h6m-13.22 4.22l4.24 4.24"/>
          </svg>
        </span>
        <span class="toggle-icon toggle-icon-on">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        </span>
      </span>
    </label>
  </div>

  <!-- Colored Toggle -->
  <div class="toggle-group">
    <label class="toggle-wrapper" for="toggle-colored">
      <span class="toggle-label">Enable Feature</span>
      <input type="checkbox" id="toggle-colored" class="toggle-input" role="switch" aria-checked="false" checked>
      <span class="toggle-switch toggle-switch-colored"></span>
    </label>
  </div>

  <!-- Small Toggle -->
  <div class="toggle-group">
    <label class="toggle-wrapper toggle-small" for="toggle-small">
      <span class="toggle-label">Small Toggle</span>
      <input type="checkbox" id="toggle-small" class="toggle-input" role="switch" aria-checked="false">
      <span class="toggle-switch"></span>
    </label>
  </div>

  <!-- Large Toggle -->
  <div class="toggle-group">
    <label class="toggle-wrapper toggle-large" for="toggle-large">
      <span class="toggle-label">Large Toggle</span>
      <input type="checkbox" id="toggle-large" class="toggle-input" role="switch" aria-checked="false">
      <span class="toggle-switch"></span>
    </label>
  </div>

  <!-- Disabled Toggle -->
  <div class="toggle-group">
    <label class="toggle-wrapper toggle-disabled" for="toggle-disabled">
      <span class="toggle-label">Disabled Toggle</span>
      <input type="checkbox" id="toggle-disabled" class="toggle-input" role="switch" aria-checked="false" disabled>
      <span class="toggle-switch"></span>
    </label>
  </div>

  <!-- Loading Toggle -->
  <div class="toggle-group">
    <label class="toggle-wrapper toggle-loading" for="toggle-loading">
      <span class="toggle-label">Async Toggle</span>
      <input type="checkbox" id="toggle-loading" class="toggle-input" role="switch" aria-checked="false" data-async="true">
      <span class="toggle-switch">
        <span class="toggle-spinner"></span>
      </span>
    </label>
  </div>

  <!-- Toggle List Group -->
  <div class="toggle-list">
    <h3 class="toggle-list-title">Settings</h3>

    <div class="toggle-list-item">
      <label class="toggle-wrapper toggle-list-wrapper" for="toggle-wifi">
        <div class="toggle-content">
          <span class="toggle-label">Wi-Fi</span>
          <span class="toggle-description">Connect to wireless networks</span>
        </div>
        <input type="checkbox" id="toggle-wifi" class="toggle-input" role="switch" aria-checked="true" checked>
        <span class="toggle-switch"></span>
      </label>
    </div>

    <div class="toggle-list-item">
      <label class="toggle-wrapper toggle-list-wrapper" for="toggle-bluetooth">
        <div class="toggle-content">
          <span class="toggle-label">Bluetooth</span>
          <span class="toggle-description">Allow Bluetooth connections</span>
        </div>
        <input type="checkbox" id="toggle-bluetooth" class="toggle-input" role="switch" aria-checked="false">
        <span class="toggle-switch"></span>
      </label>
    </div>

    <div class="toggle-list-item">
      <label class="toggle-wrapper toggle-list-wrapper" for="toggle-location">
        <div class="toggle-content">
          <span class="toggle-label">Location Services</span>
          <span class="toggle-description">Allow apps to access your location</span>
        </div>
        <input type="checkbox" id="toggle-location" class="toggle-input" role="switch" aria-checked="false">
        <span class="toggle-switch"></span>
      </label>
    </div>

    <div class="toggle-list-item">
      <label class="toggle-wrapper toggle-list-wrapper" for="toggle-airplane">
        <div class="toggle-content">
          <span class="toggle-label">Airplane Mode</span>
          <span class="toggle-description">Disable all wireless connections</span>
        </div>
        <input type="checkbox" id="toggle-airplane" class="toggle-input" role="switch" aria-checked="false">
        <span class="toggle-switch"></span>
      </label>
    </div>
  </div>

  <!-- Toggle with State Labels -->
  <div class="toggle-group">
    <div class="toggle-state-wrapper">
      <span class="toggle-state-label" data-state="off">OFF</span>
      <label class="toggle-wrapper" for="toggle-state">
        <input type="checkbox" id="toggle-state" class="toggle-input" role="switch" aria-checked="false">
        <span class="toggle-switch"></span>
      </label>
      <span class="toggle-state-label" data-state="on">ON</span>
    </div>
  </div>
</div>

Properties & Features

Features

iOS-Style Design
Async Support
Size Variants
Icon Support
Color Themes
State Labels
Group Behavior
Accessibility
Loading States
Feedback

Browser Support

Chrome 90+Firefox 88+Safari 14+Edge 90+

Last Updated

2025-10-30

Usage Tips

Installation

Copy the HTML, CSS, and JavaScript code above into your project files.

Customization

Modify CSS variables and classes to match your design system.

Accessibility

Ensure all interactive elements have proper ARIA labels and keyboard support.

Responsive Design

Test the component across different screen sizes and devices.

Toggle Switch Component

Live Demo

Documentation

Features

Usage Examples

Basic Toggle

Toggle with Description

Async Toggle

Programmatic Control

Create Toggle Dynamically

Toggle Variants

Basic Toggle

Toggle with Icons

Colored Toggle

Small/Large Sizes

Async Toggle

Settings List

State Labels

Events

API Methods

Accessibility Notes

CSS Variables

Keyboard Shortcuts

Best Practices

Component Code

Properties & Features

Tags

Features

Browser Support

Last Updated

Usage Tips

Installation

Customization

Accessibility

Responsive Design