Checkbox

<tpg-checkbox></tpg-checkbox>

Checkboxes are generally used for state marking of one or more items from a set; which should work in conjunction with submit operation. State marking both includes selection and activation.

They have three visual states:

• Unchecked: when item is not checked
• Checked: when item is checked
• Indeterminate: some (not all) child items are checked

Component behavior

The checkbox will respond to clicks or presses inside the entirety of its area, which takes up all horizontal space available by default. To customize this, one can handle it in the same fashion as for the Primary button.

The component also toggles from keyboard presses of either space or enter while focused.

Examples

Component

Vanilla JS

  <div style="display:flex; flex-direction: column;">
      <tpg-checkbox label="Default" />
      <tpg-checkbox label="Checked" checked />
      <tpg-checkbox label="Indeterminate" indeterminate />
      <tpg-checkbox label="Disabled" disabled />
  </div>

  <div style='display: flex;'>
      <tpg-checkbox
        label='Text'
      ></tpg-checkbox>
      <tpg-checkbox
        label='Text'
      ></tpg-checkbox>
      <tpg-checkbox
        label='Text'
      ></tpg-checkbox>
  </div>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const buttons = document.querySelectorAll('tpg-checkbox');
          for (const button of buttons) {
              button.addEventListener("tpg-change", (e) => {
                  e.target.indeterminate = false;
                  e.target.checked = e.value;
              });
          }
      });
  </script>

React

    <div style={{ display: "flex", flexDirection: "column" }}>
      <tpg-checkbox
        label="Default"
        ontpg-change={(e) => {
          (e.target as Checkbox).indeterminate = false;
          (e.target as Checkbox).checked = e.value!;
        }}
      ></tpg-checkbox>
      <tpg-checkbox
        label="Checked"
        checked
        ontpg-change={(e) => {
          (e.target as Checkbox).indeterminate = false;
          (e.target as Checkbox).checked = e.value!;
        }}
      ></tpg-checkbox>
      <tpg-checkbox
        label="Indeterminate"
        indeterminate
        ontpg-change={(e) => {
          (e.target as Checkbox).indeterminate = false;
          (e.target as Checkbox).checked = e.value!;
        }}
      ></tpg-checkbox>
      <tpg-checkbox
        label="Disabled"
        disabled
        ontpg-change={(e) => {
          (e.target as Checkbox).indeterminate = false;
          (e.target as Checkbox).checked = e.value!;
        }}
      ></tpg-checkbox>
    </div>

    <div style={{ display: "flex" }}>
      <tpg-checkbox
        label="Text"
        ontpg-change={(e) => {
          (e.target as Checkbox).indeterminate = false;
          (e.target as Checkbox).checked = e.value!;
        }}
      ></tpg-checkbox>
      <tpg-checkbox
        label="Text"
        ontpg-change={(e) => {
          (e.target as Checkbox).indeterminate = false;
          (e.target as Checkbox).checked = e.value!;
        }}
      ></tpg-checkbox>
      <tpg-checkbox
        label="Text"
        ontpg-change={(e) => {
          (e.target as Checkbox).indeterminate = false;
          (e.target as Checkbox).checked = e.value!;
        }}
      ></tpg-checkbox>
    </div>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	The textual label of the checkbox element	string	''
disabled	disabled	Works just like 'disabled' from vanilla HTML	boolean	false
checked	checked	Sets the state of the checkbox	boolean	false
indeterminate	indeterminate	If set, the checkbox will visually indicate an indeterminate state. Has no bearing on the checked state. This attribute must be separately controlled to respond correctly to user interaction.	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 checkbox 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