Open In App

Primer CSS Forms Checkboxes and Radios

Improve
Improve
Like Article
Like
Save
Share
Report

Primer 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 steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

One such component in Primer CSS is Forms. In this article, we will learn about the Checkbox and Radios in Primer CSS Forms.

Checkbox in Primer CSS: A checkbox is another form of input in Primer CSS. 

Checkbox used Classes:

  • .form-checkbox: This class is used to add to the container containing the checkbox input.
  • .note: This class is add to a paragraph aligns it as a helping note to the checkbox input.
  • .highlight: This class is add to make the checkbox highlighted in color.
  • .form-check-details-trigger: This class is added to the particular checkbox, makes it triggers some other details when it is checked.
  • .form-check-details: This class added to the particular elements make it appear when the checkbox with “.form-check-details-trigger” is clicked.

Basic Syntax of Checkbox:

<form>
    <div class="form-checkbox">
        <label>
            ...
        </label>
    </div>
</form>

Radio in Primer CSS: Radio buttons in Primer CSS is a just the same as the indigenous CSS radio buttons. The only difference is that the radio buttons add an extra emphasis on the selected button by adding a blue border and another feature of radio buttons in Primer CSS is that we can add an option to the radio button. 

Class:

.radio-group: This class is added to the elements containing the group of radio buttons.

Basic Syntax of Radio:

<form>
    <div class="radio-group">
        ...
    </div>
</form>

Example 1: We have created 3 checkboxes in the forms. The first one have a supportive statement, the second one is highlighted and the third one shows some additional data checked.

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"/>
    <title>Document</title>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Primer CSS Checkbox</h2>
    <form>
        <div class="form-checkbox">
            <label>
                <input type="checkbox"
                    aria-describedby="help-text-for-checkbox"/>
                Student
            </label>
            <p class="note" id="help-text-for-checkbox">
                Choose only if you are a
                <strong>student.</strong>
            </p>
 
 
            <label>
                <input type="checkbox"/>
                <em class="highlight">Available for hire</em>
            </label>
             
<p>Are you studying in College?</p>
 
            <label aria-live="polite">
                <input type="radio"
                    class="form-checkbox-details-trigger"
                    name="hireme"/>
                Yes
                <span class="form-checkbox-details text-normal">
                    <span class="d-block mb-1">
                        Name of the Course
                    </span>
                    <input type="text" name=""
                        class="form-control input-contrast"
                        size="3"/>
                </span>
            </label>
        </div>
    </form>
</body>
</html>


Output:

 

Example 2: We have created sample radio groups input form.

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"/>
    <title>Document</title>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Primer CSS Checkbox</h2>
    <form>
        <label for="">Choose your Favourite Color:</label>
        <div class="radio-group" style="margin: 1em;">
            <input class="radio-input" id="color1"
                type="radio" name="options">
            <label class="radio-label" for="color1">
                Red
            </label>
            <input class="radio-input" id="color2"
                type="radio" name="options">
            <label class="radio-label" for="color2">
                Blue
            </label>
            <input class="radio-input" id="color3"
                type="radio" name="options">
            <label class="radio-label" for="color3">
                Yellow
            </label>
            <input class="radio-input" id="color4"
                type="radio" name="options">
            <label class="radio-label" for="color4">
                Green
            </label>
        </div>
        <br>
        <label for="">Choose your favourite
                Programming Language:</label>
        <div class="radio-group" style="margin: 1em;">
            <input class="radio-input" id="lang1"
                type="radio" name="options">
            <label class="radio-label" for="lang1">
                Java
            </label>
            <input class="radio-input" id="lang2"
                type="radio" name="options">
            <label class="radio-label" for="lang2">
                C++
            </label>
            <input class="radio-input" id="lang3"
                type="radio" name="options">
            <label class="radio-label" for="lang3">
                Python
            </label>
            <input class="radio-input" id="lang4"
                type="radio" name="options">
            <label class="radio-label" for="lang4">
                C
            </label>
        </div>
    </form>
</body>
</html>


Output:

 

Reference: https://primer.style/css/components/forms#checkboxes-and-radios



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