Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.
Primer CSS Forms provide different components for inputs such as text, checkbox, radio, selects, and textarea. In this article, we will learn about the different inputs that have different customization types.
Primer CSS Forms Types and Classes:
- Kitchen Sink: Kitchen Sink Forms are used to create the form with all the inputs and buttons side by side for size testing and alignment of input elements.
- btn: This class is used to create the default button.
- form-control: This class is used to create the form input field.
- Inputs: The input element contains all the input types like text, radio, etc. The input has the following classes:
- Sizing: We can customize the sizing using the following classes:
- input-sm: It makes the size of the input small.
- input-lg: It makes the size of the input large.
- input-block: It makes the size of input of block type.
- Input group: The inputs can be grouped by using the class input-group.
- Customization: The different inputs can be customized as follows:
- input-contrast: The input can have light background by using this class giving a contrast effect.
- disabled: This option makes the input disabled with the form-control class.
- input-hide-webkit-autofill: This class hides the icon and/or dropdown for auto-filling.
- Select: This type of input is used to select different options from a dropdown. The following classes are used in it:
- form-select: This class is used to create a select menu.
- select-sm: This class makes the input of small size.
- Form Groups: Form groups are used to group the different elements of the form and make them appear structured so that the form seems meaningful and adapts to different screen sizes. It has the following different classes.
- form-group: This is used to create a form group.
- form-group-header: It is used to create a header in the form group.
- form-group-body: It contains the form group input elements.
- Form Group Validation: Validation is a necessary task so that the user inputs the data in the right format and order. The form group uses the following different classes:
- Success: The class used is succeeded and is added if the input is valid. The class is added to the form group element.
- Error: The class used is errored and is added if the input is not valid. The class is added to the form group element.
- Warning: The class used is warn and is added to warn the user because of input. The class is added to the form group element.
- form-actions: This class is used to wrap the elements that perform some actions such as the save button or link for some validation.
- Checkboxes and radios: The checkboxes and radios are used to select some option value or set something to true/false. The different classes are as follows:
- form-checkbox: This is used to create a container for the checkbox which contains the checkbox element and the label.
- input-radio: This is used to create a radio input.
- Radio group: The class used is radio-group to place radio inputs inside a group together.
Syntax: Create a form element with some input elements as follows.
<form>
<label for="name">Name</label>
<input class="form-control" type="text" id="name" />
<label for="email">Email address</label>
<input class="form-control" type="email" id="email" />
<button class="btn" type="submit">...</button>
</form>
Example 1: In the following example, we have different input elements with different sizes and an input group.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Forms</strong>
<br/>
<br/>
</center>
<form class="input-group">
<label for="name">Name</label>
<input class="form-control" type="text" id="name" />
<label for="email">Email address</label>
<input class="form-control" type="email" id="email" />
<label for="age">Age</label>
<input class="form-control" type="number" id="age" />
<button class="btn" type="submit">Submit</button>
</form>
</div>
</body>
</html>
Output:
Example 2: In the following example, we have different customization like disabled, input-contrast, and input-hide-webkit-autofill contact info suggestions on the different input elements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Forms</strong>
<br/>
<br/>
</center>
<form class="input-group">
<label for="name">Name</label>
<input class="form-control" type="text"
id="name" disabled />
<label for="email">Email address</label>
<input class="form-control
input-hide-webkit-autofill input-contrast"
type="email" id="email"/>
<label for="age">Age</label>
<input class="form-control" type="number" id="age" />
<button class="btn" type="submit">Submit</button>
</form>
</div>
</body>
</html>
Output:
Example 3: In the following example, we have the select element with different customization.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Forms</strong>
<br/>
<br/>
</center>
<form class="form-group">
<select class="form-select" aria-label="Topics">
<option>Choose an option</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>Web Development</option>
</select>
<select class="form-select select-sm"
aria-label="Programming Language">
<option>Choose an Programming Language</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
</select>
</form>
</div>
</body>
</html>
Output:
Example 4: In the following example, we have the form-group with all its different classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Forms</strong>
<br />
<br />
</center>
<form>
<div class="form-group">
<div class="form-group-header">
<label for="name">Name</label>
</div>
<div class="form-group-body">
<input class="form-control" type="text" id="name"
placeholder="Enter your name"/>
</div>
</div>
<div class="form-group">
<div class="form-group-header">
<label for="Topics">Select your choices</label>
</div>
<div class="form-group-body">
<select class="form-select" aria-label="Topics">
<option>Choose an option</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>Web Development</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-group-header">
<label for="about">Enter about you</label>
</div>
<div class="form-group-body">
<textarea class="form-control" id="about"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
Output:
Example 5: In the following example, we have different validations for the inputs.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Forms</strong>
<br/>
<br/>
</center>
<form>
<div class="form-group successed">
<div class="form-group-header">
<label for="name">Name</label>
</div>
<div class="form-group-body">
<input class="form-control" type="text"
id="name" placeholder="Enter your name"
aria-describedby="name-input-validation"/>
</div>
<p class="note success" id="about-input-validation">
Your name is valid
</p>
</div>
<div class="form-group warn">
<div class="form-group-header">
<label for="age">Name</label>
</div>
<div class="form-group-body">
<input class="form-control" type="number"
id="age" placeholder="Enter your age"
aria-describedby="age-input-validation"/>
</div>
<p class="note warning" id="age-input-validation">
Your age seems to be incorrect
</p>
</div>
<div class="form-group errored">
<div class="form-group-header">
<label for="about">Enter about you</label>
</div>
<div class="form-group-body">
<textarea class="form-control" id="about"
aria-describedby="about-input-validation">
</textarea>
</div>
<p class="note error" id="about-input-validation">
Your about text has some error.
</p>
</div>
</form>
</div>
</body>
</html>
Output:
Example 6: In the following example, we have a checkbox, radio, and radio group.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Forms</strong>
<br/>
<br/>
</center>
<form>
<div class="form-checkbox">
<label>
<input type="checkbox" checked="checked" />
Tutorials available
</label>
</div>
<div class="form-group-header">
<label>Choose topic</label>
</div>
<div class="radio-group">
<input class="radio-input" id="ds"
type="radio" name="options" />
<label class="radio-label" for="ds">
Data Structures</label>
<input class="radio-input" id="algo"
type="radio" name="options" />
<label class="radio-label" for="algo">
Algorithms</label>
<input class="radio-input" id="webdev"
type="radio" name="options" />
<label class="radio-label" for="webdev">
Web Development</label>
</div>
</form>
</div>
</body>
</html>
Output:
Similar Reads
Primer CSS Primer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and intero
3 min read
Primer CSS Introduction Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
4 min read
Primer CSS Utility
Primer CSS AnimationsPrimer 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
4 min read
Primer CSS BordersPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Borders is a utility class that applies b
3 min read
Primer CSS Box shadowPrimer 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
4 min read
Primer CSS ColorsPrimer 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. It is highly reusable and flexible. I
7 min read
Primer CSS DetailsPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
2 min read
Primer CSS FlexboxPrimer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable.Primer CSS Flexbox:Flex container: Flex Container is used to make
6 min read
Primer CSS GridPrimer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
4 min read
Primer CSS LayoutPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay
2 min read
Primer CSS MarginPrimer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.In this article, we'll s
3 min read
Primer CSS PaddingPadding is used to create space around the element, inside any defined border. We can set different padding for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.Primer CSS Padding:Shorthand: Padding has many variations, that can be
3 min read
Primer CSS TypographyPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
5 min read
Primer CSS Components
Primer CSS AlertsPrimer 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. It is highly reusable and flexible. It is created with GitHub’s design system.Alerts are used to signify an important message to th
3 min read
Primer CSS AutocompletePrimer CSS is a free open-source CSS framework that's created upon systems that make the insights of the essential style elements like spacing, typography, and color. This methodical system makes sure its patterns are steady and interoperable with every other. It's largely reusable and adaptable. Â I
3 min read
Primer CSS AvatarsPrimer CSS is a free open-source CSS framework that's built upon systems that make the inspiration of the essential style elements like spacing, typography, and color. This systematic method makes sure its patterns are steady and interoperable with every other. it's highly reusable and versatile. Â I
4 min read
Primer CSS BlankslatePrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible. Primer CSS Blankslate is used as a placeholder when
5 min read
Primer CSS Box OverlayPrimer 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
Primer CSS Branch namePrimer 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
Primer CSS BreadcrumbsPrimer 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. It is highly reusable and flexible. It is created with GitHub’s design system.Primer CSS offers us so many components, and Breadcru
2 min read
Primer CSS ButtonsPrimer 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
Primer CSS DropdownPrimer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.Dropdowns are lightweigh
4 min read
Primer CSS FormsPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Forms provide different components for in
6 min read
Primer CSS HeaderPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
3 min read
Primer CSS LabelsPrimer 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 LinksPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and colour. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Links are used to decorate links in the
3 min read
Primer CSS LoadersPrimer 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
Primer CSS MarkdownPrimer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and intero
3 min read
Primer CSS NavigationPrimer CSS is a free open-source CSS framework that is formed upon systems that establish the foundation of the basic style elements such as spacing, typography, and color. This systematic structure ensures our patterns are stable and interoperable with every other. Its approach to CSS is inspired b
6 min read
Primer CSS PaginationPrimer 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
Primer CSS PopoverPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
5 min read
Primer CSS ProgressPrimer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
4 min read
Primer CSS Select menuPrimer CSS is a free open-source CSS framework built on principles that establish the foundation for basic design elements including spacing, typeface, and color. Our patterns will be consistent and compatible as a result of this method. Its CSS approach is influenced by object-oriented CSS concepts
4 min read
Primer CSS SubheadPrimer 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
Primer CSS TimelinePrimer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
7 min read
Primer CSS ToastsPrimer 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 TruncatePrimer CSS is a CSS framework that comes with pre-styled components and a design language with spacing, typography, and Theming that helps in building a website effectively. This systematic method makes sure our patterns are steady and interoperable with every other. It is created with GitHub’s desi
2 min read
Primer CSS Marketing
Primer CSS Marketing ButtonsPrimer 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. It is highly reusable and flexible. It is created with GitHub’s design system.Buttons are used to define an action that can be perf
2 min read
Primer CSS Marketing FiltersPrimer 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. It is highly reusable and flexible. It is created with GitHub’s design system.Filters are used to change the overall background or
2 min read
Primer CSS Marketing LinksPrimer 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
Primer CSS Marketing TypographyTypography is a feature of Primer for styling and formatting the text content. It is used to create headings, subheadings, paragraphs, pull quotes, add more design-oriented font styles, and much more. It's responsive, but on a smaller scale, and the headlines are set in the marketing typeface.Primer
3 min read