Blaze UI Input Checkboxes and Radios
Last Updated :
06 May, 2022
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
Blaze UI Input Checkboxes and Radios are used to create the radios and checkboxes within the labels using the c-field–choice class. We can create these inputs when we ask the user to select any value or multiple values.
Blaze UI Input Checkboxes and Radios Class:
- c-field–choice: This class is used to create the checkbox and radio inputs.
Syntax:
<label class="c-field c-field--choice">
<input type="checkbox || radio">
...
</label>
Example 1: The following code demonstrates the Blaze UI Input Checkboxes and Radios using checkboxes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Blaze UI Input Checkboxes and Radios </ title >
< link rel = "stylesheet" href =
</ head >
< body class = "u-window-box-large" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
Blaze UI Input Checkboxes and Radios
</ h3 >
< label class = "c-field c-field--choice" >
< input type = "checkbox" >
Java
</ label >
< br >
< label class = "c-field c-field--choice" >
< input type = "checkbox" >
C++
</ label >
< br >
< label class = "c-field c-field--choice" >
< input type = "checkbox" >
Python
</ label >
</ body >
</ html >
|
Output:
Blaze UI Input Checkboxes and Radios
Example 2: The following code demonstrates the Blaze UI Input Checkboxes and Radios using radios.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Blaze UI Input Checkboxes and Radios </ title >
< link rel = "stylesheet" href =
</ head >
< body class = "u-window-box-large" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
Blaze UI Input Checkboxes and Radios
</ h3 >
< label class = "c-field c-field--choice" >
< input type = "radio" name = "gen" >
Male
</ label >
< label class = "c-field c-field--choice" >
< input type = "radio" name = "gen" >
Female
</ label >
</ body >
</ html >
|
Output:
Blaze UI Input Checkboxes and Radios
Reference: https://www.blazeui.com/components/inputs/
Share your thoughts in the comments
Please Login to comment...