SwitchButton — Smart UI JavaScript API

SwitchButton — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SwitchButton - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-switch-button id="demo-switchbutton"></smart-switch-button>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.switchbutton.js';

    const el = document.getElementById('demo-switchbutton');
    if (el) {

      el.checked = true;
      el.onLabel = 'ON';
      el.offLabel = 'OFF';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: SwitchButton   Framework: JavaScript   Selector: smart-switch-button

API counts: 21 properties, 0 methods, 3 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: n/a

Common events: change, checkValue, uncheckValue

Module hint: smart-webcomponents/source/modules/smart.switchbutton.js

A Switch represents a button with two states, on and off. Switches are most often used on mobile devices to enable and disable options.

Class

SwitchButton

SwitchButton

A Switch represents a button with two states, on and off. Switches are most often used on mobile devices to enable and disable options.

Selector

smart-switch-button

Quick picks

changedisabledvalue

Properties

AanimationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. For other valid values, the corresponding animation effects will be enabled according to the specified mode.
CcheckedSets the check state to indicate whether the item is checked, unchecked, or indeterminate; or retrieves the current check state of the item.
CclickModeSpecifies how the switch button responds to user interaction when the switchMode is set to 'click'. This property determines the exact mouse action that triggers a change in the switch’s state: press – The switch state changes immediately when the mouse button is pressed down (mousedown event). release – The switch state changes only when the mouse button is released (mouseup event), after a complete click. pressAndRelease – The switch state changes on mousedown, and automatically reverts to the original state on mouseup.Note: This property is effective only when switchMode is set to 'click'.
DdisabledControls whether the ratio button is displayed and can be interacted with by the user. Set to true to show and enable the button, or false to hide or disable it.
FfalseContentDefines the text label or string that will be displayed when the checked property is set to false, representing the unchecked state of the component or element.
FfalseTemplateDefines a custom template that is displayed when the component is in the false state. This template allows you to specify the content or layout shown when the evaluated condition is false.
IindeterminateControls whether the switch is in an indeterminate state or retrieves its current indeterminate status. When set to true, the switch appears visually distinct to indicate that its state is neither clearly on nor off. This is typically used to represent a partial or mixed selection.
IinvertedSpecifies the direction in which the switch toggles between states. If set to true, the positions of the switch states are inverted, meaning the ON and OFF positions are swapped.
LlocaleSpecifies or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for message localization when working with the messages property. Setting this value ensures the corresponding localized messages are displayed or accessed appropriately.
LlocalizeFormatFunctionCallback function associated with the localization module. This callback is invoked whenever localization-related events occur, such as changes in language, region settings, or translation updates. It enables the module to respond dynamically to localization changes in the application.
MmessagesDefines an object that maps password strength states (e.g., weak, medium, strong) to their corresponding string values or messages. This allows for customized labels or feedback to be displayed to users based on the evaluated password strength.
NnameRetrieves the current name of the widget or assigns a new name to the widget. This property can be used to identify or reference the widget programmatically.
OorientationSpecifies the layout direction of the switch component, determining whether it is displayed horizontally or vertically. Use this property to control how the switch and its label are arranged within the user interface.
RreadonlyWhen the custom element is set to readonly, users will not be able to modify its content or trigger any interactive behaviors such as editing, selecting, or submitting data through the element. However, the element remains visible and its value can still be programmatically accessed or updated by scripts.
SswitchModeConfigures how users can interact with the switch element to change its state. The switchMode property accepts the following options: default – The switch state can be toggled either by dragging the thumb (the movable part of the switch) or by clicking anywhere within the track (the switch’s background area). click – The switch state changes only when a user clicks inside the track. Dragging the thumb does not affect the state. drag – The switch state changes solely by dragging the thumb. Clicking on the track has no effect. none – The switch cannot be toggled by any user interaction. Its state can only be changed programmatically through the API.
TthemeSpecifies the theme for the element, which controls its overall visual appearance—including colors, fonts, and style. Selecting a theme customizes how the element is presented to users, ensuring consistency with the application's design.
TtrueContentSpecifies the text label or value that will be displayed when the checked property is set to true. This text represents the state of the component when it is selected or activated.
TtrueTemplateDefines a custom template to display when the state is true, allowing you to specify how content should appear in this condition.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using the Tab key or other keyboard navigation methods.
UunlockKeyRetrieves or assigns the unlockKey value, which serves as a credential to enable access to the product’s locked features or functionality.
VvalueSets a new value for the widget or retrieves its current value. Use this to programmatically update what the widget displays or to access the user's input.

Events

CchangeThis event is triggered whenever the widget's state changes between checked and unchecked, such as when a user selects or deselects it. The event provides updated information about the new checked state of the widget.
CcheckValueThis event is triggered whenever the widget transitions to a checked state, such as when a user selects, activates, or toggles the widget to indicate it is checked. It allows developers to execute custom logic in response to changes in the widget's checked status.
UuncheckValueThis event is triggered whenever the user unchecks the widget, indicating a change from a checked (selected) state to an unchecked (deselected) state. This allows you to execute custom logic in response to the widget being deselected.

Properties

animationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. For other valid values, the corresponding animation effects will be enabled according to the specified mode."none" | "simple" | "advanced"

Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. For other valid values, the corresponding animation effects will be enabled according to the specified mode.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-switch-button animation="none"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-switch-button');
const animation = el.animation;

checkedSets the check state to indicate whether the item is checked, unchecked, or indeterminate; or retrieves the current check state of the item.boolean

Sets the check state to indicate whether the item is checked, unchecked, or indeterminate; or retrieves the current check state of the item.

Default value

false
Try a demo showcasing the checked property.

Examples

Markup and runtime examples for checked:

HTML attribute:

<smart-switch-button checked></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.checked = false;

Read the current value:

const el = document.querySelector('smart-switch-button');
const checked = el.checked;

clickModeSpecifies how the switch button responds to user interaction when the switchMode is set to 'click'. This property determines the exact mouse action that triggers a change in the switch’s state: press – The switch state changes immediately when the mouse button is pressed down (mousedown event). release – The switch state changes only when the mouse button is released (mouseup event), after a complete click. pressAndRelease – The switch state changes on mousedown, and automatically reverts to the original state on mouseup.Note: This property is effective only when switchMode is set to 'click'."press" | "release" | "pressAndRelease"

Specifies how the switch button responds to user interaction when the switchMode is set to 'click'. This property determines the exact mouse action that triggers a change in the switch’s state:



press – The switch state changes immediately when the mouse button is pressed down (mousedown event).


release – The switch state changes only when the mouse button is released (mouseup event), after a complete click.


pressAndRelease – The switch state changes on mousedown, and automatically reverts to the original state on mouseup.


Note: This property is effective only when switchMode is set to 'click'.

Default value

"release"

Examples

Markup and runtime examples for clickMode:

HTML:

<smart-switch-button click-mode="press"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.clickMode = "pressAndRelease";

Read the current value:

const el = document.querySelector('smart-switch-button');
const clickMode = el.clickMode;

disabledControls whether the ratio button is displayed and can be interacted with by the user. Set to true to show and enable the button, or false to hide or disable it.boolean

Controls whether the ratio button is displayed and can be interacted with by the user. Set to true to show and enable the button, or false to hide or disable it.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-switch-button disabled></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-switch-button');
const disabled = el.disabled;

falseContentDefines the text label or string that will be displayed when the checked property is set to false, representing the unchecked state of the component or element.string

Defines the text label or string that will be displayed when the checked property is set to false, representing the unchecked state of the component or element.

Default value

""""

Examples

Markup and runtime examples for falseContent:

HTML:

<smart-switch-button false-content="OFF"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.falseContent = "False";

Read the current value:

const el = document.querySelector('smart-switch-button');
const falseContent = el.falseContent;

falseTemplateDefines a custom template that is displayed when the component is in the false state. This template allows you to specify the content or layout shown when the evaluated condition is false.any

Defines a custom template that is displayed when the component is in the false state. This template allows you to specify the content or layout shown when the evaluated condition is false.

Try a demo showcasing the falseTemplate property.

Examples

Markup and runtime examples for falseTemplate:

HTML:

<smart-switch-button false-template="templateId1"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.falseTemplate = "templateId2";

Read the current value:

const el = document.querySelector('smart-switch-button');
const falseTemplate = el.falseTemplate;

indeterminateControls whether the switch is in an indeterminate state or retrieves its current indeterminate status. When set to true, the switch appears visually distinct to indicate that its state is neither clearly on nor off. This is typically used to represent a partial or mixed selection.boolean

Controls whether the switch is in an indeterminate state or retrieves its current indeterminate status. When set to true, the switch appears visually distinct to indicate that its state is neither clearly on nor off. This is typically used to represent a partial or mixed selection.

Default value

false

Examples

Markup and runtime examples for indeterminate:

HTML attribute:

<smart-switch-button indeterminate></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.indeterminate = false;

Read the current value:

const el = document.querySelector('smart-switch-button');
const indeterminate = el.indeterminate;

invertedSpecifies the direction in which the switch toggles between states. If set to true, the positions of the switch states are inverted, meaning the ON and OFF positions are swapped.boolean

Specifies the direction in which the switch toggles between states. If set to true, the positions of the switch states are inverted, meaning the ON and OFF positions are swapped.

Default value

false

Examples

Markup and runtime examples for inverted:

HTML attribute:

<smart-switch-button inverted></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.inverted = false;

Read the current value:

const el = document.querySelector('smart-switch-button');
const inverted = el.inverted;

localeSpecifies or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for message localization when working with the messages property. Setting this value ensures the corresponding localized messages are displayed or accessed appropriately.string

Specifies or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for message localization when working with the messages property. Setting this value ensures the corresponding localized messages are displayed or accessed appropriately.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-switch-button locale="de"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-switch-button');
const locale = el.locale;

localizeFormatFunctionCallback function associated with the localization module. This callback is invoked whenever localization-related events occur, such as changes in language, region settings, or translation updates. It enables the module to respond dynamically to localization changes in the application.function | null

Callback function associated with the localization module. This callback is invoked whenever localization-related events occur, such as changes in language, region settings, or translation updates. It enables the module to respond dynamically to localization changes in the application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-switch-button localize-format-function="function(){return '...'}"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.localizeFormatFunction = "function(){return '...'}";

Read the current value:

const el = document.querySelector('smart-switch-button');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines an object that maps password strength states (e.g., weak, medium, strong) to their corresponding string values or messages. This allows for customized labels or feedback to be displayed to users based on the evaluated password strength.object

Defines an object that maps password strength states (e.g., weak, medium, strong) to their corresponding string values or messages. This allows for customized labels or feedback to be displayed to users based on the evaluated password strength.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-switch-button messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Read the current value:

const el = document.querySelector('smart-switch-button');
const messages = el.messages;

nameRetrieves the current name of the widget or assigns a new name to the widget. This property can be used to identify or reference the widget programmatically.string

Retrieves the current name of the widget or assigns a new name to the widget. This property can be used to identify or reference the widget programmatically.

Default value

""""
Try a demo showcasing the name property.

Examples

Markup and runtime examples for name:

HTML:

<smart-switch-button name="Name"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.name = "New Name";

Read the current value:

const el = document.querySelector('smart-switch-button');
const name = el.name;

orientationSpecifies the layout direction of the switch component, determining whether it is displayed horizontally or vertically. Use this property to control how the switch and its label are arranged within the user interface."horizontal" | "vertical"

Specifies the layout direction of the switch component, determining whether it is displayed horizontally or vertically. Use this property to control how the switch and its label are arranged within the user interface.

Default value

"horizontal"
Try a demo showcasing the orientation property.

Examples

Markup and runtime examples for orientation:

HTML:

<smart-switch-button orientation="vertical"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.orientation = "horizontal";

Read the current value:

const el = document.querySelector('smart-switch-button');
const orientation = el.orientation;

readonlyWhen the custom element is set to readonly, users will not be able to modify its content or trigger any interactive behaviors such as editing, selecting, or submitting data through the element. However, the element remains visible and its value can still be programmatically accessed or updated by scripts.boolean

When the custom element is set to readonly, users will not be able to modify its content or trigger any interactive behaviors such as editing, selecting, or submitting data through the element. However, the element remains visible and its value can still be programmatically accessed or updated by scripts.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-switch-button readonly></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.readonly = false;

Read the current value:

const el = document.querySelector('smart-switch-button');
const readonly = el.readonly;

switchModeConfigures how users can interact with the switch element to change its state. The switchMode property accepts the following options: default – The switch state can be toggled either by dragging the thumb (the movable part of the switch) or by clicking anywhere within the track (the switch’s background area). click – The switch state changes only when a user clicks inside the track. Dragging the thumb does not affect the state. drag – The switch state changes solely by dragging the thumb. Clicking on the track has no effect. none – The switch cannot be toggled by any user interaction. Its state can only be changed programmatically through the API."default" | "click" | "drag" | "none"

Configures how users can interact with the switch element to change its state. The switchMode property accepts the following options:



default – The switch state can be toggled either by dragging the thumb (the movable part of the switch) or by clicking anywhere within the track (the switch’s background area).


click – The switch state changes only when a user clicks inside the track. Dragging the thumb does not affect the state.


drag – The switch state changes solely by dragging the thumb. Clicking on the track has no effect.


none – The switch cannot be toggled by any user interaction. Its state can only be changed programmatically through the API.

Default value

"default"

Examples

Markup and runtime examples for switchMode:

HTML:

<smart-switch-button switch-mode="click"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.switchMode = "drag";

Read the current value:

const el = document.querySelector('smart-switch-button');
const switchMode = el.switchMode;

themeSpecifies the theme for the element, which controls its overall visual appearance—including colors, fonts, and style. Selecting a theme customizes how the element is presented to users, ensuring consistency with the application's design.string

Specifies the theme for the element, which controls its overall visual appearance—including colors, fonts, and style. Selecting a theme customizes how the element is presented to users, ensuring consistency with the application's design.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-switch-button theme="blue"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-switch-button');
const theme = el.theme;

