Blaze UI Input Fieldsets and Legends

Last Updated : 21 Apr, 2022

Blaze UI is an open-source CSS framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

Blaze UI Input Fieldsets and Legends is used to create the fieldsets and fieldset legends with some choices. We use the fieldset class to create the fieldset and fieldset__legend to create the legend. In this article, we will discuss Blaze UI Input Fieldsets and Legends.

Blaze UI Input Fieldsets and Legends Classes:

o-fieldset: This class is used to create the fieldset.
o-fieldset__legend: This class is used to create the fieldset legend.

Syntax:

<fieldset class="o-fieldset">
  <legend class="o-fieldset__legend">
      ...
  </legend>
   ...
</fieldset>

Example 1: The following example demonstrates the Blaze UI Input Fieldsets and Legends using radio inputs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Fieldsets and Legends </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
  <div class="u-centered"> 
    <h1 style="color: green;"> GeeksforGeeks </h1> 
    <h3> Blaze UI Input Fieldsets and Legends </h3> 
  
    <fieldset class="o-fieldset"> 
      <legend class="o-fieldset__legend"> 
        Choices: 
      </legend> 
  
      <label class="c-field c-field--choice"> 
        <input type="radio" name="opt"> 
        GFG option 1 
      </label> 
  
      <label class="c-field c-field--choice"> 
        <input type="radio" name="opt"> 
        GFG option 2 
      </label> 
  
      <label class="c-field c-field--choice"> 
        <input type="radio" name="opt"> 
        GFG option 3 
      </label> 
    </fieldset> 
  </div> 
</body> 
  
</html>

Output:

Blaze UI Input Fieldsets and Legends

Example 2: The following example demonstrates the Blaze UI Input Fieldsets and Legends using checkbox inputs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Fieldsets and Legends </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;"> GeeksforGeeks </h1> 
        <h3> Blaze UI Input Fieldsets and Legends </h3> 
  
        <fieldset class="o-fieldset"> 
            <legend class="o-fieldset__legend"> 
              Choices: 
            </legend> 
  
            <label class="c-field c-field--choice"> 
              <input type="checkbox" name="opt"> 
              GeeksforGeeks 1 
            </label> 
  
            <label class="c-field c-field--choice"> 
              <input type="checkbox" name="opt"> 
              GeeksforGeeks 2 
            </label> 
  
            <label class="c-field c-field--choice"> 
              <input type="checkbox" name="opt"> 
              GeeksforGeeks 3 
            </label> 
  
            <label class="c-field c-field--choice"> 
              <input type="checkbox" name="opt"> 
              GeeksforGeeks 4 
            </label> 
        </fieldset> 
    </div> 
</body> 
  
</html>