Switch - National Design System

Added in v1.0.0 Updated in v1.3.0

Toggle switches for binary choices with clear visual feedback and accessibility support

Single Switch

Standalone toggle for enabling or disabling a single setting

Enable notifications Receive push notifications for important updates


<div class="nds-form-container nds-switch-container">
  <div class="nds-form-header" data-feedback-target>
    <label for="switch-1">
      <span class="nds-label">Enable notifications</span>
      <span class="nds-info">Receive push notifications for important updates</span>
    </label>
  </div>
  <div class="nds-form-control">
    <div class="nds-switch">
      <input type="checkbox" id="switch-1" name="notifications" value="enabled" class="nds-switch-input">
      <div class="nds-switch-track">
        <div class="nds-switch-thumb"></div>
      </div>
    </div>
  </div>
</div>

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

Modifier Classes

Class	Element	Description
`nds-sm`	`.nds-switch-container`	Small size: 36x18px track, 12px thumb
`nds-lg`	`.nds-switch-container`	Large size: 56x28px track, 20px thumb
`nds-neutral`	`.nds-switch`	Uses neutral color palette for the checked state instead of primary
`nds-rowView`	`.nds-switch-group`	Lays out switches in a horizontal row instead of the default column

Data Attributes

Attribute	Element	Description
`data-state~="disabled"`	`.nds-switch-container`	Disables the individual switch: sets not-allowed cursor and mutes track and thumb colors. Synced automatically from the input's `disabled` attribute by the forms system
`data-state~="disabled"`	`.nds-switch-group`	Disables all switches in the group at once via CSS opacity and pointer-events

CSS Custom Properties

Property	Default	Description
`--nds-input-size`	`20px`	Controls the label line-height and ripple baseline; set via size modifier classes
`--switch-width`	`48px`	Width of the switch track
`--switch-height`	`24px`	Height of the switch track
`--switch-thumb-size`	`16px`	Diameter of the thumb circle
`--switch-thumb-offset`	`4px`	Distance from the track edge to the thumb in unchecked and checked states
`--switch-track-bg`	`--background-default`	Track background color; overridden by checked state and disabled state
`--switch-track-border`	`--switch-neutral-default`	Track border color; overridden by checked state and disabled state
`--switch-thumb-bg`	`--switch-neutral-default`	Thumb background color; overridden by checked state and disabled state

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'));

Last Modified Date: 28/06/2026 - 01:27 PM