Check Button

Examples

Label

You can set the Check Button’s label using the label attribute

Component

Vanilla JS

    <tpg-check-button
      label="Check Button"
    ></tpg-check-button>

React

    <tpg-check-button
      label="Check Button"
    ></tpg-check-button>

Position

You can control the position of each individual Check Button using the position attribute.

These values affect the styling of the button’s border, typically to visually group buttons together. If no position is set, the button defaults to default.

Component

Vanilla JS

    <tpg-check-button
      label="default"
    ></tpg-check-button>
    <tpg-check-button
      position="left"
      label="left"
    ></tpg-check-button>
    <tpg-check-button
      position="middle"
      label="middle"
    ></tpg-check-button>
    <tpg-check-button
      position="right"
      label="right"
    ></tpg-check-button>

React

    <tpg-check-button
      label="default"
    ></tpg-check-button>
    <tpg-check-button
      position="left"
      label="left"
    ></tpg-check-button>
    <tpg-check-button
      position="middle"
      label="middle"
    ></tpg-check-button>
    <tpg-check-button
      position="right"
      label="right"
    ></tpg-check-button>

States

The Check Button is enabled by default, but it can be set to disabled or read-only using the corresponding attributes.

Component

Vanilla JS

    <tpg-check-button
      label="Default"
    ></tpg-check-button>

    <tpg-check-button
      read-only
      label="Read only"
    ></tpg-check-button>

    <tpg-check-button
      disabled
      label="Disabled"
    ></tpg-check-button>

React

    <tpg-check-button
      label="Default"
    ></tpg-check-button>

    <tpg-check-button
      readOnly
      label="Read only"
    ></tpg-check-button>

    <tpg-check-button
      disabled
      label="Disabled"
    ></tpg-check-button>

Icons

You can use the icon-template attribute to set an icon for the Check Button.

This can also be combined with the icon-position attribute to set its position

Component

Vanilla JS

<tpg-check-button
  class="has-placeholder-icon"
  label="Leading icon"
></tpg-check-button>

<tpg-check-button
  class="has-placeholder-icon"
  icon-position="top"
  label="Top icon"
></tpg-check-button>

<script>
  const checkButtons = document.querySelectorAll('tpg-check-button.has-placeholder-icon');

  for (const elem of checkButtons)  {
    const button = elem as CheckButton;
    button.iconTemplate = tpgIconPlaceholderCustom;
  }
</script>

React

    <tpg-check-button
      iconTemplate={tpgIconPlaceholderCustom}
      iconPosition="leading"
      label="Leading icon"
    ></tpg-check-button>
    <tpg-check-button
      iconTemplate={tpgIconPlaceholderCustom}
      iconPosition="top"
      label="Top icon"
    ></tpg-check-button>

Badge

The Check Button includes a dedicated badge slot. To display a badge within the button, place a Badge component in this slot using slot="badge".

Read more about badges here

Component

Vanilla JS

    <tpg-check-button>
        <tpg-badge
          slot="badge"
          label="Slotted badge"
        ></tpg-badge>
    </tpg-check-button>

React

    <tpg-check-button>
      <tpg-badge
        slot="badge"
        label="Slotted badge"
      ></tpg-badge>
    </tpg-check-button>

Size

You can control the Check Button’s size using the size attribute

Component

Vanilla JS

    <tpg-check-button size="regular" label="Regular check button"></tpg-check-button>
    <tpg-check-button size="small" label="Small check button"></tpg-check-button>

React

    <tpg-check-button size="regular" label="Regular check button"></tpg-check-button>
    <tpg-check-button size="small" label="Small check button"></tpg-check-button>

Selected

The Check Button is toggleable, and its state can be set using the selected attribute. As the component is controlled, you will need to catch the dispatched event in order to change its state. You can see an example of how this is done here

To define its initial state, simply include the selected attribute when writing the element

Component

Vanilla JS

    <tpg-check-button
      selected
      label="Selected"
    ></tpg-check-button>

    <tpg-check-button
      label="Not selected"
    ></tpg-check-button>

React

    <tpg-check-button
      selected
      label="Selected"
    ></tpg-check-button>

    <tpg-check-button
      label="Not selected"
    ></tpg-check-button>

Event handling

The Check Button emits a TpgInputEvent when clicked. Below is an example of how you would catch this event and toggle the Check Button’s state

Component

Vanilla JS

<tpg-check-button
  size="regular"
  class="toggleable-check-button"
  label="Toggleable Check Button"
></tpg-check-button>

<tpg-check-button
  size="regular"
  class="toggleable-check-button"
  label="Toggleable Check Button"
></tpg-check-button>

<script>
  document.addEventListener('DOMContentLoaded', ()=>{
      const buttons = document.querySelectorAll('tpg-check-button.toggleable-check-button');
      for (const button of buttons) {
          button.addEventListener("tpg-input", (e) => {
              e.target.selected = e.value
          });
      }
  });
</script>

React

// Inline
<tpg-check-button
  label="Toggleable Check Button"
  ontpg-input={(e: TpgInputEvent<boolean>) => {
    const checkButton = e.target as CheckButton;
    const selected = e?.value;
    if (checkButton && typeof selected === 'boolean'){
      checkButton.selected = selected;
    }
  }}></tpg-check-button>

// Function call
function handleCheckInput(e: TpgInputEvent<boolean>) {
  const checkButton = e.target as CheckButton;
  const selected = e?.value;

  if (checkButton && typeof selected === 'boolean') {
    checkButton.selected = selected;
  }
}

<tpg-check-button
  label="Toggleable Check Button"
  ontpg-input={
    (e: TpgInputEvent<boolean>) => handleCheckInput(e)
  }></tpg-check-button>

Component behavior

Check Buttons are used to interact with a Logic Group or matrix of related options, and are never to be used in alone. They allow to select and activate one or more options at a time.

In a Logic Group, the Position variants (Left, Middle, Right) should be used to visually group the content together.

The check button, although it looks similar to Radio Button Item, is not made to be nested into an overarching group. Check buttons emits tpg-input events individually, and can be used in standalone positioning (default), or can be joined together into horizontal rows. In the latter configuration, styling of the row is up to the consumer, but wrapping them in a flex container is recommended, as shown in the examples.

Tables

Properties

Attribute	Property	Description	Type	Default Value
disabled	disabled	Works the same as the standard HTML property, boolean.	boolean	false
icon-template	iconTemplate	Sets the icon of the button, takes a URI-encoded SVG.	IconConstant | ''	''
icon-position	iconPosition	Sets the icon's position.	'leading' | 'top'	'leading'
label	label	The textual label on the button. Only shown if `iconOnly` is not set.	string	''
position	position	The relative position that the button _has been_ placed in within a horizontal group. This property governs the styling of the edges of the button, but does not in any way move the button around. The 'default' position styles the button as standing alone without a group. Use this position if using it by itself.	'left' | 'middle' | 'right' | 'default'	'default'
read-only	readOnly	Works the same as the standard HTML property, boolean.	boolean	false
selected	selected	Sets the button's toggled state.	boolean	false
size	size	The size of the button.	'regular' | 'small'	'regular'
form-associated	formAssociated		boolean	true
name	name	name property for use in conjunction with html forms	string

Events

Event name	Reactjs attribute	Description
tpg-input	ontpg-input	event emitted on clicking the button. It's value is the inverse of the button's current selected state, simply pass this back into the button to toggle it as part of handling the event.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
badge	Slot reserved for a tpg-badge component. Document as much as possible with JSDoc

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox