Bulma Radio

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=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

    <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:

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=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

    <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:

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=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

    <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:

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

Explore