Ionic 2 Radio

admin

8 years ago

Ionic 2 Radio Button: Radio button is input component which enables user to check/uncheck and holds the boolean value. Ionic 2 uses the html radio buttons but it adds some styles to the default radio buttons. Radio button component enables user to select one radio from the group of radio buttons.
It is very simple to create radio buttons in Ionic 2. Here in this tutorial we are going to explain how you can create radio buttons in ionic 2. You can also use our online editor to run and see the output of the example.

Ionic 2 Radio Button Example

Let us create basic radio button-

Ionic 2 Radio Button Example:

<ion-list radio-group>
  <ion-list-header>
    Select Language
  </ion-list-header>
  <ion-item>
    <ion-label>PHP</ion-label>
    <ion-radio checked="true" value="PHP"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Ruby</ion-label>
    <ion-radio value="Ruby"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Java</ion-label>
    <ion-radio value="Java"></ion-radio>
  </ion-item>
</ion-list>

Try it »

checked attribute is used to set default selected and disabled attribute is used to disable the radio button.

If you run the above example it will produce the output something like this –

Input Properties

Following input properties are available-

Attribute	Type	Details
color	string	This is use to change the radio button color, you can use predefined colors to use. For example: “primary”, “secondary”, “danger”.
mode	string	This is used to apply mode to this component. Example- ios, wp, or md.
value	any	This is used to assign the value to the radio button. Defaults to the generated id.
checked	boolean	This is used to check/uncheck the radio button. Default false.
disabled	boolean	This is used to eanble/disable the radio button. Default false.