Open In App

Bulma Radio

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature.

Radio buttons are mutually exclusive buttons, that is, you can select only one option in a radio button group. The Radio element is a simple wrapper around the radio input. Bulma doesn’t style the radio buttons to ensure cross-browser compatibility. To make sure radio buttons are grouped together, they should have the same name attribute. 

To disable a radio button, we can use the HTML disabled attribute on the input element as well as its label, and to check a radio button by default, the HTML checked attribute can be used on the input element. 

Bulma Radio Class: 

  • radio: This class gives the radio button a Bulma theme looks.

Syntax:

<label class="radio">
    <input type="radio" name="gender">
    Yes
</label>

Example 1: The below example shows two simple radio buttons grouped together.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma | Radio</title>
    <link rel='stylesheet' href=
  
    <style>
        .control{
            margin-top: 25px;
        }
        p{
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
    <b class="is-size-4">Bulma | Radio</b>
    <div class="container">
        <div class="control">
            <p><b>Choose Gender:</b></p>
  
            <label class="radio">
              <input type="radio" name="gender">
              Male
            </label>
            <label class="radio">
              <input type="radio" name="gender">
              Female
            </label>
          </div>
    </div>
</body>
  
</html>


Output: 

Bulma Radio

Example 2: The example below shows how to disable a radio button using the HTML disabled attribute.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma | Radio</title>
    <link rel='stylesheet' href=
  
    <style>
        .control{
            margin-top: 25px;
        }
        p{
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
    <b class="is-size-4">Bulma | Radio</b>
    <div class="container">
        <div class="control">
            <p><b>Choose a Game:</b></p>
  
            <label class="radio">
              <input type="radio" name="game">
              Chess
            </label>
            <label class="radio">
              <input type="radio" name="game">
              Football
            </label>
            <label class="radio" disabled>
              <input type="radio" name="game" disabled>
              Cricket
            </label>
          </div>
    </div>
</body>
  
</html>


Output:

Bulma Radio

Bulma Radio

Example 3: The example below shows how to check a radio button by default using the HTML checked attribute.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma | Radio</title>
    <link rel='stylesheet' href=
  
    <style>
        .control{
            margin-top: 25px;
        }
        p{
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
    <b class="is-size-4">Bulma | Radio</b>
    <div class="container">
        <div class="control">
            <p><b>Choose a Game:</b></p>
  
            <label class="radio">
              <input type="radio" name="game" checked>
              Chess
            </label>
            <label class="radio">
              <input type="radio" name="game">
              Football
            </label>
            <label class="radio">
              <input type="radio" name="game">
              Cricket
            </label>
          </div>
    </div>
</body>
  
</html>


Output:

Bulma Radio

Bulma Radio

Reference: https://bulma.io/documentation/form/radio/



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