Primer CSS Inputs Forms Last Updated : 20 Apr, 2022 Comments Improve Suggest changes Like Article Like 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 Comment More infoAdvertise with us Next Article Primer CSS Inputs Forms Y yasarnnp Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Component Similar Reads Primer CSS Form Groups 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 3 min read Pure CSS Forms Forms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms. Pure CSS Forms Classes: Default Form Stacked Form Aligned Form Grouped Inputs Default Form: Add the class "pure-form" to any <form> element to create a de 4 min read Pure CSS Form Grouped Inputs Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w 2 min read Pure CSS Inputs Inputs are important in any webpage form. It is used to take various inputs from the user which are essential in collecting data or information. Following are the various types of inputs in Pure CSS: Required InputsDisabled InputsRead Only InputsRounded InputsCheckboxes and Radios Required Inputs: I 3 min read Primer CSS Kitchen Sink Forms 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 2 min read Pure CSS Form Input Sizing Forms are essential in websites to collect data or information for various purposes. Using Pure CSS Forms, we can create different types of forms. The size of the inputs of forms is always important. So inputs are important in any webpage form. It is used to take various inputs from the user which a 2 min read Primer CSS Forms Radio Group 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 3 min read Primer CSS Selects Forms 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 2 min read Spectre Form Input The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss form input. The form input is an important component that is required to get the data from the user as usual. Form Input Class: form-input: This class is used to create the input fiel 1 min read Pure CSS Rounded Inputs Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Pure CSS provides a " 1 min read Like