File

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

Description

eui-button-group component for organizing multiple buttons with optional checkbox or radio button selection behavior. Provides visual grouping and automatic state management for single or multiple selection modes. Supports three modes: standard (no selection), checkbox (multiple selection), and radio (single selection). Automatically manages checked state across buttons and emits events on button interactions. Content is projected via ng-content expecting eui-button children.

Standard button group (no selection behavior)

<eui-button-group>
  <button euiButton id="btn1">Action 1</button>
  <button euiButton id="btn2">Action 2</button>
  <button euiButton id="btn3">Action 3</button>
</eui-button-group>

Radio button group (single selection)

<eui-button-group [isRadioButtons]="true" (buttonClick)="onSelection($event)">
  <button euiButton id="left" [isChecked]="true">Left</button>
  <button euiButton id="center">Center</button>
  <button euiButton id="right">Right</button>
</eui-button-group>

Checkbox button group (multiple selection)

<eui-button-group [isCheckboxButtons]="true">
  <button euiButton id="bold">Bold</button>
  <button euiButton id="italic">Italic</button>
  <button euiButton id="underline">Underline</button>
</eui-button-group>

onSelection(button: EuiButtonComponent): void {
  console.log('Selected button:', button.id, 'Checked:', button.isChecked);
}

Accessibility

• Buttons maintain native keyboard accessibility (Enter/Space)
• Visual grouping indicates related actions to all users
• Checked state is visually indicated and announced to screen readers
• Radio mode ensures only one selection, following standard radio button patterns
• Each button should have unique id for proper state management
• Consider adding aria-label to group for screen reader context

Notes

• Must contain button[euiButton] children for proper functionality
• Three modes: standard (default), radio (isRadioButtons), checkbox (isCheckboxButtons)
• Standard mode: buttons act as regular action buttons without selection state
• Radio mode: only one button can be checked at a time, selecting one unchecks others
• Checkbox mode: multiple buttons can be checked independently
• Each button must have unique id attribute for state management
• isChecked property on buttons controls initial checked state
• buttonClick event emits after state is updated
• Buttons are visually grouped with connected borders
• Cannot enable both isRadioButtons and isCheckboxButtons simultaneously
• Use radio mode for mutually exclusive options (alignment, view mode)
• Use checkbox mode for independent toggles (text formatting, filters)

Implements

AfterContentInit

<ng-content/>