Radio Button Group

Radio Button Groups are used to interact with a row of related options.

They are made of equally wide Radio Button Items and, allow to select and activate only one option at a time. A group can only have one row.

Examples

The radio button group takes the form of a horizontal bar of buttons, of which only a single one can be toggled at any one time:

The buttons can have icons and badges as additional elements, and can also be icon-only without a label at all. See Radio Button Item for all available attributes.

Note that when slottet into a group, the position attribute of the item is unnecessary, as the group controls this.

Component

Vanilla JS

        <tpg-radio-button-group
          selected-value="1"
        >
          <tpg-radio-button-item
            class="has-placeholder-icon"
            value="1"
            label="one"
          ></tpg-radio-button-item>
          <tpg-radio-button-item
            class="has-placeholder-icon"
            value="2"
            icon-position="top"
            label="two"
          ></tpg-radio-button-item>
          <tpg-radio-button-item
            value="3"
            class="has-placeholder-icon"
          >
            <tpg-badge slot="badge" label="Text"></tpg-badge>
          </tpg-radio-button-item>
        </tpg-radio-button-group>

        <tpg-radio-button-group
          selectedValue="1"
        >
          <tpg-radio-button-item
            value="1"
            size="small"
            disabled
            label="one"
            class="has-placeholder-icon"
          ></tpg-radio-button-item>
          <tpg-radio-button-item
            value="2"
            size="small"
            readonly
            icon-position="top"
            label="two"
            class="has-placeholder-icon"
          ></tpg-radio-button-item>
          <tpg-radio-button-item
            value="3"
            size="small"
            class="has-placeholder-icon"
          ></tpg-radio-button-item>
        </tpg-radio-button-group>

        <script>
          // Adds placeholder icons onto radio buttons with relevant class applied
          for (const elem of document.querySelectorAll('tpg-radio-button-item.has-placeholder-icon'))  {
            const button = elem as RadioButtonItem;
            button.iconTemplate = tpgIconPlaceholderCustom;
          }

          const groups = document.querySelectorAll('tpg-radio-button-group');
          for (const g of groups) {
              g.addEventListener("tpg-change", (e) => {
                  e.target.selectedValue = e.value
              });
          }
        </script>

React

    <tpg-radio-button-group
      selectedValue="1"
      ontpg-change={(e) =>
        ((e.target as RadioButtonGroup).selectedValue = e.value!)
      }
    >
      <tpg-radio-button-item
        iconTemplate={tpgIconPlaceholderCustom}
        value="1"
        label="one"
      ></tpg-radio-button-item>
      <tpg-radio-button-item
        iconTemplate={tpgIconPlaceholderCustom}
        value="2"
        iconPosition="top"
        label="two"
      ></tpg-radio-button-item>
      <tpg-radio-button-item value="3" class="has-placeholder-icon">
        <tpg-badge slot="badge" label="Text"></tpg-badge>
      </tpg-radio-button-item>
    </tpg-radio-button-group>

    <tpg-radio-button-group
      selectedValue="1"
      ontpg-change={(e) =>
        ((e.target as RadioButtonGroup).selectedValue = e.value!)
      }
    >
      <tpg-radio-button-item
        value="1"
        size="small"
        disabled
        label="one"
        class="has-placeholder-icon"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-radio-button-item>
      <tpg-radio-button-item
        value="2"
        size="small"
        readonly
        iconPosition="top"
        label="two"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-radio-button-item>
      <tpg-radio-button-item
        value="3"
        size="small"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-radio-button-item>
    </tpg-radio-button-group>

Tables

Properties

Attribute	Property	Description	Type	Default Value
selected-value	selectedValue		string	''
size	size		'small' | 'regular'	'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-change	ontpg-change	Emitted when the state of the nested radio buttons change, contains the value of the newly selected button

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
	Slot reserved for tpg-radio-button-items

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox