Switch

Last updated on August 02, 2024.

Element: <ins-toggle-switch>

Defines a toggle/switch field.

Complete Example

Code Snippet

<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>

Default State

Code Snippet

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

Selected State

Code Snippet

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

Disabled State

Code Snippet

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

Direct Value Set

Code Snippet

<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

Code Snippet

<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>

Attributes

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

Events

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

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.