# ButtonGroup Selection Mode

The ButtonGroup provides options for setting how many Buttons users can select at once. Use its [`selection`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttongroupcomponent#selection) input, which accepts `single` or `multiple` (default).

Set the Button [`toggleable`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttoncomponent#toggleable) property to `true` for each Button that users can select. The property defaults to `false`. For more information on persisting the selected Buttons within a collection, refer to [Buttons Collection](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/buttongroup/collections#storing-selected-buttons).

The following example demonstrates the `single` and `multiple` selection modes.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/buttongroup/selection/source.txt)

## Default Selection

To preselect a Button, set its [`selected`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttoncomponent#selected) property to `true`. In `single` selection mode, preselect at most one Button. Otherwise, the ButtonGroup throws an error in development mode.

```html
<kendo-buttongroup selection="single">
    <button kendoButton [toggleable]="true" [selected]="true">Left</button>
    <button kendoButton [toggleable]="true">Center</button>
</kendo-buttongroup>
```

## Single Selection

In `single` selection mode, selecting a Button deselects the previously selected one. Selecting the already selected Button keeps it selected.

```html
<kendo-buttongroup selection="single">
    <button kendoButton [toggleable]="true">Left</button>
    <button kendoButton [toggleable]="true">Center</button>
</kendo-buttongroup>
```

## Multiple Selection

In the default `multiple` selection mode, users select or deselect each toggleable Button independently.

```html
<kendo-buttongroup selection="multiple">
    <button kendoButton [toggleable]="true">Bold</button>
    <button kendoButton [toggleable]="true">Italic</button>
</kendo-buttongroup>
```

## Suggested Links

* [Buttons Collection](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/buttongroup/collections)
* [ButtonGroup Events](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/buttongroup/events)
* [API Reference of the ButtonGroup](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttongroupcomponent)