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:
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 =
< link rel = "stylesheet" href =
</ 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 >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< script src =
</ 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 >
|
Output:
Reference: https://onsen.io/v2/api/css.html#radio-button-category
Share your thoughts in the comments
Please Login to comment...