Ionic4 - <ion-radio-group> - horizontal arrangement

Ionic Framework
1

Hello.

I have 3 radio buttons in a group that need to be arranged together horizontally on screen.

Default behaviour seems to be arrange vertically on top of each other. How do I get radio buttons in a group beside each other - horizontally.

1 Like
2

You can use ion-row to wrap your radio-group, then handle each radion-button as a column:

<ion-row radio-group  [(ngModel)]="something">
    <ion-col>
         <ion-item>
            <ion-label>A</ion-label>
            <ion-radio mode="md" item-left value="A"></ion-radio>
       </ion-item>
     </ion-col>

    <ion-col>
        <ion-item>
            <ion-label>B</ion-label>
            <ion-radio mode="md" item-left value="B"></ion-radio>
       </ion-item>
    </ion-col>

    <ion-col>
        <ion-item>
            <ion-label>C</ion-label>
            <ion-radio mode="md" item-left value="C"></ion-radio>
       </ion-item>
    </ion-col>

</ion-row>
3

Hello @jnascimento

Thanks for response. Your code suggestion works well for organizing buttons horizontally.
However they do not have the functionality of an ion-radio-group. I’m able to select all radio buttons in the row at once…

Screenshot below.
Any further input appreciated.

image

1 Like
4

Use ion-row inside ion-radio-group. It will work

<ion-radio-group  [(ngModel)]="something">
  <ion-row>
    <ion-col>
         <ion-item>
            <ion-label>A</ion-label>
            <ion-radio mode="md" item-left value="A"></ion-radio>
       </ion-item>
     </ion-col>

    <ion-col>
        <ion-item>
            <ion-label>B</ion-label>
            <ion-radio mode="md" item-left value="B"></ion-radio>
       </ion-item>
    </ion-col>

    <ion-col>
        <ion-item>
            <ion-label>C</ion-label>
            <ion-radio mode="md" item-left value="C"></ion-radio>
       </ion-item>
    </ion-col>

</ion-row>
</ion-radio-group>
8 Likes