Onsen UI CSS Component Radio Button in List Item

Last Updated : 22 Jun, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

Lists are used to store data or information on web pages in ordered or unordered form. Onsen UI CSS Component Radio Button in List Item is used to create the radio type input in a list using the below classes.

Onsen UI CSS Component Radio Button in List Item Classes:

radio-button: This class is used to create the radio button.
radio-button__input: This class is used to create the radio input.
radio-button__checkmark: This class is used to create a radio checkmark.

Syntax:

<ul class="list">
  <li class="list-item list-item--tappable">
    <div class="list-item__left">
      <label class="radio-button">
        <input type="radio" id="r1" 
               class="radio-button__input" 
               name="r">
        <div class="radio-button__checkmark">
        </div>
      </label>
    </div>
    <label for="r1" class="list-item__center">
      ...
    </label>
  </li>
  ....
</ul>

Example 1: The following example demonstrates the Onsen UI CSS Component Radio Button in List Item.

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 Radio Button in List Item 
        </strong> <br> <br> 
  
        <ul class="list"> 
            <li class="list-item list-item--tappable"> 
                <div class="list-item__left"> 
                    <label class="radio-button"> 
                        <input type="radio" id="btn1" 
                               class="radio-button__input" 
                               name="rdio" checked> 
                        <div class="radio-button__checkmark"> 
                        </div> 
                    </label> 
                </div> 
                <label for="btn1" class="list-item__center"> 
                    Java 
                </label> 
            </li> 
  
            <li class="list-item list-item--tappable"> 
                <div class="list-item__left"> 
                    <label class="radio-button"> 
                        <input type="radio" id="btn2" 
                               class="radio-button__input" 
                               name="rdio"> 
                        <div class="radio-button__checkmark"> 
                        </div> 
                    </label> 
                </div> 
                <label for="btn2" class="list-item__center"> 
                    Python 
                </label> 
            </li> 
        </ul> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following example demonstrates the Onsen UI CSS Component Radio Button in List Item.

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 Radio Button in List Item 
        </strong> <br> <br> 
  
        <div class="list-title list-title--material"> 
            This is list Title 
        </div> 
        <ul class="list"> 
            <li class="list-item list-item--tappable"> 
                <div class="list-item__left"> 
                    <label class="radio-button"> 
                        <input type="radio" id="btn1" 
                               class="radio-button__input" 
                               name="rdio" checked> 
                        <div class="radio-button__checkmark"> 
                        </div> 
                    </label> 
                </div> 
                <label for="btn1" class="list-item__center"> 
                    C++ 
                </label> 
            </li> 
  
            <li class="list-item list-item--tappable"> 
                <div class="list-item__left"> 
                    <label class="radio-button"> 
                        <input type="radio" id="btn2" 
                               class="radio-button__input" 
                               name="rdio"> 
                        <div class="radio-button__checkmark"> 
                        </div> 
                    </label> 
                </div> 
                <label for="btn2" class="list-item__center"> 
                    Python 
                </label> 
            </li> 
  
            <li class="list-item list-item--tappable"> 
                <div class="list-item__left"> 
                    <label class="radio-button"> 
                        <input type="radio" id="btn3" 
                               class="radio-button__input" 
                               name="rdio"> 
                        <div class="radio-button__checkmark"> 
                        </div> 
                    </label> 
                </div> 
                <label for="btn3" class="list-item__center"> 
                    Java 
                </label> 
            </li> 
        </ul> 
    </center> 
</body> 
  
</html>