Radio button

The mutually exclusive radio buttons in their native format

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>

返回头部

问题反馈
返回顶部