Open In App

Spectre Forms Form Checkbox

Improve
Improve
Like Article
Like
Save
Share
Report

The Spectre Forms provide the most common control component used in regular forms. In this article, we will discuss the form checkbox. The form checkbox is an important component that is required to get the options from the user as usual it is like a radio button but can get multiple values at a time.

Forms Form Checkbox Class:

  • form-checkbox: This class gives the checkbox a spectre look that suits the spectre theme.
  • form-icon: This class is used to place the radio button options.

Syntax:

<label class="form-Checkbox"><label>

Below example illustrate the Spectre Forms Form Checkbox:

 

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Forms Form Checkbox Class</strong>
        <br>
    </center>
    <div class="form-group">
        <label class="form-label">
            Name
        </label>
        <input class="form-input" 
               placeholder="Please type your name">
        <label class="form-label">
            Mail Id
        </label>
        <input class="form-input" 
               placeholder="Your Mail Id">
        <br>
        <label class="form-label">Gender</label>
            <label class="form-checkbox">
              <input type="checkbox" name="gender">
              <i class="form-icon"></i> Male
            </label>
            <label class="form-checkbox">
              <input type="checkbox" name="gender">
              <i class="form-icon"></i> Female
            </label>
        </label>
        <br>
        <center>
            <button class="btn btn-success">
              LogIn
            </button>
            <button class="btn btn-error">
              Sign Up
            </button>
        </center>
    </div>
      
</body>
  
</html>


Output:

Spectre Forms Form Checkbox

Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-checkbox



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