Angular Material Design : Radio button group to be vertically aligned

Question

Below is the angular material code i am using to display radio buttons :

<div>
    <mat-radio-group>
        <mat-radio-button value="1">Transcription</mat-radio-button>
        <mat-radio-button value="2">Summarization</mat-radio-button>
        <mat-radio-button value="3">Both</mat-radio-button>
    </mat-radio-group>
</div>

But this is displaying the radiobuttons horizontally. But i need them to be displayed vertically.

Answer 1

You can use CSS to get this done, add a class to your mat-radio-group where you can use:

• display: flex; flex-direction: column;
• or display: grid;
• or display: inline-grid;

relevant HTML:

<div>
    <mat-radio-group class="example-radio-group">
        <mat-radio-button value="1">Transcription</mat-radio-button>
        <mat-radio-button value="2">Summarization</mat-radio-button>
        <mat-radio-button value="3">Both</mat-radio-button>
    </mat-radio-group>
</div>

relevant CSS:

.example-radio-group {
  display: flex; flex-direction: column;
  /* display: inline-grid; */ 
  /* display: grid; */
  margin: 15px 0;
}

working stackblitz here

Answer 2

Simply add a <br> tag after each <mat-radio-button>