Switch | NDS - Vanilla National Design System

Single Switch

Standalone toggle for enabling or disabling a single setting

Enable notifications Receive push notifications for important updates

Switch Group

Related settings grouped together with column or row layout

Notification preferences

Email alerts

Push notifications Instant alerts on your device

SMS alerts


<fieldset class="nds-form-group nds-switch-group">
  <legend class="nds-label">Notification preferences</legend>
  <div class="nds-form-container nds-switch-container">
    <div class="nds-form-header">
      <label for="switch1">
        <span class="nds-label">Email alerts</span>
      </label>
    </div>
    <div class="nds-form-control">
      <div class="nds-switch">
        <input type="checkbox" id="switch1" name="notifications" value="email" class="nds-switch-input">
        <div class="nds-switch-track">
          <div class="nds-switch-thumb"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="nds-form-container nds-switch-container">
    <div class="nds-form-header">
      <label for="switch2">
        <span class="nds-label">Push notifications</span>
        <span class="nds-info">Instant alerts on your device</span>
      </label>
    </div>
    <div class="nds-form-control">
      <div class="nds-switch">
        <input type="checkbox" id="switch2" name="notifications" value="push" checked class="nds-switch-input">
        <div class="nds-switch-track">
          <div class="nds-switch-thumb"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="nds-form-container nds-switch-container">
    <div class="nds-form-header">
      <label for="switch3">
        <span class="nds-label">SMS alerts</span>
      </label>
    </div>
    <div class="nds-form-control">
      <div class="nds-switch">
        <input type="checkbox" id="switch3" name="notifications" value="sms" class="nds-switch-input">
        <div class="nds-switch-track">
          <div class="nds-switch-thumb"></div>
        </div>
      </div>
    </div>
  </div>
</fieldset>

Built-in Features

What you get out of the box with zero configuration

Form Integration

Auto-initializes with the forms system. Two-way binding syncs disabled state between inputs and containers. Use data-state="disabled" on the group to disable all switches at once.

Visual Feedback

Ripple effect on hover, thumb stretch on press, and smooth slide animation. Three sizes (SM, MD, LG) with proportional scaling.

Keyboard Support

Space and Enter keys toggle the switch. Track click, label click, and keyboard all fire the switchChange event.

Responsive Layout

Column layout by default, row layout with nds-rowView class. Gaps adjust on mobile for touch-friendly spacing.

Usage Guidelines

When and how to use switches effectively

When to Use

Instant on/off actions that take effect immediately without form submission
Settings pages, preference panels, and feature toggles
Use checkboxes when the change requires a submit action to apply
Use radio buttons when choosing between more than two mutually exclusive options
Always label clearly what state "on" represents

JavaScript API


// Listen for switch state changes
var switchEl = document.querySelector('.nds-switch');
switchEl.addEventListener('switchChange', function(e) {
  console.log('Checked:', e.detail.checked);
  console.log('Value:', e.detail.value);
  console.log('Input:', e.detail.input);
});

// Toggle programmatically
var input = document.querySelector('.nds-switch-input');
input.checked = !input.checked;
input.dispatchEvent(new Event('change'));