Skip to main content

​
Overview

<mat-radio-button> provides the same functionality as a native <input type="radio"> enhanced with Material Design styling and animations. Radio buttons are typically used within a <mat-radio-group> to create a set of mutually exclusive options.

​
Basic Usage

<mat-radio-group>
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
  <mat-radio-button value="3">Option 3</mat-radio-button>
</mat-radio-group>

​
API Reference

​
MatRadioGroup

Selector: mat-radio-group Exported as: matRadioGroup

​
Inputs

​
name
string
Name of the radio button group. All radio buttons inside this group will use this name.
​
value
any
Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding radio button with a matching value.
​
selected
MatRadioButton | null
default:"null"
The currently selected radio button. If set to a new radio button, the radio group value will be updated to match the new selected button.
​
disabled
boolean
default:"false"
Whether the radio group is disabled.
​
required
boolean
default:"false"
Whether the radio group is required.
​
labelPosition
'before' | 'after'
default:"'after'"
Whether the labels should appear after or before the radio buttons. Defaults to ‘after’.
​
color
ThemePalette
Theme color of the radio buttons in the group. This API is supported in M2 themes only.
​
disabledInteractive
boolean
default:"false"
Whether buttons in the group should be interactive while they’re disabled.

​
Outputs

​
change
EventEmitter<MatRadioChange>
Event emitted when the group value changes. Change events are only emitted when the value changes due to user interaction.

​
MatRadioButton

Selector: mat-radio-button Exported as: matRadioButton

​
Inputs

​
id
string
A unique id for the radio button. Auto-generated if not provided.
​
name
string | null
default:"null"
Analog to HTML ‘name’ attribute used to group radios for unique selection.
​
value
any
The value of this radio button.
​
checked
boolean
default:"false"
Whether the radio button is checked.
​
disabled
boolean
default:"false"
Whether the radio button is disabled.
​
labelPosition
'before' | 'after'
default:"'after'"
Whether the label should appear after or before the radio button. Defaults to ‘after’.
​
color
ThemePalette
Theme color of the radio button. This API is supported in M2 themes only.
​
disableRipple
boolean
default:"false"
Whether ripples are disabled on the radio button.
​
disabledInteractive
boolean
default:"false"
Whether the radio button should remain interactive when it is disabled.
​
tabIndex
number
default:"0"
Tabindex of the radio button.

​
Outputs

​
change
EventEmitter<MatRadioChange>
Event emitted when the checked state of this radio button changes.

​
MatRadioChange

​
source
MatRadioButton
The radio button that emits the change event.
​
value
any
The value of the radio button.

​
Accessibility

  • The radio group uses role="radiogroup"
  • Each radio button uses a native <input type="radio"> element
  • Labels are properly associated with radio buttons
  • Use the name attribute to group related radio buttons
  • Keyboard navigation is fully supported (Arrow keys to navigate, Space to select)
  • Screen readers announce the current selection and group information
  • Disabled radio buttons are not focusable and are announced as disabled

​
Advanced Usage

​
Label Position

<mat-radio-group labelPosition="before">
  <mat-radio-button value="1">Before label</mat-radio-button>
  <mat-radio-button value="2">Before label</mat-radio-button>
</mat-radio-group>

​
Dynamic Options

export class RadioDynamicExample {
  options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' }
  ];
  selectedValue: string;
}

<mat-radio-group [(ngModel)]="selectedValue">
  <mat-radio-button *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-radio-button>
</mat-radio-group>

​
Disabled State

<!-- Disable entire group -->
<mat-radio-group [disabled]="true">
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

<!-- Disable individual button -->
<mat-radio-group>
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2" [disabled]="true">Option 2 (disabled)</mat-radio-button>
</mat-radio-group>

​
Disabled Interactive

<mat-radio-group [disabled]="true" [disabledInteractive]="true">
  <mat-radio-button value="1">Interactive when disabled</mat-radio-button>
  <mat-radio-button value="2">Interactive when disabled</mat-radio-button>
</mat-radio-group>

Build docs developers (and LLMs) love

Get started for freeTalk to us