Spectre Forms Inline Form

Last Updated : 23 Jul, 2025

The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss the form inline forms. The form inline forms is an important component that can make any input field in a single line. Like In the previous articles we used radio, checkbox, etc they can be placed in a single line.

Forms Form Inline forms Class:

  • form-inline: This class is used to create a radio and checkboxes in a single line.

Syntax:

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

The below example illustrates the Spectre Forms Form Inline forms:

Example:

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 class="text-success">
          GeeksforGeeks
        </h1>
        <strong>
          SPECTRE Forms Form 
          Inline forms Class
        </strong>
    </center>
    <br>
    <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 form-inline">
          <input type="checkbox" name="gender">
          <i class="form-icon"></i>Male
        </label>
        <label class="form-checkbox form-inline">
          <input type="checkbox" name="gender">
          <i class="form-icon"></i>Female
        </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 Inline forms
Spectre Forms Form Inline forms

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

Comment

Explore