Toggle Switch Component Demo

Comprehensive showcase of the FunnyFunHouse toggle switch system

Basic Toggle Switch

Toggle Switch Sizes

Toggle Switch Color Variants

Usage Examples

Dark Mode Toggle

Notifications

Privacy Settings

HTML Code Examples

Basic Toggle Switch

<label class="toggle-switch">
  <input type="checkbox" id="my-toggle">
  <span class="toggle-slider"></span>
</label>

Toggle Switch with Label

<div class="toggle-switch-wrapper">
  <label class="toggle-switch">
    <input type="checkbox" id="my-toggle">
    <span class="toggle-slider"></span>
  </label>
  <label for="my-toggle" class="toggle-switch-label">Enable Feature</label>
</div>

Small Success Toggle

<label class="toggle-switch toggle-switch-sm toggle-switch-success">
  <input type="checkbox" id="my-toggle" checked>
  <span class="toggle-slider"></span>
</label>

Available Classes

Base Classes

  • toggle-switch - Base toggle switch
  • toggle-slider - Toggle slider element
  • toggle-switch-wrapper - Wrapper with label

Size Variants

  • toggle-switch-sm - Small (44x24)
  • toggle-switch - Default (60x34)
  • toggle-switch-lg - Large (76x42)

Color Variants

  • toggle-switch-success - Green
  • toggle-switch-danger - Red
  • toggle-switch-warning - Orange
  • toggle-switch-accent - Accent

Accessibility Features

  • Keyboard Navigation: Toggle switches can be focused and toggled using keyboard (Tab to focus, Space to toggle)
  • Focus Indicators: Visible outline when focused for keyboard navigation
  • Screen Reader Support: Native checkbox accessibility with proper label associations
  • Disabled State: Clearly indicated with reduced opacity and no pointer events
  • Semantic HTML: Uses standard checkbox input with enhanced styling