Primer CSS Form Groups

Last Updated : 24 Apr, 2022

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 Form Groups is used to create the form groups using the form header and form body. We can create the form group using the form-group class. In this article, we will discuss Primer CSS Form Groups.

Primer CSS Form Groups Classes:

form-group: This class is used to create the form group with some elements.
form-group-header: This class is used to create the form group header.
form-group-body: This class is used to create the form group body.

Syntax:

<form>
  <div class="form-group">
    <div class="form-group-header">
       ....
    </div>
    <div class="form-group-body">
       ....
    </div>
  </div>
</form>

Example 1: The following example demonstrates the Primer CSS Form Groups.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Primer CSS Form Groups </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Form Groups </h3>
    
        <form>
            <div class="form-group">
                <div class="form-group-header">
                    <label for="firstname"> First Name </label>
                </div>
                <div class="form-group-body">
                    <input class="form-control" type="text" 
                        placeholder="First Name" id="firstname" />
                </div>
            </div>

            <div class="form-group">
                <div class="form-group-header">
                    <label for="lastname"> Last Name </label>
                </div>
                <div class="form-group-body">
                    <input class="form-control" type="text" 
                        placeholder="Last Name" id="lastname" />
                </div>
            </div>

            <div class="form-group">
                <div class="form-group-header">
                    <label class="c-label" for="gender">
                        Gender:
                    </label>
                </div>
                <div class="form-group-body">
                    <input id="gender" type="radio" name="gen" > 
                        Male
                    <input id="gender" type="radio" name="gen" > 
                        Female
                </div>
            </div>
        </form>
    </div>
</body>

</html>

Output:

Example 2: The following example demonstrates the Primer CSS Form Groups.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Primer CSS Form Groups </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Form Groups </h3>
    
        <form>
            <div class="form-group">
                <div class="form-group-header">
                    <label for="address"> Address: </label>
                </div>
                <div class="form-group-body ml-6 mr-6">
                    <textarea class="form-control" 
                        id="address"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="form-group-header">
                    <label for="firstname"> Choices: </label>
                </div>
                <div class="form-group-body">
                    <label class="c-field c-field--choice">
                        <input type="checkbox" name="opt">
                        GFG 1
                    </label>
        
                    <label class="c-field c-field--choice">
                        <input type="checkbox" name="opt">
                        GFG 2
                    </label>
        
                    <label class="c-field c-field--choice">
                        <input type="checkbox" name="opt">
                        GFG 3
                    </label>
                </div>
            </div>

            <div class="form-group">
                <div class="form-group-header">
                    <label for="drop"> Choose any: </label>
                </div>
                <div class="form-group-body">
                    <select class="form-select" id="drop">
                        <option> Choose any </option>
                        <option> C++ </option>
                        <option> Java </option>
                        <option> Python </option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</body>

</html>