# EuiButtonGroupComponent

**Type:** component

<p><code>eui-button-group</code> 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 <code>eui-button</code> children.</p>
<h4>Standard button group (no selection behavior)</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-button-group&gt;
  &lt;button euiButton id=&quot;btn1&quot;&gt;Action 1&lt;/button&gt;
  &lt;button euiButton id=&quot;btn2&quot;&gt;Action 2&lt;/button&gt;
  &lt;button euiButton id=&quot;btn3&quot;&gt;Action 3&lt;/button&gt;
&lt;/eui-button-group&gt;</code></pre></div><h4>Radio button group (single selection)</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-button-group [isRadioButtons]=&quot;true&quot; (buttonClick)=&quot;onSelection($event)&quot;&gt;
  &lt;button euiButton id=&quot;left&quot; [isChecked]=&quot;true&quot;&gt;Left&lt;/button&gt;
  &lt;button euiButton id=&quot;center&quot;&gt;Center&lt;/button&gt;
  &lt;button euiButton id=&quot;right&quot;&gt;Right&lt;/button&gt;
&lt;/eui-button-group&gt;</code></pre></div><h4>Checkbox button group (multiple selection)</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-button-group [isCheckboxButtons]=&quot;true&quot;&gt;
  &lt;button euiButton id=&quot;bold&quot;&gt;Bold&lt;/button&gt;
  &lt;button euiButton id=&quot;italic&quot;&gt;Italic&lt;/button&gt;
  &lt;button euiButton id=&quot;underline&quot;&gt;Underline&lt;/button&gt;
&lt;/eui-button-group&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">onSelection(button: EuiButtonComponent): void {
  console.log(&#39;Selected button:&#39;, button.id, &#39;Checked:&#39;, button.isChecked);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Buttons maintain native keyboard accessibility (Enter/Space)</li>
<li>Visual grouping indicates related actions to all users</li>
<li>Checked state is visually indicated and announced to screen readers</li>
<li>Radio mode ensures only one selection, following standard radio button patterns</li>
<li>Each button should have unique id for proper state management</li>
<li>Consider adding aria-label to group for screen reader context</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must contain button[euiButton] children for proper functionality</li>
<li>Three modes: standard (default), radio (isRadioButtons), checkbox (isCheckboxButtons)</li>
<li>Standard mode: buttons act as regular action buttons without selection state</li>
<li>Radio mode: only one button can be checked at a time, selecting one unchecks others</li>
<li>Checkbox mode: multiple buttons can be checked independently</li>
<li>Each button must have unique id attribute for state management</li>
<li>isChecked property on buttons controls initial checked state</li>
<li>buttonClick event emits after state is updated</li>
<li>Buttons are visually grouped with connected borders</li>
<li>Cannot enable both isRadioButtons and isCheckboxButtons simultaneously</li>
<li>Use radio mode for mutually exclusive options (alignment, view mode)</li>
<li>Use checkbox mode for independent toggles (text formatting, filters)</li>
</ul>


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

**Standalone:** false

## Inputs

- **isCheckboxButtons**: `boolean` - <p>Enables checkbox behavior allowing multiple buttons to be selected simultaneously.
When true, buttons can be independently toggled on/off.</p>

- **isRadioButtons**: `boolean` - <p>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.</p>


## Outputs

- **buttonClick**: `EventEmitter<EuiButtonComponent>` - <p>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.</p>

