Radio button

The mutually exclusive radio buttons in their native format

Colors No
Sizes No
Variables No

The radio class is a simple wrapper around the <input type="radio"> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.

Make sure the linked radio buttons have the same value for their name HTML attribute.

<div class="control">
  <label class="radio">
    <input type="radio" name="answer">
    Yes
  </label>
  <label class="radio">
    <input type="radio" name="answer">
    No
  </label>
</div>

You can check a radio button by default by adding the checked HTML attribute to the <input> element.

<div class="control">
  <label class="radio">
    <input type="radio" name="foobar">
    Foo
  </label>
  <label class="radio">
    <input type="radio" name="foobar" checked>
    Bar
  </label>
</div>

You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input>.

<div class="control">
  <label class="radio">
    <input type="radio" name="rsvp">
    Going
  </label>
  <label class="radio">
    <input type="radio" name="rsvp">
    Not going
  </label>
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled>
    Maybe
  </label>
</div>

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!