API for radio

API reference for Angular Material radio

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

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

Selector: mat-radio-group

Exported as: matRadioGroup
Properties
Name Description
@Input()

color: ThemePalette

Theme color of the radio buttons in the group. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the radio group is disabled

@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Whether buttons in the group should be interactive while they're disabled.

@Input()

labelPosition: 'before' | 'after'

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

@Input()

name: string

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

@Input({ transform: booleanAttribute })

required: boolean

Whether the radio group is required

@Input()

selected: MatRadioButton

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.

@Input()

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. If there is not such a corresponding radio button, this value persists to be applied in case a new radio button is added with a matching value.

@Output()

change: EventEmitter<MatRadioChange>

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">).

Selector: mat-radio-button

Exported as: matRadioButton
Properties
Name Description
@Input('aria-describedby')

ariaDescribedby: string

The 'aria-describedby' attribute is read after the element's label and field type.

@Input('aria-label')

ariaLabel: string

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

@Input('aria-labelledby')

ariaLabelledby: string

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

@Input({ transform: booleanAttribute })

checked: boolean

Whether this radio button is checked.

@Input()

color: ThemePalette

Theme color of the radio button. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether ripples are disabled inside the radio button

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the radio button is disabled.

@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Whether the radio button should remain interactive when it is disabled.

@Input()

id: string

The unique ID for the radio button.

@Input()

labelPosition: 'before' | 'after'

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

@Input()

name: string

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

@Input({ transform: booleanAttribute })

required: boolean

Whether the radio button is required.

@Input()

value: any

The value of this radio button.

@Output()

change: EventEmitter<MatRadioChange>

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">).

inputId: string

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

radioGroup: MatRadioGroup

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

Methods
focus

Focuses the radio button.

Parameters

options?

FocusOptions

origin?

FocusOrigin

Change event object emitted by radio button and radio group.

Properties
Name Description

source: MatRadioButton

The radio button that emits the change event.

value: any

The value of the radio button.

Properties
Name Description

color: ThemePalette

Theme color of the radio button. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

disabledInteractive: boolean

Whether disabled radio buttons should be interactive.

MAT_RADIO_DEFAULT_OPTIONS_FACTORY
Returns
MatRadioDefaultOptions

Injection token that can be used to inject instances of MatRadioGroup. It serves as alternative token to the actual MatRadioGroup class which could cause unnecessary retention of the class and its component metadata.

const MAT_RADIO_GROUP: InjectionToken<MatRadioGroup>;
const MAT_RADIO_DEFAULT_OPTIONS: InjectionToken<MatRadioDefaultOptions>;

API reference for Angular Material radio-testing

import {MatRadioGroupHarness} from '@angular/material/radio/testing';

Harness for interacting with a mat-radio-group in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-radio-group'

The selector for the host element of a MatRadioGroup instance.

Methods
async
checkRadioButton

Checks a radio button in this group.

Parameters

filter?

RadioButtonHarnessFilters

An optional filter to apply to the child radio buttons. The first tab matching the filter will be selected.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getCheckedRadioButton

Gets the checked radio-button in a radio-group.

Returns
Promise<MatRadioButtonHarness | null>

async
getCheckedValue

Gets the checked value of the radio-group.

Returns
Promise<string | null>

async
getId

Gets the id of the radio-group.

Returns
Promise<string | null>

async
getName

Gets the name of the radio-group.

Returns
Promise<string | null>

async
getRadioButtons

Gets a list of radio buttons which are part of the radio-group.

Parameters

filter?

RadioButtonHarnessFilters

Optionally filters which radio buttons are included.

Returns
Promise<MatRadioButtonHarness[]>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a radio group with specific attributes.

Parameters

options

RadioGroupHarnessFilters = {}

Options for filtering which radio group instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

Harness for interacting with a mat-radio-button in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-radio-button'

The selector for the host element of a MatRadioButton instance.

Methods
async
blur

Blurs the radio-button.

Returns
Promise<void>

Promise that resolves when the action completes.

async
check

Puts the radio-button in a checked state by clicking it if it is currently unchecked, or doing nothing if it is already checked.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the radio-button.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getId

Gets the radio-button's id.

Returns
Promise<string | null>

async
getLabelText

Gets the radio-button's label text.

Returns
Promise<string>

async
getName

Gets the radio-button's name.

Returns
Promise<string | null>

async
getValue

Gets the value of the radio-button. The radio-button value will be converted to a string.

Note: This means that for radio-button's with an object as a value [object Object] is intentionally returned.

Returns
Promise<string | null>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isChecked

Whether the radio-button is checked.

Returns
Promise<boolean>

async
isDisabled

Whether the radio-button is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the radio-button is focused.

Returns
Promise<boolean>

async
isRequired

Whether the radio-button is required.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for a radio button with specific attributes.

Parameters

options

RadioButtonHarnessFilters = {}

Options for filtering which radio button instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatRadioGroupHarness instances.

Properties
Name Description

name: string

Only find instances whose name attribute is the given value.

A set of criteria that can be used to filter a list of MatRadioButtonHarness instances.

Properties
Name Description

checked: boolean

Only find instances with the given checked value.

label: string | RegExp

Only find instances whose label matches the given value.

name: string

Only find instances whose name attribute is the given value.

Azure & Blue theme selected.