Skip to main content
Button toggle group that allows single or multiple selection, behaving like a radio button group or checkbox group with a button appearance.

​
Import

import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';

​
Basic Usage

<mat-button-toggle-group>
  <mat-button-toggle value="left">Left</mat-button-toggle>
  <mat-button-toggle value="center">Center</mat-button-toggle>
  <mat-button-toggle value="right">Right</mat-button-toggle>
</mat-button-toggle-group>

​
API Reference

​
MatButtonToggleGroup

Selector: mat-button-toggle-group Exported as: matButtonToggleGroup

​
Properties

NameTypeDescription
@Input() appearanceMatButtonToggleAppearanceAppearance style. Options: ‘legacy’, ‘standard’
@Input() namestringName attribute for underlying input elements
@Input() verticalbooleanWhether the toggle group is vertical
@Input() valueanyValue of the toggle group
@Input() multiplebooleanWhether multiple toggles can be selected
@Input() disabledbooleanWhether the group is disabled
@Input() disabledInteractivebooleanWhether buttons remain interactive when disabled
@Input() hideSingleSelectionIndicatorbooleanHide checkmark for single-selection
@Input() hideMultipleSelectionIndicatorbooleanHide checkmark for multiple-selection
@Output() changeEventEmitter<MatButtonToggleChange>Event emitted when value changes
@Output() valueChangeEventEmitter<any>Event for two-way data binding

​
Properties (read-only)

NameTypeDescription
selectedMatButtonToggle | MatButtonToggle[]Selected toggle(s)

​
MatButtonToggle

Selector: mat-button-toggle Exported as: matButtonToggle

​
Properties

NameTypeDescription
@Input() idstringUnique ID for the toggle
@Input() namestringName attribute
@Input() valueanyValue assigned to the toggle
@Input() tabIndexnumberTab index
@Input() disableRipplebooleanWhether ripples are disabled
@Input() appearanceMatButtonToggleAppearanceAppearance style
@Input() checkedbooleanWhether the toggle is checked
@Input() disabledbooleanWhether the toggle is disabled
@Input() disabledInteractivebooleanWhether toggle remains interactive when disabled
@Output() changeEventEmitter<MatButtonToggleChange>Event emitted when checked state changes

​
Methods

NameDescription
focus(options?: FocusOptions): voidFocuses the button toggle

​
Examples

​
Multiple Selection

<mat-button-toggle-group multiple>
  <mat-button-toggle value="bold">Bold</mat-button-toggle>
  <mat-button-toggle value="italic">Italic</mat-button-toggle>
  <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

​
With ngModel

<mat-button-toggle-group [(ngModel)]="selectedValue">
  <mat-button-toggle value="option1">Option 1</mat-button-toggle>
  <mat-button-toggle value="option2">Option 2</mat-button-toggle>
</mat-button-toggle-group>

​
Vertical Orientation

<mat-button-toggle-group vertical>
  <mat-button-toggle value="top">Top</mat-button-toggle>
  <mat-button-toggle value="middle">Middle</mat-button-toggle>
  <mat-button-toggle value="bottom">Bottom</mat-button-toggle>
</mat-button-toggle-group>

​
With Icons

<mat-button-toggle-group>
  <mat-button-toggle value="align-left">
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="align-center">
    <mat-icon>format_align_center</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="align-right">
    <mat-icon>format_align_right</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>

​
Accessibility

  • Single-selection groups use role="radiogroup"
  • Multiple-selection groups use role="group"
  • Keyboard navigation with arrow keys (single-selection mode)
  • Space/Enter to toggle selection

​
Types

type MatButtonToggleAppearance = 'legacy' | 'standard';

interface MatButtonToggleChange {
  source: MatButtonToggle;
  value: any;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us