ToggleSwitch

Simple Example

import '@schukai/monster/source/components/form/toggle-switch.mjs';<script type="module">import '@schukai/monster/source/components/form/toggle-switch.mjs';</script>

<monster-toggle-switch></monster-toggle-switch>

/** no additional stylesheet is defined **/

Custom Values And Labels

import "@schukai/monster/source/components/form/toggle-switch.mjs";

const control = document.getElementById("toggle-switch-custom-demo");
const state = document.getElementById("toggle-switch-custom-state");
const log = document.getElementById("toggle-switch-custom-log");

control.setOption("values.on", "automatic");
control.setOption("values.off", "manual");
control.setOption("labels.toggleSwitchOn", "A");
control.setOption("labels.toggleSwitchOff", "M");
control.setOption("actions.on", () => {
  log.textContent = "Last event: switched to automatic";
});
control.setOption("actions.off", () => {
  log.textContent = "Last event: switched to manual";
});
control.value = "automatic";

const render = () => {
  state.textContent = "Mode: " + control.value;
};

control.addEventListener("monster-change", render);
render();<script type="module">import "@schukai/monster/source/components/form/toggle-switch.mjs";

const control = document.getElementById("toggle-switch-custom-demo-run");
const state = document.getElementById("toggle-switch-custom-state-run");
const log = document.getElementById("toggle-switch-custom-log-run");

control.setOption("values.on", "automatic");
control.setOption("values.off", "manual");
control.setOption("labels.toggleSwitchOn", "A");
control.setOption("labels.toggleSwitchOff", "M");
control.setOption("actions.on", () => {
  log.textContent = "Last event: switched to automatic";
});
control.setOption("actions.off", () => {
  log.textContent = "Last event: switched to manual";
});
control.value = "automatic";

const render = () => {
  state.textContent = "Mode: " + control.value;
};

control.addEventListener("monster-change", render);
render();</script>

<div style="display:grid;gap:1rem;max-inline-size:28rem;">
  <monster-toggle-switch id="toggle-switch-custom-demo"></monster-toggle-switch>
  <div style="display:grid;gap:0.5rem;">
    <strong id="toggle-switch-custom-state">Mode: automatic</strong>
    <div id="toggle-switch-custom-log">Last event: initialized</div>
  </div>
</div>

/** no additional stylesheet is defined **/

Component Design

The ToggleSwitch component is implemented using the Shadow DOM to encapsulate its internal structure and styling. By leveraging the shadow root, the component ensures isolation, protecting its layout and behavior from external styles and scripts while maintaining a clean and modular design.

Shadow DOM and Accessibility

Encapsulation through the Shadow DOM ensures that external interference does not alter the component's internal structure. The component is designed to be accessible, supporting semantic structure, keyboard interaction (e.g., space key to toggle), and assistive technologies. This makes the ToggleSwitch user-friendly for all users.

Customizing Through Exported Parts

The ToggleSwitch exposes specific internal elements using exported parts that developers can style using CSS. This allows targeted customization of the switch without compromising its encapsulation.

Available Part Attributes

• control: Represents the container wrapping the entire toggle switch.
• switch: Represents the main switch area, which toggles between states.
• handle: Represents the sliding handle of the switch.

Below is an example of how to use CSS part attributes to customize the ToggleSwitch component:

monster-toggle-switch::part(control) {
    display: inline-block;
    padding: 5px;
    background-color: #f8f8f8;
    border-radius: 6px;
}

monster-toggle-switch::part(switch) {
    width: 50px;
    height: 24px;
    background-color: #d6d6d6;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

monster-toggle-switch::part(handle) {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

monster-toggle-switch::part(switch)[data-monster-state="on"] monster-toggle-switch::part(handle) {
    transform: translateX(26px);
}

Explanation of the Example

• monster-toggle-switch::part(control): Styles the main container with padding and a background.
• monster-toggle-switch::part(switch): Customizes the toggle switch background and dimensions.
• monster-toggle-switch::part(switch)[data-monster-state="on"]: Changes the background color when the switch is toggled on.
• monster-toggle-switch::part(handle): Styles the sliding handle and animates its position when toggled.

Accessibility

The ToggleSwitch component is accessible via keyboard navigation, allowing users to toggle the switch using the Space key. Screen readers can detect the switch's state, providing appropriate feedback. The aria-disabled attribute is automatically managed when the switch is disabled, ensuring compliance with accessibility standards.