Onsen UI Radio Button CSS Components

Last Updated : 02 Sep, 2022

Onsen UI is a free open-source HTML5 framework for creating innovative and usable user interfaces (UI). It also simplifies user interface design, letting app developers concentrate on the program’s functionality.

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 Radio Button CSS Components help us to create a radio button which is also utilized in a lot of applications especially form groups.

Onsen UI Radio Button CSS Components:

Basic Radio Button: It is used to create a basic radio button.
Material Radio Button: It is used to create a material radio button.

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
</head> 
  
<body> 
    <div style="margin:3rem;font-family:Roboto, sans-serif;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3 style="margin-top:1rem;"> 
            Onsen UI CSS Component Basic Radio Button 
        </h3> 
    </div> 
    <div style="margin:3rem;font-family:Roboto, sans-serif;"> 
        <label class="radio-button"> 
            <input type="radio" class="radio-button__input"
                                name="r" checked="checked"> 
            <div class="radio-button__checkmark"></div> 
            DSA 
        </label> 
  
        <label class="radio-button"> 
            <input type="radio" class="radio-button__input" name="r"> 
            <div class="radio-button__checkmark"></div> 
            Algorithms 
        </label> 
  
        <label class="radio-button"> 
            <input type="radio" class="radio-button__input" name="r"> 
            <div class="radio-button__checkmark"></div> 
            Web Technologies 
        </label> 
    </div> 
</body> 
</html>

Output:

Example 2: The following example demonstrates the Onsen UI CSS Component Material Radio Button.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <strong> 
            Onsen UI CSS Component Material Radio Button 
        </strong> <br> <br> 
  
        <label class="radio-button radio-button--material"> 
            <input type="radio"
                class="radio-button__input 
                radio-button--material__input" 
                name="rdi" checked> 
            <div class="radio-button__checkmark 
                radio-button--material__checkmark"> 
            </div> 
            Java 
        </label> 
  
        <label class="radio-button radio-button--material"> 
            <input type="radio"
                class="radio-button__input 
                radio-button--material__input" 
                name="rdi"> 
            <div class="radio-button__checkmark 
                radio-button--material__checkmark"> 
            </div> 
            Python 
        </label> 
    </center> 
</body> 
  
</html>