Switch

<tpg-switch></tpg-switch>

Switch is a Selection control component that allows the user needs to toggle a single item on or off

The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

Furthermore, Switches are also different from Check Buttons, the latter are also used in state marking but usually in forms and task-oriented workflows

Component behavior

The switch will respond to click inside the entirety of its area while not disabled, or from “Enter” and “Space” keys while having k-focus.

Examples

Switch states

label

Use the label attribute to give the switch a label

Component

Vanilla JS

  <tpg-switch label="Im an unselected switch"></tpg-switch>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const switches = document.querySelectorAll('tpg-switch');
          for (const s of switches) {
              s.addEventListener("tpg-change", (e) => {
                  e.target.selected = e.value;
              });
          }
      });
  </script>

React

    <tpg-switch
      label="Im an unselected switch"
      ontpg-change={(e) => ((e.target as Switch).selected = e.value!)}
    ></tpg-switch>

label-position

Use the label-position attribute to decide the label’s position (trailing or leading). Default is leading

Component

Vanilla JS

  <tpg-switch
      label="Im an unselected switch"
      label-position="leading"
  ></tpg-switch>
  <tpg-switch
      label="Im an unselected switch"
      label-position="trailing"
  ></tpg-switch>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const switches = document.querySelectorAll('tpg-switch');
          for (const s of switches) {
              s.addEventListener("tpg-change", (e) => {
                  e.target.selected = e.value;
              });
          }
      });
  </script>

React

    <tpg-switch
      label="Im an unselected switch"
      labelPosition="leading"
      ontpg-change={(e) => ((e.target as Switch).selected = e.value!)}
    ></tpg-switch>
    <tpg-switch
      label="Im an unselected switch"
      labelPosition="trailing"
      ontpg-change={(e) => ((e.target as Switch).selected = e.value!)}
    ></tpg-switch>

selected

Use the selected attribute to set the switch’s selected state

Component

Vanilla JS

  <tpg-switch label="Im an unselected switch"></tpg-switch>
  <tpg-switch label="Im an selected switch" selected></tpg-switch>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const switches = document.querySelectorAll('tpg-switch');
          for (const s of switches) {
              s.addEventListener("tpg-change", (e) => {
                  e.target.selected = e.value;
              });
          }
      });
  </script>

React

    <tpg-switch
      label="Im an unselected switch"
      ontpg-change={(e) => ((e.target as Switch).selected = e.value!)}
    ></tpg-switch>
    <tpg-switch
      label="Im an selected switch"
      selected
      ontpg-change={(e) => ((e.target as Switch).selected = e.value!)}
    ></tpg-switch>

disabled

Use the disabled attribute to disable the switch

Component

Code

  <tpg-switch
      label="Im an unselected disabled switch"
      disabled
  ></tpg-switch>
  <tpg-switch
      label="Im an selected disabled switch"
      selected
      disabled
  ></tpg-switch>

read-only

Use the read-only attribute to make the switch read only.

Component

Vanilla JS

  <tpg-switch
      label="Im an unselected read only switch"
      read-only
  ></tpg-switch>
  <tpg-switch
      label="Im an selected read only switch"
      selected
      read-only
  ></tpg-switch>

React

    <tpg-switch
      label="Im an unselected read only switch"
      readOnly
    ></tpg-switch>
    <tpg-switch
      label="Im an selected read only switch"
      selected
      readOnly
    ></tpg-switch>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	The textual label of the switch	string	''
disabled	disabled	Disables the switch, just like vanilla HTML	boolean	false
read-only	readOnly	Makes the switch read-only	boolean	false
selected	selected	Sets the state of the switch, selected or not	boolean	false
label-position	labelPosition	The position of the label, relative to the switch graphic	'leading' | 'trailing'	'leading'
form-associated	formAssociated		boolean	true
name	name	name property for use in conjunction with html forms	string

Events

Event name	Reactjs attribute	Description
tpg-change	ontpg-change	Event fired when switch state should change

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox