Spectre Forms Input groups

Last Updated : 30 Jan, 2022

Spectre Forms Input groups are used to categorize the form field for example personal details, billing details. If the user wants to attach text and button along with input, add the input-group class to the input container. Add the input-group-addon class to the text element and input-group-btn to the button element.

Forms Input groups classes:

input-group: This class is used to the input field in a group applicable on the input container.
input-group-addon: This class is used to the input field in a group applicable on the input container.
input-group-btn: This class is used to button in a group.

Syntax:

<div class="input-group">
    <span class="input-group-addon">...</span>
    <button class="input-group-btn">...</button>
    ...
</div>

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head>     
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE  Forms Input types Class</strong> 
        <br><br> 
    </center> 
    <form > 
        <div class="input-group"> 
            <div class="input-group"> 
                <span class="input-group-addon "> 
                  Name 
                </span> 
                <input type="text" class="form-input"
                       placeholder="Name"> 
            </div> 
            <span class="input-group-addon"> 
              Course 
            </span> 
              
               <input type="text" class="form-input"
                      placeholder="Course you want"> 
        </div> 
        <br> 
        <div class="input-group col-12"> 
            <span class="input-group-addon"> 
              Email Id 
            </span> 
            <input type="text col-6" class="form-input"
                   placeholder="Email Id"> 
            <button class="btn btn-success input-group-btn col-3"> 
                             Buy Course 
            </button> 
        </div> 
        <label class="form-checkbox"> 
            <input type="checkbox"> 
              <i class="form-icon"></i> 
              I agree that the content of the course  
              will not be used for any bad purpose 
        </label> 
    </form> 
</body> 
</html>