Toggle Switch

This element provides a way to build your own toggle switch. Ideal for switching between two or multiple variations of elements/content, based on user selection.

For more flexibility, the ‘content switcher’ which switches out the versions of the content is a separate element. This way the one toggle can be used to switch out multiple elements on the same page without any limitation on design/layout.

Supports Multiple Variants

The toggle switch has two modes, either design your own switch (with labels positioned either side) or allow for multiple labels with animated active styles on the labels themselves.

Toggle Type – Choose either to display two labels and a stylable toggle switch, or multiple labels.

Which content switcher? – You can either set the toggle switch to interact with all content switchers found in the same section. (this is for convenience so you don’t need to provide the selectors for nearby content switchers), or you can enter the selector of the content switcher you are wishing to use.

Labels – Set the label text for each option.

Styling

Depending on which toggle type you choose, you’ll have different settings for the styles. Either styling the animated toggle switch or the animated labels.


Developer Docs: Events

The toggle switch element triggers events when the toggle is switched. If you’re needing to trigger something when this happens, the events are..

x_toggle_switch:change– triggered any time the toggle is switched
x_toggle_switch:checked– triggered when the toggle switch moves to checked (right) position
x_toggle_switch:unchecked– triggered when the toggle switch moves to unchecked (left) position
x_toggle_switch:toggled_{label number}– triggered when the switch moves to a particular label

Sample code..

const myToggleSwitch = document.getElementById('toggle-1');

myToggleSwitch.addEventListener('x_toggle_switch:change', function() {
 // do something as switch is toggled
});

myToggleSwitch.addEventListener('x_toggle_switch:toggled_3', function() {
 // do something as switch is toggled to third option
});