File

packages/components/eui-toggle-group/eui-toggle-group.component.ts

Description

Component for grouping multiple buttons together with optional checkbox or radio button behavior. Segmented control component that groups multiple toggle items into a unified selection interface. Supports both single-select (radio button behavior) and multi-select (checkbox behavior) modes. Manages selection state coordination across child toggle items automatically. Provides fluid width option for responsive layouts where items expand to fill available space. Commonly used for view switchers, filter options, or any mutually exclusive or multi-select choice sets.

Basic Usage

<!-- Single select (radio behavior) -->
<eui-toggle-group (itemClick)="onViewChange($event)">
  <eui-toggle-group-item id="list" [isChecked]="true">
    List View
  </eui-toggle-group-item>
  <eui-toggle-group-item id="grid">
    Grid View
  </eui-toggle-group-item>
</eui-toggle-group>

<!-- Multi-select (checkbox behavior) -->
<eui-toggle-group [isMultiple]="true">
  <eui-toggle-group-item id="bold">Bold</eui-toggle-group-item>
  <eui-toggle-group-item id="italic">Italic</eui-toggle-group-item>
  <eui-toggle-group-item id="underline">Underline</eui-toggle-group-item>
</eui-toggle-group>

<!-- Fluid width -->
<eui-toggle-group [isFluid]="true">
  <eui-toggle-group-item id="option1">Option 1</eui-toggle-group-item>
  <eui-toggle-group-item id="option2">Option 2</eui-toggle-group-item>
</eui-toggle-group>

Accessibility

• Use role="group" with aria-label describing the group purpose
• Each item should have clear, descriptive text
• Keyboard navigation (Tab, Arrow keys) should work
• Announce selection changes to screen readers

Notes

• Single-select mode (default): only one item can be checked at a time
• Multi-select mode (isMultiple="true"): multiple items can be checked
• Fluid mode (isFluid="true"): items expand to fill container width
• Each item must have unique id for proper state management

Implements

AfterContentInit

<ng-content/>