Component reference

Radio Buttons

Material 3 Expressive Radio Button components for selecting a single option from a list.

Material 3Web ComponentFramework agnostic

Basic Usage

Radio buttons allow users to select one option from a group. They follow Material Design 3 specifications with smooth animations and accessibility support.

Default Radio Buttons

Radio buttons start in the unchecked state by default.

Unchecked

Checked

Disabled

<m3-radio-button name="group" value="1"></m3-radio-button>
<m3-radio-button name="group" value="2" checked></m3-radio-button>

Radio Groups

Radio buttons with the same name attribute form a group where only one can be selected at a time.

Theme Selection

Example of a radio group for theme selection:

Light

Dark

Auto

Selected: light

<m3-radio-button
  name="theme"
  value="light"
  [checked]="selectedTheme === 'light'"
  (change)="onRadioChange($event, 'theme')">
</m3-radio-button>

Interactive Examples

Radio buttons emit events when their state changes, allowing you to react to user selections.

Size Selection

Example of radio buttons used in a settings interface:

Small

Compact size for dense layouts

Medium

Default size for most use cases

Large

Larger size for increased prominence

Selected size: small

States

Radio buttons can be in different states: enabled, disabled, checked, and unchecked.

Disabled State

Disabled radio buttons cannot be interacted with and have reduced opacity.

Disabled Unchecked

Disabled Checked

<m3-radio-button disabled></m3-radio-button>
<m3-radio-button checked disabled></m3-radio-button>

Accessibility

The radio button component follows Material Design 3 accessibility guidelines:

ARIA Support

✓ Uses proper ARIA attributes (role="radio", aria-checked, aria-disabled)
✓ Supports keyboard navigation (Space and Enter keys)
✓ Provides focus indicators
✓ Supports screen readers with aria-label and aria-labelledby
✓ Properly manages radio groups

Option A

Option B

<m3-radio-button aria-label="Option A"></m3-radio-button>
<m3-radio-button aria-labelledby="label-id"></m3-radio-button>

Properties & Events

Properties

Property	Type	Default	Description
`checked`	`boolean`	`false`	Whether the radio button is checked
`disabled`	`boolean`	`false`	Disables the radio button
`name`	`string`	`null`	Name attribute for radio group (required for grouping)
`value`	`string`	`null`	Value attribute for form submission
`aria-label`	`string`	`null`	ARIA label for accessibility

Events

Event	Detail	Description
`change`	Read `checked` and `value` from the radio element	Fired when the radio button state changes