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.
-
Sizing: We can customize the sizing using the following classes:
-
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=
</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=
</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>
</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=
</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=
</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=
</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:
Reference: https://primer.style/css/components/forms