Ionic Radio

Ionic Radio

The radio button is the type of input component that has a Boolean value. The Ionic radio button has a different pattern on every platform, as well as other Ionic components. Radio components are normally used as a collection of related options within the group, but can also be used alone. It is a button that can be checked or unchecked. The user can click the button to check or uncheck it. It can also be verified from the template using the checked attribute.

Use an <ion-radio-group> component with a radio-group property to group a collection of radio buttons. It permits you to choose at most one radio button from a collection. When radio buttons are inside a radio group, one radio button in the group can be completely checked at any time. If the radio button is not placed in a group, they'll all have the ability to be checked at the same time.

Example: This example shows that how can you use the radio buttons in the ionic application.

  
   
   
  Radio Button 
   
   
    
   
   
   
   
   
  Games 
    
   
  Pubg 
   
   
   
  Cards 
   
    
   
   
   
  Rugby 
   
   
    
  Badminton 
   
   
   
  Ludo 
   
    
   
  Hockey 
   
   
   
  Cricket 
   
    
   
   
    

Output: After executing this code, you will get the output, which is shown below screenshot.

Multiple Radio Button group

Sometimes you want to make more than one group of radio buttons. Here, we're also going to see the use of the checked and unchecked radio button properties.

Example: This example shows how you can select more than one radio button at a time.

  
   
   
  Radio Button 
   
   
   
   
    
   
   
   
  Games
   
   
  Cricket 
   
    
   
  Hockey 
   
   
   
   
    
  Badminton 
   
   
   
   
   
  Courses 
   
   
  Python  
   
   
   
  Android 
   
   
   
  Java 
   
   
   
  C++ 
   
   
   
   
    

Output: After executing this code, you will get the output, which is shown in the below screenshot.