trueContentSpecifies the text label or value that will be displayed when the checked property is set to true. This text represents the state of the component when it is selected or activated.string

Specifies the text label or value that will be displayed when the checked property is set to true. This text represents the state of the component when it is selected or activated.

Default value

""""

Examples

Markup and runtime examples for trueContent:

HTML:

<smart-switch-button true-content="ON"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.trueContent = "True";

Read the current value:

const el = document.querySelector('smart-switch-button');
const trueContent = el.trueContent;

trueTemplateDefines a custom template to display when the state is true, allowing you to specify how content should appear in this condition.string

Defines a custom template to display when the state is true, allowing you to specify how content should appear in this condition.

Default value

"null"
Try a demo showcasing the trueTemplate property.

Examples

Markup and runtime examples for trueTemplate:

HTML:

<smart-switch-button true-template="templateId1"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.trueTemplate = "templateId2";

Read the current value:

const el = document.querySelector('smart-switch-button');
const trueTemplate = el.trueTemplate;

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using the Tab key or other keyboard navigation methods.boolean

When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using the Tab key or other keyboard navigation methods.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-switch-button unfocusable></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-switch-button');
const unfocusable = el.unfocusable;

unlockKeyRetrieves or assigns the unlockKey value, which serves as a credential to enable access to the product’s locked features or functionality.string

Retrieves or assigns the unlockKey value, which serves as a credential to enable access to the product’s locked features or functionality.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-switch-button unlock-key=""></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-switch-button');
const unlockKey = el.unlockKey;

valueSets a new value for the widget or retrieves its current value. Use this to programmatically update what the widget displays or to access the user's input.string

Sets a new value for the widget or retrieves its current value. Use this to programmatically update what the widget displays or to access the user's input.

Default value

""""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-switch-button value="Value"></smart-switch-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-switch-button');
el.value = "New Value";

