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

Documentation

Everything you need to create a website with Bulma

# 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.

Yes No

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

Foo Bar

    <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>`.

Going Not going Maybe

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

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!