Primer CSS Boolean Attributes

Last Updated : 08 Jun, 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 Boolean Attributes are those attributes in which we do not need to set the value. If the boolean attribute is present then the value will be true and if it is absent then the value will be false.

Primer CSS Boolean Attributes Attributes:

checked: This attribute is used to select the input.
disabled: This attribute is used to disable the input.
selected: This attribute is used to select the option from the given options.

Syntax:

<input type="checkbox" value="..." checked >

Example 1: This example demonstrates the implementation of Primer CSS Boolean attributes using radio input.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Primer CSS Boolean Attributes Attributes </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Primer CSS Boolean Attributes Attributes 
        </h2> <br> 
          
        <label> 
            <input type=checkbox disabled  
                   name="GeeksforGeeks">  
            Disabled checkbox 
        </label> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example demonstrates the implementation of Primer CSS Boolean Attributes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Primer CSS Boolean Attributes Attributes </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Primer CSS Boolean Attributes Attributes 
        </h2> <br> 
          
        <select> 
            <option value="DS"> 
                Data Structure 
            </option> 
            <option value="Java" selected> 
                Java 
            </option> 
            <option value="Python"> 
                Python 
            </option> 
        </select> 
    </div> 
</body> 
  
</html>