BlueStack.io - Component Library

switch Component

📐 Align UI Design Reference

Component Specs: 44px width, 24px height, 20px thumb, 2px padding
States: Default, Hover, Pressed, Disabled, Active (On/Off)
Colors: gray-300 track (off), blue-600 track (on), white thumb
Variants: Basic Switch, Switch Label, Switch Card, Integration Switch

Overview

Toggle switches for binary on/off states following Align UI design system. Includes size variants, color options, labels, cards, and list styles for comprehensive UI patterns.

Basic Switches

Default Switch States

Preview Code

Copy

Default

Checked

Disabled

Disabled Checked

<div class="space-y-4">
  <!-- Default State -->
  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600">Default</span>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Checked State -->
  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600">Checked</span>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Disabled State -->
  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600">Disabled</span>
    <label class="switch">
      <input type="checkbox" disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Disabled Checked -->
  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600">Disabled Checked</span>
    <label class="switch">
      <input type="checkbox" checked disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="space-y-4">
                
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">Default</span>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">Checked</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">Disabled</span>
                    <label class="switch">
                        <input type="checkbox" disabled>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">Disabled Checked</span>
                    <label class="switch">
                        <input type="checkbox" checked disabled>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>
            </div>

Size Variants

Preview Code

Copy

Tiny

Small

Default

Large

Big

<div class="space-y-4">
  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600 w-20">Tiny</span>
    <label class="switch tiny">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600 w-20">Small</span>
    <label class="switch small">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600 w-20">Default</span>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600 w-20">Large</span>
    <label class="switch large">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="text-sm text-gray-600 w-20">Big</span>
    <label class="switch big">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600 w-20">Small</span>
                    <label class="switch small">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600 w-20">Default</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600 w-20">Large</span>
                    <label class="switch large">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

Color Variants

Preview Code

Copy

Primary

Positive

Negative

Warning

Info

Purple

<div class="grid grid-cols-3 gap-4">
  <div class="flex flex-col items-center gap-2">
    <label class="switch primary">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="text-xs text-gray-600">Primary</span>
  </div>

  <div class="flex flex-col items-center gap-2">
    <label class="switch positive">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="text-xs text-gray-600">Positive</span>
  </div>

  <div class="flex flex-col items-center gap-2">
    <label class="switch negative">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="text-xs text-gray-600">Negative</span>
  </div>

  <div class="flex flex-col items-center gap-2">
    <label class="switch warning">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="text-xs text-gray-600">Warning</span>
  </div>

  <div class="flex flex-col items-center gap-2">
    <label class="switch info">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="text-xs text-gray-600">Info</span>
  </div>

  <div class="flex flex-col items-center gap-2">
    <label class="switch purple">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="text-xs text-gray-600">Purple</span>
  </div>
</div>

<div class="grid grid-cols-3 gap-4">
                <div class="flex flex-col items-center gap-2">
                    <label class="switch primary">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <span class="text-xs text-gray-600">Primary</span>
                </div>

<div class="flex flex-col items-center gap-2">
                    <label class="switch positive">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <span class="text-xs text-gray-600">Positive</span>
                </div>

<div class="flex flex-col items-center gap-2">
                    <label class="switch negative">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <span class="text-xs text-gray-600">Negative</span>
                </div>

<div class="flex flex-col items-center gap-2">
                    <label class="switch warning">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <span class="text-xs text-gray-600">Warning</span>
                </div>

<div class="flex flex-col items-center gap-2">
                    <label class="switch purple">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <span class="text-xs text-gray-600">Purple</span>
                </div>
            </div>

Switches with Labels

Label Variations

Preview Code

Copy

Enable notifications

Dark mode

Marketing emails Receive emails about new products, features, and more.

<div class="space-y-4">
  <!-- Label on Right -->
  <div class="switch labeled">
    <label>
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="label">Enable notifications</span>
  </div>

  <!-- Label on Left (Flipped) -->
  <div class="switch labeled flip">
    <label>
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="label">Dark mode</span>
  </div>

  <!-- With Description -->
  <div class="switch labeled with-description">
    <label>
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <div class="label-content">
      <span class="label">Marketing emails</span>
      <span class="description">Receive emails about new products, features, and more.</span>
    </div>
  </div>
</div>

<div class="space-y-4">
                
                <div class="switch labeled">
                    <label>
                        <input type="checkbox">
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <span class="label">Enable notifications</span>
                </div>

<div class="switch labeled flip">
                    <label>
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <span class="label">Dark mode</span>
                </div>

<div class="switch labeled with-description">
                    <label>
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                    <div class="label-content">
                        <span class="label">Marketing emails</span>
                        <span class="description">Receive emails about new products, features, and more.</span>
                    </div>
                </div>
            </div>

Switch Cards

Card Styles

Preview Code

Copy

Wi-Fi

Connect to wireless networks

Push Notifications

Get notified about important updates

Advanced Security

Premium feature - Upgrade to enable

