You are viewing the deprecated 0.6.2 version of the website. Click here to view the latest version

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

Radio

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 add 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

Bulma Sponsors

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!