🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Toggle Switch

View in Pattern Lab

HTML Markup

<div class="hoo-toggle">
    <input type="checkbox" class="hoo-toggle-cb" name="toggleName" id="toggle-97" >
    <label for="toggle-97" class="hoo-toggle-label"><span class="hoo-toggle-slider"></span><span class="hoo-toggle-checked">On</span><span class="hoo-toggle-unchecked">Off</span>
</label>
</div>

Toggle Switch

A toggle switch is a visual control that allows users to switch between two states: on and off.

Overview

Toggle switches provide a visual way to enable or disable a setting, feature, or functionality. They are similar to checkboxes but have a more distinct on/off visual representation and are typically used for binary settings that take immediate effect.

Usage

Toggle switches should be used when:

  • The option is clearly binary (on/off, enabled/disabled)
  • The change takes immediate effect (no form submission required)
  • The state is important to visualize at a glance
  • Space allows for a larger control compared to a checkbox

States

  • Off - Default unchecked state
  • On - Checked/enabled state
  • Focus - When the toggle has keyboard focus
  • Disabled - When the toggle cannot be interacted with

SCSS

Component Import

SCSS Partial Location

CSS Classes

  • .hoo-toggle - Container for the toggle switch
  • .hoo-toggle-input - The underlying checkbox input
  • .hoo-toggle-label - The visible toggle switch
  • .hoo-toggle-onlabel - Text label for the “on” state
  • .hoo-toggle-offlabel - Text label for the “off” state

Accessibility

  • Use role="switch" on the input element
  • Ensure the toggle is keyboard accessible
  • Provide clear on/off labels (visually or via aria-label)
  • Ensure sufficient color contrast between states
  • When disabled, include aria-disabled="true"