Insites Docs Web Components V1Data EntrySwitch

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

 

Events

 

EVENT OBJECT DESCRIPTION
onCheckInsToggleSwitch checked, value Emits switch properties 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.