Toggle Switch
Overview
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.
Examples
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.
<monster-toggle-switch></monster-toggle-switch>
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
document.getElementById('body').appendChild(switch);
Usage
The following example shows how to use the Toggle Switch in a form.
Configuration
The following configurations can be made for the component.
Defaults
There is one template templates.main available for this component.
Disabled
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:
| state | value |
|---|---|
| true | on |
| false | off |
<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.
I18n
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().
Layout
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.
