Button Group

Group a series of buttons together on a single line with the button group, with radio and checkbox style behavior.

This page shows some example usage of the <BsButtonGroup> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.

Checkbox type

You selected:

<BsButtonGroup
  @value={{buttonGroupValue}}
  @type="checkbox"
  @onChange={{action (mut buttonGroupValue)}} as |bg|>
  <bg.button @value="1">1</bg.button>
  <bg.button @value="2">2</bg.button>
  <bg.button @value="3">3</bg.button>
</BsButtonGroup>
<p>You selected:</p>
<ul>
  {{#each buttonGroupValue as |value|}}
    <li>{{value}}</li>
  {{/each}}
</ul>

Radio type

You selected:

<BsButtonGroup
  @value={{buttonGroupValue2}}
  @type="radio"
  @onChange={{action (mut buttonGroupValue2)}} as |bg|>
  <bg.button @value="1">1</bg.button>
  <bg.button @value="2">2</bg.button>
  <bg.button @value="3">3</bg.button>
</BsButtonGroup>
<p>You selected: {{buttonGroupValue2}}</p>