Spectre Form sizes

Last Updated : 08 Feb, 2022

Spectre Forms Form sizes is used to define the size of the form depending on the page you have to change the size of the form sometime. For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the form’s elements.

Forms Form sizes Classes:

input-sm: This class is used to set the input field small.
input-lg: This class is used to set the input field large.
select-sm: This class is used to set the select field small.
select-lg: This class is used to set the select field large.
label-sm: This class is used to set the label field small.
label-lg: This class is used to set the label field large.

Syntax:

 <element class="Form sizes Classes"></element>

Example 1: In this example we will input-sm, lg and label-sm, lg. Similarly we can do that on Select elements.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Forms Class</title>
    <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 Form sizes Class</strong>
        <br>
    </center>
    <form>
              <div class="form-group">
                  <label class="form-label">
                  Name In Small Size:
                </label>
                  <input class="form-input input-sm"
                       type="text"
                       placeholder="Name">
                  <label class="form-label">
                  Name In Large Size:
                </label>
                  <input class="form-input input-lg"
                       type="text"
                       placeholder="Name">
              </div>
            <label class="form-label">
              Gender In Small Size:
            </label>
            <label class="form-radio form-inline">
              <input type="radio"
                     name="gender"
                     class="input-sm">
              <i class="form-icon"></i>Male
            </label>
            <label class="form-radio form-inline">
              <input type="radio"
                     name="gender"
                     class="input-sm">
              <i class="form-icon"></i>Female
            </label>
            <label class="form-label">
              Gender In Large Size:
            </label>
            <label class="form-radio form-inline input-lg">
              <input type="radio"
                     name="gender"
                     class="input-lg">
              <i class="form-icon"></i>Male
            </label>
            <label class="form-radio form-inline input-lg">
              <input type="radio"
                     name="gender"
                     class="input-lg">
              <i class="form-icon"></i>Female
            </label>
         </form>
</body>
 
</html>