Primer CSS Forms Radio Group Last Updated : 19 Apr, 2022 Comments Improve Suggest changes Like Article Like Report 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> Output: Primer CSS Radio Group Reference: https://primer.style/css/components/forms#radio-group Comment More infoAdvertise with us Next Article Primer CSS Forms Radio Group T thacker_shahid Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Component Similar Reads Primer CSS Form Group Validation 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 3 min read Primer CSS Form Groups 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 3 min read Primer CSS Inputs Forms 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 2 min read Primer CSS Kitchen Sink Forms 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 2 min read Primer CSS Selects Forms 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 2 min read Pure CSS Form Grouped Inputs Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w 2 min read Primer CSS Button Groups 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e 4 min read Pure CSS Forms Forms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms. Pure CSS Forms Classes: Default Form Stacked Form Aligned Form Grouped Inputs Default Form: Add the class "pure-form" to any <form> element to create a de 4 min read Pure CSS Stacked Form Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w 2 min read Semantic-UI Form Grouped Fields Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A form is the section of a document that 3 min read Like