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>