<input> elements of type radio are rendered by default as small circular icons that are selected when activated. Radio buttons allow the user to select a single value out of a number of predefined choices for submission in a form.

<input type="radio" id="radioButton">

They are called radio buttons because they look and operate in a similar manner to the push buttons on old-fasioned radios (see the images on this post for examples).

Note: Checkboxes are similar to radio buttons, but with an important distinction — radio buttons are designed for selecting one value out of a few, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

Value A DOMString representing the value of the radio button.
Events change and input
Supported common attributes checked
IDL attributes checked and value
Methods select()

The value attribute

The value attribute is a DOMString representing the value of the radio button. This is never seen by the user (on the client side), but on the server this is the value given to the data submitted with the radio button's name. Take the following example:

<form>
  Please select your preferred contact method:
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

In this example, we have three separate radio input objects. The first radio button has an id of contactChoice1, a name of contact, and a value of email. If the first value is selected when the form is submitted, the data name/value pair will be contact=email.

If the value attribute were omitted in the HTML, the submitted data would be given a default value of on, so the submitted data in that case would be contact=on. This doesn't make much sense, so remember to set your value attributes!

Note: If no radio button is selected when the form is submitted, there is no value submitted to the server to represent the unselected state (e.g., value=unselected); the value is not submitted to the server at all.

The name attribute is an important part of radio buttons, as it identifies the group to which a radio button belongs. Because groups of radio buttons act as a single unit, you must specify a common name for all related radio buttons. When two or more radio buttons share a name, selecting one of the buttons will unselect all of the others with the same name. If you have more than one group of radio buttons on a single page, the buttons in different groups must have different name attributes.

Using radio inputs

We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you'll need.

Selecting a radio button by default

To make a radio button selected by default, you simply give it the checked attribute. See the below example:

<form>
  Please select your preferred contact method:
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email" checked>
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

In this case, the first radio button is selected by default.

Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones — i.e., the last one in the source order will be selected.

Providing a bigger hit area for your radio buttons

In the above examples, you may have noticed that you can select a radio button by clicking on its associated <label> element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.

Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

Validation

Radio buttons don't participate in constraint validation; they have no real value to be constrained.

Styling radio inputs

The following example shows a slightly fuller version of the example we've seen throughout the article, with some additional styling. The HTML looks like this:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1"
       name="contact" value="email" checked>
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2"
       name="contact" value="phone">
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3"
       name="contact" value="mail">
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

There's not much new to note here except for the addition of <fieldset> and <legend> elements, which help to group the functionality nicely.

The CSS involved is a bit more significant:

html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

Most notable here is the use of the appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we've used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected.

This is not without its problems: appearance is not too bad for simple styling, but it tends to behave inconsistently in different browsers, and it doesn't work at all in IE. Test carefully.

Specifications

Specification Status  
HTML Living Standard
The definition of '<input type="radio">' in that specification.
Living Standard  
HTML5
The definition of '<input type="radio">' in that specification.
Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)

See also

Document Tags and Contributors

 Contributors to this page: mfluehr, chrisdavidmills, Shidigital, eystein, ku3nsting, Sheppy
 Last updated by: mfluehr,