Open In App

Blaze UI Input Checkboxes and Radios

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 06 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads