VOOZH about

URL: https://www.geeksforgeeks.org/css/bulma-radio/

⇱ Bulma Radio - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bulma Radio

Last Updated : 23 Jul, 2025

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.

Output: 

👁 Bulma Radio

Example 2: The example below shows how to disable a radio button using the HTML disabled attribute.

Output:

👁 Bulma Radio
Bulma Radio

Example 3: The example below shows how to check a radio button by default using the HTML checked attribute.

Output:

👁 Bulma Radio
Bulma Radio

Reference: https://bulma.io/documentation/form/radio/

Comment
Article Tags: