Primer CSS Forms Radio Group

Last Updated : 19 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 offers Forms Radio Group that has tabs like controls. When one of the radio groups is selected then it has a blue border that gives it extra importance.

Primer CSS Radio Group classes:

radio-group: This class is used to define a parent radio group element. All the child elements classes are covered under this class.
radio-input: This class is used to define the radio group input element.
radio-label: This class is used to define the radio group label element.

Syntax:

<form>
  <div class="radio-group">
    <input class="radio-input" id="x" type="radio" name="options">
    <label class="radio-label" for="x">
        ....
    </label>
  </div>
</form>

Example 1: Below example demonstrates the use of Primer CSS Radio Group Forms.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Radio Group Forms </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="pl-12"> 
      <h1 class="color-fg-success mb-2"> GeeksforGeeks </h1> 
      <h3 class="mb-3"> Primer CSS Radio Group Forms </h3> 
  
      <form> 
        <div class="radio-group"> 
          <input class="radio-input" id="gfg-a" 
           type="radio" name="options"> 
          <label class="radio-label" for="gfg-a"> 
            Data Structure 
          </label> 
  
          <input class="radio-input" id="gfg-b" 
           type="radio" name="options"> 
          <label class="radio-label" for="gfg-b"> 
            Competitive Programming 
          </label> 
        </div> 
      </form> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Radio Group

Example 2: Below is another example that demonstrates the use of Primer CSS Radio Group Forms using SVG icons.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Radio Group Forms </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="pl-12"> 
        <h1 class="color-fg-success mb-2"> GeeksforGeeks </h1> 
        <h3 class="mb-3"> Primer CSS Radio Group Forms </h3> 
      
        <form> 
            <div class="radio-group"> 
              <input class="radio-input" id="gfg-a" type="radio" 
                  name="options"> 
              <label class="radio-label" for="gfg-a"> 
                <svg width="18" height="18" fill="currentColor" 
                     class="bi bi-laptop" viewBox="0 0 15 15"> 
                  <path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5  
                    0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1  
                    3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0  
                    12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5  
                    0 0 1 0 12.5z"/> 
                </svg> 
                    Data Structure 
                </label> 
  
              <input class="radio-input" id="gfg-b" type="radio" 
                  name="options"> 
              <label class="radio-label" for="gfg-b"> 
              
                <svg width="16" height="16" fill="currentColor" 
                    class="bi bi-pen" viewBox="0 0 16 16"> 
                  <path d="m13.498.795.149-.149a1.207 1.207  
                      0 1 1 1.707 1.708l-.149.148a1.5 1.5 0  
                    0 1-.059 2.059L4.854 14.854a.5.5 0 0  
                    1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5  
                    0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854  
                    4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1  
                    11.5.796a1.5 1.5 0 0 1 1.998-.001zm-.644.766a.5.5  
                    0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44  
                    3.854a.5.5 0 0 0 0-.708l-1.585-1.585z"/> 
                </svg> 
                Competitive Programming</label> 
            </div> 
        </form> 
    </div> 
</body> 
  
</html>