Skip to content
Related Articles

Related Articles

Spectre Forms Form Radio

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Jan, 2022

The Spectre Forms provide the most common control component used in regular forms. In this article, we will discuss the form radio. The form radio is an important component that is required to get the boolean option from the user as usual.

Forms Form Radio Class:

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

Syntax:

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

Below example illustrate the Spectre Forms Form Radio:

 

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 Radio 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-radio">
              <input type="radio" name="gender" checked>
              <i class="form-icon"></i> Male
            </label>
            <label class="form-radio">
              <input type="radio" 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 Radio

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!