Segment Control Item

<tpg-segment-control-item></tpg-segment-control-item>

Segment Control Items allow the user to navigate and switch between different formats of the same group of information (e.g. a data set displayed in a list vs matrix vs graph).

Examples

Basic

Unselected

Component

Vanilla JS

        <tpg-segment-control-item label="Text"></tpg-segment-control-item>

React

        <tpg-segment-control-item label="Text"></tpg-segment-control-item>

Selected

Component

Vanilla JS

        <tpg-segment-control-item selected label="Text"></tpg-segment-control-item>

React

        <tpg-segment-control-item selected label="Text"></tpg-segment-control-item>

Disabled

Component

Vanilla JS

        <tpg-segment-control-item disabled label="Text"></tpg-segment-control-item>

React

        <tpg-segment-control-item disabled label="Text"></tpg-segment-control-item>

Icons

Component

Vanilla JS

<tpg-segment-control-item
  class="has-leading-icon"
  label="Leading Icon">
</tpg-segment-control-item>

<tpg-segment-control-item
  class="has-trailing-icon"
  label="Trailing Icon">
</tpg-segment-control-item>

<tpg-segment-control-item
  class="has-leading-icon">
</tpg-segment-control-item>


<script>
  const segmentControlItemsLeadingIcon = document.querySelectorAll(
    'tpg-segment-control-item.has-leading-icon'
  );

  const segmentControlItemsTrailingIcon = document.querySelectorAll(
    'tpg-segment-control-item.has-trailing-icon'
  );

  for (const elem of segmentControlItemsLeadingIcon) {
    const item = elem as SegmentControlItem;
    item.leadingIconTemplate = tpgIconPlaceholderCustom;
  }
  for (const elem of segmentControlItemsTrailingIcon) {
    const item = elem as SegmentControlItem;
    item.trailingIconTemplate = tpgIconPlaceholderCustom;
  }

</script>

React

    <tpg-segment-control-item
      leadingIconTemplate={tpgIconPlaceholderCustom}
      label="Leading Icon">
    </tpg-segment-control-item>

    <tpg-segment-control-item
      trailingIconTemplate={tpgIconPlaceholderCustom}
      label="Trailing Icon">
    </tpg-segment-control-item>

    <tpg-segment-control-item
      leadingIconTemplate={tpgIconPlaceholderCustom}>
    </tpg-segment-control-item>

Badge

Component

Vanilla JS

<tpg-segment-control-item label="Text">

  <tpg-badge
    size="xxs"
    slot="badge"
    label="10"
    emphasis="high">
  </tpg-badge>

</tpg-segment-control-item>

React

<tpg-segment-control-item label="Text">

  <tpg-badge
    size="xxs"
    slot="badge"
    label="10"
    emphasis="high">
  </tpg-badge>

</tpg-segment-control-item>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	The label text for the segment control item.	string	''
value	value	The identifying value of the segment control item.	string	''
selected	selected	Indicates if the segment control item is selected.	boolean	false
disabled	disabled	Indicates if the segment control item is disabled.	boolean	false
trailing-icon-template	trailingIconTemplate	The URI-encoded svg of the trailing icon for the segment control item.	IconConstant | ''	''
leading-icon-template	leadingIconTemplate	The URI-encoded svg of the leading icon for the segment control item.	IconConstant | ''	''

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
badge	slot reserved for a tpg-badge component

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox