Radio Button Item

Radio Button Items are buttons that make up an array of Radio Buttons, and are never to be used in alone. Normally, these should not be used except as part of a Radio Button Group

Component behavior

The Radio Button Item is itself inert, but when slotted into a Radio Button Group clicks and keypresses targeting it will result in event emission from the group.

Examples

Label & Value

You can set the Radio Button Item’s label using the label attribute. The label is what’s rendered inside the Radio Button Item.

The value of the Radio Button Item can be set with the value attribute. This value is the identifier of the Radio Button Item, and is what’s dispatched when the Radio Button Item is clicked, as well as the identifier used by the Radio Button Group to set correct toggle state on the Radio Button Item.

Component

Vanilla JS

<tpg-radio-button-item
  label="Radio Button Item"
  value="rbi-1"
></tpg-radio-button-item>

React

<tpg-radio-button-item
  label="Radio Button Item"
  value="rbi-1"
></tpg-radio-button-item>

Position

The Radio Button Item should not be used outside of a Radio Button Group which handles the position and state of the Radio Button Item(s).

Should you still wish to use the Radio Button Item on its own, you can control its appearance with the position attribute

Component

Vanilla JS

    <tpg-radio-button-item
      label="Position: left"
      position="left"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Position: middle"
      position="middle"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Position: right"
      position="right"
    ></tpg-radio-button-item>

React

    <tpg-radio-button-item
      label="Position: left"
      position="left"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Position: middle"
      position="middle"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Position: right"
      position="right"
    ></tpg-radio-button-item>

States

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

Component

Vanilla JS

    <tpg-radio-button-item
      label="Enabled"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Disabled"
      disabled
    ></tpg-radio-button-item>

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

React

    <tpg-radio-button-item
      label="Enabled"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Disabled"
      disabled
    ></tpg-radio-button-item>

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

Size

You can control the Radio Button Item’s size using the size attribute

Component

Vanilla JS

    <tpg-radio-button-item
      size="regular"
      label="Regular radio button item"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      size="small"
      label="Small radio button item"
    ></tpg-radio-button-item>

React

    <tpg-radio-button-item
      size="regular"
      label="Regular radio button item"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      size="small"
      label="Small radio button item"
    ></tpg-radio-button-item>

Badge

The Radio Button Item includes a dedicated badge slot. To display a badge, place a Badge component in this slot using slot="badge".

Read more about badges here

Component

Vanilla JS

      <tpg-radio-button-item>
          <tpg-badge
            slot="badge"
            label="Badge 1"
          />
      </tpg-radio-button-item>

      <tpg-radio-button-item>
          <tpg-badge
            slot="badge"
            label="Badge 2"
            type="error"
            emphasis="high"
          />
      </tpg-radio-button-item>

      <tpg-radio-button-item>
          <tpg-badge
            slot="badge"
            label="Badge 3"
            type="warning"
            emphasis="high"
          />
      </tpg-radio-button-item>

React

      <tpg-radio-button-item>
          <tpg-badge
            slot="badge"
            label="Badge 1"
          />
      </tpg-radio-button-item>

      <tpg-radio-button-item>
          <tpg-badge
            slot="badge"
            label="Badge 2"
            type="error"
            emphasis="high"
          />
      </tpg-radio-button-item>

      <tpg-radio-button-item>
          <tpg-badge
            slot="badge"
            label="Badge 3"
            type="warning"
            emphasis="high"
          />
      </tpg-radio-button-item>

Icons

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

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

Component

Vanilla JS

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

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

<script>
  const radioButtons = document.querySelectorAll('tpg-radio-button-item.has-placeholder-icon');

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

React

    <tpg-radio-button-item
      iconTemplate={tpgIconPlaceholderCustom}
      iconPosition="leading"
      label="Leading icon"
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      iconTemplate={tpgIconPlaceholderCustom}
      iconPosition="top"
      label="Top icon"
    ></tpg-radio-button-item>

Selected

The selected attribute can be used to set a Radio Button Item’s initial state. This is not recommended as the state should be managed by the Radio Button Group component.

Component

Vanilla JS

    <tpg-radio-button-item
      label="Selected"
      selected
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Not selected"
    ></tpg-radio-button-item>

React

    <tpg-radio-button-item
      label="Selected"
      selected
    ></tpg-radio-button-item>

    <tpg-radio-button-item
      label="Not selected"
    ></tpg-radio-button-item>

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	''
value	value	An internally used variable representing an unique identifier for the button. It will be used to simplify state management when grouped with other radio buttons.	string	''
position	position	The relative position that the button _has been_ placed in within a group. This property governs the styling of the edges of the button, but does not in any way move the button around. If slotting this component into a `tpg-radio-button-group`, setting this property is unnecessary, as the group component controls this.	'left' | 'middle' | 'right'	'middle'
read-only	readOnly	Works the same as the standard HTML property, boolean.	boolean	false
selected	selected	Sets the button's toggled state without emitting events. Used for setting initial state or for resetting a toggled button by parent component.	boolean	false
size	size	The size of the button.	'regular' | 'small'	'regular'

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox