### 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)

Example :

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

Example :

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

Example :

    <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>

Example :

    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`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-button-group`
styleUrls | `./eui-button-group.scss`
template |
    <ng-content/>

### Index

###### Properties
buttons
###### Inputs
isCheckboxButtons isRadioButtons
###### Outputs
buttonClick
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

isCheckboxButtons
Type : `boolean`
Default value : `false`
Enables checkbox behavior allowing multiple buttons to be selected simultaneously. When true, buttons can be independently toggled on/off.

isRadioButtons
Type : `boolean`
Default value : `false`
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
Type : `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.

### HostBindings

class
Type : `string`
CSS classes applied to the host element

### Properties

buttons
Type : `QueryList<EuiButtonComponent>`
Decorators : `@ContentChildren(undefined)`

### Accessors

cssClasses
get `cssClasses()`
CSS classes applied to the host element Returns : `string`

# results matching ""

# No results matching ""