New to Kendo UI for Angular? Start a free 30-day trial

ButtonGroup Selection Mode

Updated on Nov 6, 2026

The ButtonGroup provides options for setting how many Buttons users can select at once. Use its selection input, which accepts single or multiple (default).

Set the Button 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.

The following example demonstrates the single and multiple selection modes.

Example
View Source
Loading ...

Default Selection

To preselect a Button, set its 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>