# EuiButtonGroupComponent

**Type:** component



`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)
```html
<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)
```html
<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)
```html
<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>
```

```ts
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)


**Selector:** `eui-button-group`

## Inputs
- **isCheckboxButtons**: `boolean` - Enables checkbox behavior allowing multiple buttons to be selected simultaneously. When true, buttons can be independently toggled on/off.
- **isRadioButtons**: `boolean` - Enables radio button behavior allowing only one button to be selected at a time. When true, selecting a button automatically deselects others in the group.

## Outputs
- **buttonClick**: `EventEmitter<EuiButtonComponent>` - Emitted when any button in the group is clicked. Payload: EuiButtonComponent - the clicked button instance Triggered after button state is updated based on group configuration.