<div class="space-y-3">
  <!-- Basic Card -->
  <div class="switch-card">
    <div class="content">
      <div class="text">
        <div class="title">Wi-Fi</div>
        <div class="subtitle">Connect to wireless networks</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Card with Icon -->
  <div class="switch-card">
    <div class="content">
      <i class="icon bell w-5 h-5"></i>
      <div class="text">
        <div class="title">Push Notifications</div>
        <div class="subtitle">Get notified about important updates</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Disabled Card -->
  <div class="switch-card disabled">
    <div class="content">
      <i class="icon lock w-5 h-5"></i>
      <div class="text">
        <div class="title">Advanced Security</div>
        <div class="subtitle">Premium feature - Upgrade to enable</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="space-y-3">
                
                <div class="switch-card">
                    <div class="content">
                        <div class="text">
                            <div class="title">Wi-Fi</div>
                            <div class="subtitle">Connect to wireless networks</div>
                        </div>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="switch-card">
                    <div class="content">
                        <i class="icon bell w-5 h-5"></i>
                        <div class="text">
                            <div class="title">Push Notifications</div>
                            <div class="subtitle">Get notified about important updates</div>
                        </div>
                    </div>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="switch-card disabled">
                    <div class="content">
                        <i class="icon lock w-5 h-5"></i>
                        <div class="text">
                            <div class="title">Advanced Security</div>
                            <div class="subtitle">Premium feature - Upgrade to enable</div>
                        </div>
                    </div>
                    <label class="switch">
                        <input type="checkbox" disabled>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>
            </div>

List Style

Preview Code

Copy

Airplane Mode

Disable all wireless connections

Bluetooth

Connect to nearby devices

Location Services

Allow apps to use your location

Do Not Disturb

Silence calls and notifications

<div class="border border-gray-200 rounded-lg overflow-hidden">
  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Airplane Mode</div>
        <div class="subtitle">Disable all wireless connections</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Bluetooth</div>
        <div class="subtitle">Connect to nearby devices</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Location Services</div>
        <div class="subtitle">Allow apps to use your location</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Do Not Disturb</div>
        <div class="subtitle">Silence calls and notifications</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="border border-gray-200 rounded-lg overflow-hidden">
                <div class="switch-list">
                    <div class="content">
                        <div class="text">
                            <div class="title">Airplane Mode</div>
                            <div class="subtitle">Disable all wireless connections</div>
                        </div>
                    </div>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="switch-list">
                    <div class="content">
                        <div class="text">
                            <div class="title">Bluetooth</div>
                            <div class="subtitle">Connect to nearby devices</div>
                        </div>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="switch-list">
                    <div class="content">
                        <div class="text">
                            <div class="title">Location Services</div>
                            <div class="subtitle">Allow apps to use your location</div>
                        </div>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div class="switch-list">
                    <div class="content">
                        <div class="text">
                            <div class="title">Do Not Disturb</div>
                            <div class="subtitle">Silence calls and notifications</div>
                        </div>
                    </div>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>
            </div>

Integration Switches

Grouped Switches

Preview Code

Copy

Notification Channels

SMS

Push

Privacy Settings

Profile Visibility

Make your profile public

Show Online Status

Let others see when you're active

<!-- Horizontal Integration -->
<div class="integration-switch horizontal mb-6">
  <h4 class="font-medium text-gray-700 mb-3">Notification Channels</h4>
  <div class="switches">
    <div class="switch labeled">
      <label>
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
      <span class="label">Email</span>
    </div>

    <div class="switch labeled">
      <label>
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
      <span class="label">SMS</span>
    </div>

    <div class="switch labeled">
      <label>
        <input type="checkbox" />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
      <span class="label">Push</span>
    </div>
  </div>
</div>

<!-- Vertical Integration with Cards -->
<div class="integration-switch">
  <h4 class="font-medium text-gray-700 mb-3">Privacy Settings</h4>
  <div class="switches space-y-2">
    <div class="switch-card">
      <div class="content">
        <div class="text">
          <div class="title">Profile Visibility</div>
          <div class="subtitle">Make your profile public</div>
        </div>
      </div>
      <label class="switch">
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
    </div>

    <div class="switch-card">
      <div class="content">
        <div class="text">
          <div class="title">Show Online Status</div>
          <div class="subtitle">Let others see when you're active</div>
        </div>
      </div>
      <label class="switch">
        <input type="checkbox" />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
    </div>
  </div>
</div>

<div class="integration-switch horizontal mb-6">
                <h4 class="font-medium text-gray-700 mb-3">Notification Channels</h4>
                <div class="switches">
                    <div class="switch labeled">
                        <label>
                            <input type="checkbox" checked>
                            <span class="track">
                                <span class="thumb"></span>
                            </span>
                        </label>
                        <span class="label">Email</span>
                    </div>

<div class="integration-switch">
                <h4 class="font-medium text-gray-700 mb-3">Privacy Settings</h4>
                <div class="switches space-y-2">
                    <div class="switch-card">
                        <div class="content">
                            <div class="text">
                                <div class="title">Profile Visibility</div>
                                <div class="subtitle">Make your profile public</div>
                            </div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="track">
                                <span class="thumb"></span>
                            </span>
                        </label>
                    </div>

