Skip to main content
Version: Current

Web Components - Segmented Control

A segmented control is a set of checkable buttons. No more than one button can be checked at a time. When a user checks an unchecked button, the previously checked button is automatically unchecked.

It is possible to initialise the set with all buttons in the unchecked state. This forces the user to check one of the buttons before moving past a certain point in the workflow.

Set-up​

import { provideDesignSystem, alphaSegmentedControl, alphaSegmentedItem } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaSegmentedControl(), alphaSegmentedItem());

Usage​

Live Editor
<alpha-segmented-control>
  <alpha-segmented-item>Item 1</alpha-segmented-item>
  <alpha-segmented-item>Item 2</alpha-segmented-item>
  <alpha-segmented-item>Item 3</alpha-segmented-item>
</alpha-segmented-control>
Result
Loading...

Use cases​

  • Used anywhere someone may want to visually and structurally group related interactive controls.