Bulma Form Radio Button
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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </ head > < body > < div class = "content has-text-centered" > < h1 class = "has-text-success" > w3wiki </ 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/