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:
- disabled radio button:
<div class="control"> <input type="radio" disabled> ... </div>
- checked radio button:
<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/