Radio

A radio allows users to select one option from a group.

API

API reference for Angular Material radio

import {MatRadioModule} from '@angular/material';

Directives

MatRadioGroup

A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
selector:mat-radio-group

Properties

Name

Description

@Output()

change

Event emitted when the group value changes. Change events are only emitted when the value changes due to user interaction with a radio button (the same behavior as `<input type-"radio">`).

@Input()

name

Name of the radio button group. All radio buttons inside this group will use this name.

@Input()

Deprecated

align

Alignment of the radio-buttons relative to their labels. Can be 'before' or 'after'.

@Input()

labelPosition

Whether the labels should appear after or before the radio-buttons. Defaults to 'after'

@Input()

value

Value of the radio button.

@Input()

selected

Whether the radio button is selected.

 

MatRadioButton

A radio-button. May be inside of
selector:mat-radio-button

Properties

Name

Description

@Input()

id

The unique ID for the radio button.

@Input()

name

Analog to HTML 'name' attribute used to group radios for unique selection.

@Input('aria-label')

ariaLabel

Used to set the 'aria-label' attribute on the underlying input element.

@Input('aria-labelledby')

ariaLabelledby

The 'aria-labelledby' attribute takes precedence as the element's text alternative.

@Input()

disableRipple

Whether the ripple effect for this radio button is disabled.

@Input()

checked

Whether this radio button is checked.

@Input()

value

The value of this radio button.

@Input()

Deprecated

align

Whether or not the radio-button should appear before or after the label.

@Input()

labelPosition

Whether the label should appear after or before the radio button. Defaults to 'after'

@Input()

disabled

Whether the radio button is disabled.

@Output()

change

Event emitted when the checked state of this radio button changes. Change events are only emitted when the value changes due to user interaction with the radio button (the same behavior as `<input type-"radio">`).

radioGroup

The parent radio group. May or may not be present.

inputId

ID of the native input element inside `<mat-radio-button>`

Methods

focus

Focuses the radio button.

Additional classes

MatRadioChange

Change event object emitted by MatRadio and MatRadioGroup.

Properties

Name

Description

source

The MatRadioButton that emits the change event.

value

The value of the MatRadioButton.

MatRadioGroupBase

 


Examples

Storybook failed to load. Please connect to the VPN to access.
Storybook failed to load. Please connect to the VPN to access.