Toggle Switch


The Toggle Switch in MonsterJS extends CustomControl, providing a rich, customizable switch element. This allows you to select two states for example: on or off / yes or no / active or inactive .

A practical use case would be confirming the terms and conditions on a website by clicking on the Toggle Switch.

Key Features

  • Form Association: Integrates seamlessly with forms with customizable design.
  • Accessibility: Adheres to accessibility standards, ensuring that the control is usable for all users.


The control can be created and used in various ways, including declarative HTML, JavaScript creation, and event handling.

This shows a basic example of creating a select control using HTML.

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

import  "@schukai/monster/source/components/style/style/form.pcss";
import  "@schukai/monster/source/components/style/style/common.pcss";
import  "@schukai/monster/source/components/style/style/color.pcss";
import  "@schukai/monster/source/components/style/style/property.pcss";

// create element
const switch = document.createElement('monster-toggle-switch');

// insert element into the DOM


The following example shows how to use the Toggle Switch in a form.


The following configurations can be made for the component.


There is one template templates.main available for this component.


The Toggle Switch can be set on disabled like every other form element.

Object classes

The options can be used to control which value is to be used for on and which for off.
The default values of the classes are:

<monster-toggle-switch data-monster-option-values-on="true" data-monster-option-values-off="false" ></monster-toggle-switch>

Value init

The standard value of the element is off if it’s not selected.

The value can be changed via the standard attribute value.

<monster-toggle-switch value="on"></monster-toggle-switch>

The value must match the value for on. If this is not the case, the element is disabled.


The component can be translated into different languages. For this you simply have to translate the corresponding labels.

The two different labels of Toggle Switch are using the method.updateI18n().


The toggle switch control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

The following colors are used for the states:

  • “on”: “monster-theme-primary-3”
  • “off”: “monster-theme-primary-2”

The individual parts are shown in the following picture.