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= <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= <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
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
Reference: https://bulma.io/documentation/form/radio/
Please Login to comment...