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:
<div class="control">
<input type="radio" disabled>
...
</div>
<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 =
</ 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/
Last Updated :
03 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...