Onsen UI CSS Component Basic Radio Button

Onsen UI is an innovative and practical HTML5 framework that is available for free (UI). Additionally, it makes UI creation simpler so that app developers may concentrate on the functionality of the software. With a large selection of high-quality UI elements made specifically for mobile apps and packed with functionalities that follow native iOS and Android design standards, Onsen UI is a great resource. AngularJS is the framework that Onsen UI is intended to operate with, although it may also be used with jQuery or any other framework. A JavaScript framework called Onsen UI was created using PhoneGap and Cordova.

The pre-built CSS components from Onsen UI make it simple to quickly construct flexible and attractive user interface layouts. For mobile developers, Onsen CSS Components is a web-based Topcoat theme roller that makes developing attractive UIs simpler. Onsen UI CSS Component Basic Radio Button helps us to create a radio button which is also utilized in a lot of applications especially form groups. 

Onsen UI CSS Component Basic Radio Button Classes:

• radio-button: This class is added to <label> element to create the material radio button.
• radio-button__input: This class is added to <input> element to create the material radio input.
• radio-button__checkmark: This class is added to a <div> element to create the material radio button checkmark.

Syntax:

<label class="radio-button">
  <input type="radio" class="radio-button__input" 
  name="r" checked="checked">
  <div class="radio-button__checkmark"></div>
  ...
</label>

Example 1: The code below demonstrates how to implement Onsen UI CSS Component Basic Radio Button.

Output:

 

Example 2: The code below demonstrates how we can add radio buttons inside other CSS components like Card.

Output:

 

Reference: https://onsen.io/v2/api/css.html#radio-button-category