<div class="switch-card">
                        <div class="content">
                            <div class="text">
                                <div class="title">Show Online Status</div>
                                <div class="subtitle">Let others see when you're active</div>
                            </div>
                        </div>
                        <label class="switch">
                            <input type="checkbox">
                            <span class="track">
                                <span class="thumb"></span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>

Interactive Examples

Programmatic Control

Preview Code

Copy

<div class="space-y-4">
  <div>
    <div class="flex gap-2 mb-3">
      <button
        onclick="toggleSwitch('#demo-switch', true)"
        class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700"
      >
        Turn On
      </button>
      <button
        onclick="toggleSwitch('#demo-switch', false)"
        class="px-3 py-1 bg-gray-600 text-white text-sm rounded hover:bg-gray-700"
      >
        Turn Off
      </button>
      <button
        onclick="toggleSwitch('#demo-switch')"
        class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
      >
        Toggle
      </button>
    </div>
    <label class="switch" id="demo-switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div>
    <div class="flex gap-2 mb-3">
      <button
        onclick="setSwitchState('#controlled-switch', true)"
        class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
      >
        Enable
      </button>
      <button
        onclick="setSwitchState('#controlled-switch', false)"
        class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700"
      >
        Disable
      </button>
    </div>
    <label class="switch" id="controlled-switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="space-y-4">
                <div>
                    <div class="flex gap-2 mb-3">
                        <button 
                            onclick="toggleSwitch('#demo-switch', true)" 
                            class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700"
                        >
                            Turn On
                        </button>
                        <button 
                            onclick="toggleSwitch('#demo-switch', false)" 
                            class="px-3 py-1 bg-gray-600 text-white text-sm rounded hover:bg-gray-700"
                        >
                            Turn Off
                        </button>
                        <button 
                            onclick="toggleSwitch('#demo-switch')" 
                            class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
                        >
                            Toggle
                        </button>
                    </div>
                    <label class="switch" id="demo-switch">
                        <input type="checkbox">
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>

<div>
                    <div class="flex gap-2 mb-3">
                        <button 
                            onclick="setSwitchState('#controlled-switch', true)" 
                            class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
                        >
                            Enable
                        </button>
                        <button 
                            onclick="setSwitchState('#controlled-switch', false)" 
                            class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700"
                        >
                            Disable
                        </button>
                    </div>
                    <label class="switch" id="controlled-switch">
                        <input type="checkbox" checked>
                        <span class="track">
                            <span class="thumb"></span>
                        </span>
                    </label>
                </div>
            </div>

Event Handling

Preview Code

Copy

Status: OFF

<div>
  <label class="switch" id="event-switch">
    <input
      type="checkbox"
      onchange="document.getElementById('switch-status').textContent = this.checked ? 'ON' : 'OFF'"
    />
    <span class="track">
      <span class="thumb"></span>
    </span>
  </label>
  <p class="mt-2 text-sm text-gray-600">
    Status: <span id="switch-status" class="font-semibold">OFF</span>
  </p>
</div>

Configuration Options

Customize switches with various options:

Sizes: tiny, small, default, large, big

Colors: primary, positive, negative, warning, info

Extended Colors: red, orange, yellow, green, teal, blue, violet, purple, pink

Layouts: labeled, labeled flip, switch-card, switch-list

Container-level inheritance allows applying size/color to multiple switches at once using .switches wrapper.

JavaScript API

// Toggle switch state
toggleSwitch('#my-switch', true);  // Turn on
toggleSwitch('#my-switch', false); // Turn off
toggleSwitch('#my-switch');        // Toggle current state

// Enable/disable switch
setSwitchState('#my-switch', true);  // Enable
setSwitchState('#my-switch', false); // Disable

// Get switch value
var isChecked = getSwitchValue('#my-switch');

// Listen to change events
document.querySelector('#my-switch input')
  .addEventListener('change', function(e) {
    console.log('Switch changed:', e.target.checked);
  });

// Integration switch events
document.querySelector('.integration-switch')
  .addEventListener('integrationSwitchChange', function(e) {
    console.log('Integration switches:', e.detail.allSwitches);
  });

HTML Structure

<!-- Basic Switch -->
<label class="switch">
  <input type="checkbox">
  <span class="track">
    <span class="thumb"></span>
  </span>
</label>

<!-- Switch with Label -->
<div class="switch labeled">
  <label>
    <input type="checkbox">
    <span class="track">
      <span class="thumb"></span>
    </span>
  </label>
  <span class="label">Enable feature</span>
</div>

<!-- Switch Card -->
<div class="switch-card">
  <div class="content">
    <div class="text">
      <div class="title">Feature Name</div>
      <div class="subtitle">Description</div>
    </div>
  </div>
  <label class="switch">
    <input type="checkbox">
    <span class="track">
      <span class="thumb"></span>
    </span>
  </label>
</div>