<input type="radio">

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

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

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

Value

A DOMString representing the value of the radio button. This is never seen 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 specify your gender:
  <div>
    <input type="radio" id="genderChoice1"
     name="gender" value="male">
    <label for="genderChoice1">Male</label>
    <input type="radio" id="genderChoice2"
     name="gender" value="female">
    <label for="genderChoice2">Female</label>
    <input type="radio" id="genderChoice3"
     name="gender" value="other">
    <label for="genderChoice3">Other</label>
    <input type="radio" id="genderChoice4"
     name="gender" value="notSpecified">
    <label for="genderChoice4">Prefer not to specify</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

In this example, we have four separate radio input objects, representing a typical gender selection form. The first radio button has an id of genderChoice1, a name of gender,  and a value of male. If the first value is selected when the form is submitted, the data name/value pair will be gender=male.  

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

The "name" setting is an important attribute of radio buttons, as it identifies which group a radio button belongs to. Because groups of radio buttons act as a single unit working together, 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 button 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 specify your gender:
  <div>
    <input type="radio" id="genderChoice1"
     name="gender" value="male">
    <label for="genderChoice1">Male</label>
    <input type="radio" id="genderChoice2"
     name="gender" value="female">
    <label for="genderChoice2">Female</label>
    <input type="radio" id="genderChoice3"
     name="gender" value="other">
    <label for="genderChoice3">Other</label>
    <input type="radio" id="genderChoice4"
     name="gender" value="notSpecified" checked>
    <label for="genderChoice4">Prefer not to specify</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

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

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 to click the option you want, especially on small screen devices like mobiles.

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.

Examples

The following example shows an alternative version of the gender choice example we've seen through the article, with some additional styling. The HTML looks like this:

<form>
  <fieldset>
  <legend>Please specify your gender</legend>
    <div>
      <input type="radio" id="genderChoice1"
       name="gender" value="male">
      <label for="genderChoice1">Male</label>
      <input type="radio" id="genderChoice2"
       name="gender" value="female">
      <label for="genderChoice2">Female</label>
      <input type="radio" id="genderChoice3"
       name="gender" value="other">
      <label for="genderChoice3">Other</label>
      <input type="radio" id="genderChoice4"
       name="gender" value="notSpecified" checked>
      <label for="genderChoice4">Prefer not to specify</label>
    </div>
    <div>
      <button>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 current 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 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 differently in different browsers, and it doesn't work at all in IE. Test carefully.

Specifications

Browser compatibility

See also

• <input> and the HTMLInputElement interface that implements it.