Radio Button

Angular Material Radio Button lets users select a single option from a set of mutually exclusive choices, commonly used in forms and settings. The selected option carries a filled dot, picking another one clears the previous choice, and options that are not available are greyed out. BuilderKit restyles the circle, the label and the focus ring so the mat-radio-button component matches the rest of the design system.

When more than one option can be picked at the same time, use the checkbox component instead.

Example

Below is an example of how BuilderKit restyles the Angular Material Radio Button and gives it a more modern appearance.

<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>

Radio buttons in a row

A short set of options with brief labels reads well side by side, which keeps a form compact without hiding any of the choices.

<mat-radio-group class="flex flex-row gap-x-4" value="standard">
  <mat-radio-button value="standard">Standard</mat-radio-button>
  <mat-radio-button value="express">Express</mat-radio-button>
  <mat-radio-button value="overnight">Overnight</mat-radio-button>
</mat-radio-group>

Label before the radio button

The label can sit on the leading side instead, so the circles line up along the trailing edge of a settings list.

<mat-radio-group labelPosition="before" value="weekly">
  <mat-radio-button value="daily">Daily</mat-radio-button>
  <mat-radio-button value="weekly">Weekly</mat-radio-button>
  <mat-radio-button value="monthly">Monthly</mat-radio-button>
</mat-radio-group>