Read the current value:

const el = document.querySelector('smart-switch-button');
const value = el.value;

Events

changeThis event is triggered whenever the widget's state changes between checked and unchecked, such as when a user selects or deselects it. The event provides updated information about the new checked state of the widget.CustomEvent

This event is triggered whenever the widget's state changes between checked and unchecked, such as when a user selects or deselects it. The event provides updated information about the new checked state of the widget.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.value - A boolean value indicating the new state of the button ( checked or not ).
ev.detail.oldValue - A boolean value indicating the previous state of the button ( checked or not ).
ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-switch-button')?.addEventListener('change', (event) => {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue,
        changeType = detail.changeType;

	// event handling code goes here.
})

checkValueThis event is triggered whenever the widget transitions to a checked state, such as when a user selects, activates, or toggles the widget to indicate it is checked. It allows developers to execute custom logic in response to changes in the widget's checked status.CustomEvent

This event is triggered whenever the widget transitions to a checked state, such as when a user selects, activates, or toggles the widget to indicate it is checked. It allows developers to execute custom logic in response to changes in the widget's checked status.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCheckValue

Arguments

evCustomEvent
ev.detailObject
ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for checkValue using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-switch-button')?.addEventListener('checkValue', (event) => {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})

uncheckValueThis event is triggered whenever the user unchecks the widget, indicating a change from a checked (selected) state to an unchecked (deselected) state. This allows you to execute custom logic in response to the widget being deselected.CustomEvent

This event is triggered whenever the user unchecks the widget, indicating a change from a checked (selected) state to an unchecked (deselected) state. This allows you to execute custom logic in response to the widget being deselected.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUncheckValue

Arguments

evCustomEvent
ev.detailObject
ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for uncheckValue using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-switch-button')?.addEventListener('uncheckValue', (event) => {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})

CSS Variables

--smart-switch-button-default-widthvar()

Default value

"calc(var(--smart-editor-height) + 10px)"

Default width of the SwitchButton.

--smart-switch-button-default-heightvar()

Default value

"var(--smart-editor-height)"

smartSwitchButton default height

--smart-switch-button-thumb-sizevar()

Default value

"calc(var(--smart-switch-button-default-height) - 8px)"

smartSwitchButton thumb size