Part 9 radio button in ionic

Like the checkbox, a radio is an input component that holds a boolean value. Under the hood, radios are no different than HTML radio inputs. However, like other Ionic components, radios are styled differently on each platform. Unlike checkboxes, radio components form a group, where only one radio can be selected at a time. Use the checked attribute to set the default value, and the disabled attribute to disable the user from changing to that value.



<ion-list radio-group>

  <ion-list-header>

    Select Gender

  </ion-list-header>



  <ion-item>

    <ion-label>Male</ion-label>

    <ion-radio checked="true" value="male"></ion-radio>

  </ion-item>



  <ion-item>

    <ion-label>Female</ion-label>

    <ion-radio value="female"></ion-radio>

  </ion-item>



</ion-list>