Show the label to the right of the sliding toggle

• The <checkbox> and both <label> tags need to be wrapped into a <div class='slidingToggleGroup'> container
• The formGroup class can also be assigned to the container, but it's not required
  • The formGroup class might provide desirable margins and padding within the form
• inputGroup is not supported for this layout

The difference may not be obvious if the sliding toggle isn't inside or next to anything.

The same warning about aria-hidden applies to this layout.

Assign the disabled attribute to the <checkbox> to disable a sliding toggle.

disabled checkbox

<div class='formGroup slidingToggleGroup'>
	<input type='checkbox' name='oneDisabled' id='oneDisabled' class='slidingToggle noSelect' disabled />
	<label for='oneDisabled' class='toggle' aria-hidden='true'></label>
	<label for='oneDisabled'>Currently disabled</label>
</div>

Javascript events can be assigned to sliding toggles and can read custom data- attribute values.

HTML

<div class='formGroup'>
	<input type='checkbox' name='triggerJavascript' id='triggerJavascript' data-toggle-number='1' class='slidingToggle noSelect' />
	<label for='triggerJavascript' class='toggle' aria-hidden='true'></label>
	<label for='triggerJavascript'>Currently disabled</label>
</div>

Javascript

// assign custom event to sliding toggles
let slidingToggles = form.querySelectorAll(`input[type=checkbox].slidingToggle`); // or any other selector
for(let toggle of slidingToggles){
	toggle.addEventListener("click", event => {
		toggleChangedFunction(event);
	});
}

// function to process sliding toggle state changes (clicks)
function toggleChangedFunction(event){
	let toggleId = event.currentTarget.id;
	let toggleNumber = event.currentTarget.dataset.toggleNumber; // read a custom data attribute
	let toggleState = event.currentTarget.checked;

	console.log(`Toggle ${toggleNumber} [id=${toggleId}] has changed state to ${toggleState}`);

	...
}

The "trick" is accomplished by having two labels (one for on and one for off) that are shown or hidden according to the input's checked state.

• Assign class='iconToggleGroup' to a container div
• Place an <input type='checkbox'/> inside the container
• Place two <label class='icon'> as siblings of the checkbox
  • Assign one of the labels the additional on class
  • Assign the other label the additional off class
  • The visibility of these on/off labels will switch based on the input's checked state
• A third <label> — without any class — can and should be placed anywhere (inside or outside the iconToggleGroup container)
  • Optionally hide this sematically critical label from the screen by assigning class='iconToggleGroup hiddenLabel' to the iconToggleGroup container (not to the input)
  • The <label> that comes before the input (in the left label column) can be this "third" label — even though it comes first.
  • The <label> absolutely must not have a class! Not even class=''
• Optionally hide the actual checkbox element by assigning class='iconToggleGroup hiddenCheckbox' to the iconToggleGroup container (not to the input)

Be sure to include a <label> that is not aria-hidden='true'.
If the toggle does not have another label (ex: a column of unlabeled toggles in a table), do not use aria-hidden.

The default height of the image comes from the scss variable $buttonHeight but is easy to override.

• Visible Not Visible Visibility
• In Stock Not In Stock In Stock
• Enabled Disabled Web Status

Be sure to provide an aria-label in the <checkbox aria-label='Purpose'> element if there won't be any visible label (ex: a toolbar of icons).