Bulma Form Radio Button

In this article, we will be learning about Bulma Radio. A Radio button is a type of form control input that is used for selecting one option from the given multiple options. Generally, they are used as a collection of radio buttons having 2 or more radio buttons.

Bulma Radio Button Classes:

radio: This class is used to add a radio button with the help of the <input> element.

Syntax:

<div class="control">
  <input type="radio">
  ...
</div>

Attributes:

disabled: This attribute is used to disable a radio button which cannot be used to select a value.
checked: This attribute is used to set any radio button checked by default.

Syntax:

disabled radio button:

<div class="control">
 <input type="radio" disabled>
 ...
</div>

checked radio button:

<div class="control">
 <input type="radio" checked>
 ...
</div>

Below example illustrates the Bulma Radio:

Example: The following code demonstrates the above Bulma radio classes.

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://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
   </head>
   <body>
      <div class="content has-text-centered">
         <h1 class="has-text-success">
            GeeksforGeeks
         </h1>
         <section class="section" 
            id="simple">
            <div class="container">
               <h1 class="title">
                  Basic radio button
               </h1>
               <div class="control">
                  <label class="radio">
                  <input type="radio" 
                     name="gender">
                  Male
                  </label>
                  <label class="radio">
                  <input type="radio" 
                     name="answer">
                  Female
                  </label>
                  <h1 class="title">Checked radio button</h1>
                  <label class="radio">
                  <input type="radio" 
                     name="geeky" 
                     checked>
                  Yes
                  </label>
                  <label class="radio">
                  <input type="radio" 
                     name="geeky">
                  No
                  </label>
                  <h1 class="title">Disabled radio</h1>
                  <label class="radio">
                  <input type="radio" 
                     name="rsvp">
                  C++
                  </label>
                  <label class="radio">
                  <input type="radio" 
                     name="rsvp">
                  Java
                  </label>
                  <label class="radio" disabled>
                  <input type="radio" 
                     name="rsvp" 
                     disabled>
                  Nothing
                  </label>
                  <br>
               </div>
            </div>
         </section>
      </div>
   </body>
</html>

Output:

Reference Link: https://versions.bulma.io/0.9.2/documentation/form/radio/

Explore