Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.

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.

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

List of Radio Buttons #

If you want to list several radio buttons, wrap them in a <div class="radios"> element:

Going Not going Maybe

<div class="radios">
  <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>