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/
Last Updated :
12 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...