Open In App

Primer CSS Inputs Forms

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS offers forms that are used to take some set of inputs from the users. Primer CSS Inputs forms create an input field smaller, larger, and full width using some extra classes.

Primer CSS Inputs Forms Class: 

  • input-sm: This class is used to create small input fields in Primer CSS Forms.
  • input-lg: This class is used to create large input fields in Primer CSS Forms.
  • input-block: This class is used to create blocked input fields in Primer CSS Forms.

Syntax:

<form>
      <input class="form-control input-sm" 
          type="..." placeholder="...." />
      ...
</form>

Example 1: Below example demonstrates the use of Primer CSS Inputs Forms using the input-sm class.  

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Input Forms </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <center>
        <h1 class="color-fg-success"
            GeeksforGeeks 
        </h1>
          
        <h3> Primer CSS Input Forms-small </h3>
  
        <form>
            <input class="form-control input-sm mt-3" 
                type="text" placeholder="GfG username..." />
  
            <select class="form-select input-sm mt-3">
                <option>Choose any course</option>
                <option>DSA</option>
                <option>OOP's</option>
                <option>DBMS</option>
                <option>OS</option>
            </select>
        </form>
    </center>
</body>
  
</html>


Output:

Primer CSS Inputs Forms

Example 2: Below example demonstrates the use of Primer CSS Inputs Forms using the input-lg class.  

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Input Forms </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <center>
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Input Forms-large </h3>
          
        <form>
            <input class="form-control input-lg mt-3" 
                type="text" placeholder="GfG username..." 
            />
  
            <select class="form-select input-lg mt-3">
              <option>Choose any course</option>
              <option>DSA</option>
              <option>OOP's</option>
              <option>DBMS</option>
              <option>OS</option>
            </select>
        </form>
    </center>
</body>
  
</html>


Output:

Primer CSS Inputs Forms

Example 3: Below example demonstrates the use of Primer CSS Inputs Forms using the input-block class.  

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Input Forms </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin-inline: 10rem;">
    <center>
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Input Forms-block </h3>
  
        <form>
          <input class="form-control input-block mt-3" 
            type="text" placeholder="GfG username..." 
          />
  
          <select class="form-select input-block mt-3">
            <option>Choose any course</option>
            <option>DSA</option>
            <option>OOP's</option>
            <option>DBMS</option>
            <option>OS</option>
          </select>
        </form>
    </center>
</body>
</html>


Output:

Primer CSS Inputs Forms

Reference: https://primer.style/css/components/forms#inputs



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