<ion-radio-group> selects all radio buttons by default


I am using the below code to generate a list of radio buttons in my “native” app.
The radio group is generated just fine but when I select a single option, all of the radio buttons are getting selected.

              <ion-item v-for="br in brItems" :key="br.id">
                <ion-label>{{ br.name }}</ion-label>
                <ion-radio value="{{br.id}}" ></ion-radio>

I had seen a 5 year old topic on the same and apparently back then it was a bug.
Is this bug still persistent ?

Did I miss a step?

Any inputs will be appreciated.

Can you reproduce this in an Ionic starter app and provide a link to the repo?

I’m experiencing a similar issue with Ionic + Vue, all the radio buttons are initially checked.

Do you set the v-model on ion-radio-group or ion-radio?

<ion-radio-group v-model="value">
      <ion-col :key="'option-' + index" v-for="(option, index) in options">
          <ion-radio :value="option" @input="saveValue"></ion-radio>

Update: Oops, looks like I had a typo, after fixing it the radio buttons worked as intended.

@ldebeasi Thanks for the response.

I am able to recreate the issue in web and android as well.

Source at - GitHub - akshat666/ionic-issue-radio

Please let me know your inputs.

Thanks! There are 2 problems here:

  1. You are doing value="it.id" which will cause the value of each radio to be set to the string “it.id” not whatever it.id evaluates to. You should bind the value using :value="it.id" instead.
  2. You are not importing IonRadioGroup and IonRadio and providing them to your Vue component. Without this import, you will be unable to use :value in the previous step.
1 Like

Hello @ldebeasi ,

Thank you. This did solve my issue. A very silly mistake.