Segment Control Bar

<tpg-segment-control-bar></tpg-segment-control-bar>

Segment Control Bar is used for switching between pre-filtered views of the same group of information.

A minimum of 2 items is required to assemble a Segment Control Bar while a maximum of 4 items per single line is recommended.

They have three visual states:

• Selected: when item is selected
• Unselected: when item is not selected
• Disabled: when an item is not selectable/available

Component behavior

The segment control item (child of segment-control-bar) will respond to clicks or presses inside the entirety of its area, which takes up all available space by default.

Like a radio-group, only one segment can be selected at a time. Selecting a new segment will deselect the previously selected one.

Examples

Basic usage

Basic usage with 2-4 options. The width of the segment control bar component will always be 100% of the parent component, and the items will divide all space equaly.

Component

Vanilla JS

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

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

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

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

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

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

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

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

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

      <script>
          document.addEventListener('DOMContentLoaded', () => {
              const bars = document.querySelectorAll('tpg-segment-control-bar');
              for (const bar of bars) {
                  bar.addEventListener("tpg-change", (e) => {
                      e.target.selectedValue = e.value
                  });
              }
          });
      </script>

React

      function changeSegmentBarSelection(e: TpgChangeEvent<string>){
        const segmentControlBar = e.target as SegmentControlBar;
        segmentControlBar.selectedValue = e.value ?? '';
      }

      <tpg-segment-control-bar
        selected-value="1"
        ontpg-change={changeSegmentBarSelection}
        >
        <tpg-segment-control-item
          label="Text 1"
          value="1">
        </tpg-segment-control-item>

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

      <tpg-segment-control-bar
        selected-value="1"
        ontpg-change={changeSegmentBarSelection}
      >
        <tpg-segment-control-item
          label="Text 1"
          value="1">
        </tpg-segment-control-item>

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

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

      <tpg-segment-control-bar
        selected-value="1"
        ontpg-change={changeSegmentBarSelection}
      >
        <tpg-segment-control-item
          label="Text 1"
          value="1">
        </tpg-segment-control-item>

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

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

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

Setting icons

You can use the leading-icon-template & trailing-icon-template attributes to set icons for the Segment Control Item.

Component

Vanilla JS

      <tpg-segment-control-bar selected-value="1">
        <tpg-segment-control-item
          label="Leading Icon"
          value="1"
          class="leading-icon"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Trailing Icon"
          value="2"
          class="trailing-icon"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Leading & trailing"
          value="3"
          class="trailing-icon leading-icon"
          >
        </tpg-segment-control-item>
      </tpg-segment-control-bar>

      <script>
          document.addEventListener('DOMContentLoaded', ()=>{
              // Adds placeholder icons onto segment control items with relevant classes
              const itemsWithLeadingIcon = document.querySelectorAll('
                tpg-segment-control-item.leading-icon
              ');
              const itemsWithTrailingIcon = document.querySelectorAll('
                tpg-segment-control-item.trailing-icon
              ');

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

              for (const elem of itemsWithTrailingIcon) {
                  const item = elem as SegmentControlItem;
                  item.trailingIconTemplate = tpgIconPlaceholderCustom;
              }
          });
      </script>

React

      <tpg-segment-control-bar selected-value="1">
        <tpg-segment-control-item
          label="Leading Icon"
          value="1"
          leadingIconTemplate={tpgIconPlaceholderCustom}
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Trailing Icon"
          value="2"
          trailingIconTemplate={tpgIconPlaceholderCustom}
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Leading & trailing"
          value="3"
          leadingIconTemplate={tpgIconPlaceholderCustom}
          trailingIconTemplate={tpgIconPlaceholderCustom}
          >
        </tpg-segment-control-item>
      </tpg-segment-control-bar>

Appearance

You can choose between a default and dark appearance using the type attribute.

Component

Vanilla JS

      <tpg-segment-control-bar selected-value="1" type="default" id="tpg-segment-control-bar-demo-1" class="not-content">
        <tpg-segment-control-item
          label="Default Appearance"
          value="1"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Default Appearance"
          value="2"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Default Appearance"
          value="3"
          >
        </tpg-segment-control-item>
      </tpg-segment-control-bar>

      <tpg-segment-control-bar selected-value="1" type="dark" id="tpg-segment-control-bar-demo-1" class="not-content">
        <tpg-segment-control-item
          label="Dark Appearance"
          value="1"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Dark Appearance"
          value="2"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Dark Appearance"
          value="3"
          >
        </tpg-segment-control-item>
      </tpg-segment-control-bar>

React

      <tpg-segment-control-bar selected-value="1" type="default" id="tpg-segment-control-bar-demo-1" class="not-content">
        <tpg-segment-control-item
          label="Default Appearance"
          value="1"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Default Appearance"
          value="2"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Default Appearance"
          value="3"
          >
        </tpg-segment-control-item>
      </tpg-segment-control-bar>

      <tpg-segment-control-bar selected-value="1" type="dark" id="tpg-segment-control-bar-demo-1" class="not-content">
        <tpg-segment-control-item
          label="Dark Appearance"
          value="1"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Dark Appearance"
          value="2"
          >
        </tpg-segment-control-item>
        <tpg-segment-control-item
          label="Dark Appearance"
          value="3"
          >
        </tpg-segment-control-item>
      </tpg-segment-control-bar>

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type		'dark' | 'default'	'default'
selected-value	selectedValue		string	''

Events

Event name	Reactjs attribute	Description
tpg-change	ontpg-change	Event fired when a new segment-control-item is selected. Returns value of the selected item.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
items	slot reserved for tpg-segment-control-item components
	Default slot for content

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox