Skip to content

Switch List

<tpg-switch-list></tpg-switch-list>

Switch Lists are the preferred way to adjust settings. They’re used to control binary options – think On/Off or True/False.

Use switches to:

Toggle a single item on or off
Immediately activate or deactivate something

The switch labels should describe what the control will do when the switch is on. Concise, positive wording is preferred, avoid negative or ambiguous toggle text like “Disable email notifications.”

Switch Lists are always be paired with an inline label describing the option that the switch controls, as well an optional Badge to communicate its state.

Component behavior

The switch list will respond to click on the switch while not disabled or readonly, or from “Enter” and “Space” keys while having k-focus.

Examples

Switch list (Text variant)

  <div style="display: flex; flex-direction: column; gap: 1rem;">
      <tpg-switch-list
          label="Primary label"
          secondary-label="Enabled"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
      <tpg-switch-list
          read-only
          label="Primary label"
          secondary-label="Read Only"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
      <tpg-switch-list
          disabled
          label="Primary label"
          secondary-label="Disabled"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
      <tpg-switch-list
          type="danger"
          label="Danger!"
          secondary-label="Enabled"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
  </div>

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

    <div
      style={{
          display: "flex",
          flexDirection: "column",
          gap: "1rem"
      }}
    >
      <tpg-switch-list
        label="Primary label"
        secondaryLabel="Enabled"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
      <tpg-switch-list
        read-only
        label="Primary label"
        secondaryLabel="Read Only"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
      <tpg-switch-list
        disabled
        label="Primary label"
        secondaryLabel="Disabled"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
      <tpg-switch-list
        type="danger"
        label="Danger!"
        secondaryLabel="Enabled"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
    </div>

Switch list (Badge variant)

  <div style="display: flex; flex-direction: column; gap: 1rem;">
      <tpg-switch-list
          switch-type="badge"
          label="Primary label"
          selected
          secondary-label="Enabled"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
      <tpg-switch-list
          switch-type="badge"
          read-only
          selected
          label="Primary label"
          secondary-label="Read Only"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
      <tpg-switch-list
          switch-type="badge"
          disabled
          selected
          label="Primary label"
          secondary-label="Disabled"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
      <tpg-switch-list
          switch-type="badge"
          type="danger"
          label="Danger!"
          selected
          secondary-label="Enabled"
          secondary-label-uom="UOM"
      ></tpg-switch-list>
  </div>

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

    <div
      style={{
          display: "flex",
          flexDirection: "column",
          gap: "1rem"
      }}
    >
      <tpg-switch-list
        switch-type="badge"
        label="Primary label"
        selected
        secondaryLabel="Enabled"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
      <tpg-switch-list
        switch-type="badge"
        readOnly
        selected
        label="Primary label"
        secondaryLabel="Read Only"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
      <tpg-switch-list
        switch-type="badge"
        disabled
        selected
        label="Primary label"
        secondaryLabel="Disabled"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
      <tpg-switch-list
        switch-type="badge"
        type="danger"
        label="Danger!"
        selected
        secondaryLabel="Enabled"
        secondaryLabelUom="UOM"
        ontpg-change={(e) => ((e.target as SwitchList).selected = e.value!)}
      ></tpg-switch-list>
    </div>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	Label text should describe what will happen when the switch is on.	string	''
read-only	readOnly	If true, the switch will be read-only.	boolean	false
disabled	disabled	If true, the switch will be disabled.	boolean	false
switch-type	switchType	Choose if primary text should be a regular html label or a badge.	'badge' \| 'text'	'text'
secondary-label	secondaryLabel	Secondary text, rendered as a badge.	string	''
secondary-label-uom	secondaryLabelUom	The UOM following the secondary text. Useless if used alone.	string	''
type	type	The type of badge to render in terms of severity-level. If switchType is 'badge', will apply to primary Text. Otherwise applies to secondary text/badge.	\| 'neutral' \| 'ghost' \| 'not-classified' \| 'classified' \| 'dynamic' \| 'accent' \| 'ok' \| 'error' \| 'warning' \| 'danger'	'neutral'
selected	selected	Sets the state of the switch, selected or not	boolean	false
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 changes.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox