Onsen UI CSS Component Basic Radio Button

Last Updated : 17 Jul, 2022

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.

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 code below demonstrates how we can add radio buttons inside other CSS components like Card.

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="height:20px; padding:1px 0 0 0;">
        <div class="card card--material">
            <div class="card__content card--material__content">
                <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>
        </div>
    </div>
</body>
</html>

Output:

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

Onsen UI CSS Component Basic Toolbar Button

triashabiswas

Improve

Article Tags :

Onsen UI CSS Component Basic Radio Button

Similar Reads

Thank You!

What kind of Experience do you want to share?