Skip to content

Component library

Switch component

Last updated 2 November 2026

Defines a toggle/switch field.

Live demo

<ins-toggle-switch 
  name="sample" 
  Checked
  enabled-label="Toggle switch is enabled"
  disabled-label="Toggle switch is disabled"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-toggle-switch>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
disabled boolean false true, false Disables the field
checked boolean false true, false Make the field checked
input-label string "" any Label shown if enabled-label or disabled-label is defined
enabled-label string "" any Label shown when the switch is enabled
disabled-label string "" any Label shown when the switch is disabled
label string "" any Label shown if enabled-label or disabled-label is not defined
value string "" any Defines the field value
tooltip string "" - Displays a tooltip beside the label. Supports HTML Content
html-description boolean false true, false Enables HTML tags in the description
description string "" any Defines the description value

Events

EVENT OBJECT DESCRIPTION
insToggle checked, value Emits switch properties on change
insValueChange value Emits value on change

Examples

Description Example

<ins-toggle-switch
  label="Description Example"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
</ins-toggle-switch>

Default State

<ins-toggle-switch></ins-toggle-switch>

Selected State

<ins-toggle-switch 
  label="Selected Field" 
  Checked>
</ins-toggle-switch>

Disabled State

<ins-toggle-switch 
  label="Disabled Field" 
  Disabled>
</ins-toggle-switch>

Input Label Attribute

<ins-toggle-switch
  input-label="Switch Input Label"
  enabled-label="Switch Enabled"
  disabled-label="Switch Disabled"
  tooltip="Tooltip for Input Label">
</ins-toggle-switch>

Direct Value Set

<ins-toggle-switch 
  id="directFieldEl">
</ins-toggle-switch>

<script>
  var label = "Set Data";
  var value = "Data";
  var field = document.getElementById('directFieldEl');
  field.addEventListener('didLoad', function(e) {
    field.name = name;
    field.label = label;
    field.checked = true;
  });
</script>

Events

<ins-toggle-switch 
  id="eventFieldEl" 
  label="Toggle" 
  value="Toggle Value">
</ins-toggle-switch>

<script>
  let field = document.getElementById('eventFieldEl');
  field.addEventListener('onCheckInsToggleSwitch', event => {
    var event = event.detail;
    console.log("Toggle event", event);
    alert("Check console log for event data");
  });
</script>