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

Default
Checked
Disabled
Disabled Checked

Size Variants

Tiny
Small
Default
Large
Big

Color Variants

Primary
Positive
Negative
Warning
Info
Purple

Switches with Labels

Label Variations

Enable notifications
Dark mode
Marketing emails Receive emails about new products, features, and more.

Switch Cards

Card Styles

Wi-Fi
Connect to wireless networks
Push Notifications
Get notified about important updates
Advanced Security
Premium feature - Upgrade to enable

List Style

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

Integration Switches

Grouped Switches

Notification Channels

Email
SMS
Push

Privacy Settings

Profile Visibility
Make your profile public
Show Online Status
Let others see when you're active

Interactive Examples

Programmatic Control

Event Handling

Status: OFF

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>