HTML <input> type="radio"

The <input> tag with a type="radio" attribute creates a radio button. Radio buttons work together in groups of two or more, but the selection is exclusive, that is, only one can be selected.

Example

#

Six <input> elements of type radio.
The first radio button is checked (selected).

Your native language






<form action="/tutorial/action.html">
  <fieldset>
    <legend>Your native language</legend>

    <label><input type="radio" name="language" value="english" checked> English</label><br />
    <label><input type="radio" name="language" value="french"> French</label><br />
    <label><input type="radio" name="language" value="greek"> Greek</label><br />
    <label><input type="radio" name="language" value="urdu"> Urdu</label><br />
    <label><input type="radio" name="language" value="hindi"> Hindi</label><br />
    <label><input type="radio" name="language" value="other"> Other</label><br /><br />

    <input type="submit" value="Submit">
  </fieldset>
</form>

Using input type="radio"

The <input type="radio"> creates a single radio button.

Radio buttons are grouped by name. All radio buttons with the same name belong to the same group.

Only a single radio button can be selected in a group by clicking on the circle button.

When a label is associated with a radio button, clicking the text will select that radio button.

The checked attribute selects a radio button. Only one in a group can have this attribute.


Syntax

<input type="radio">

How to create a clickable label

Adding clickable labels to radio buttons improves usability. It allows users to click the labels to turn radio buttons on and off. There are 2 ways to implement this:

  1. Wrap a <label> around the <input> element (radio button), or
  2. Bind a <label> to the <input> element (radio button) using a for attribute.

Wrapped label

A <label> wrapping a radio button.


<form>
  <label><input type="radio" name="gender" value="male" checked> Male</label><br />
  <label><input type="radio" name="gender" value="female"> Female</label>
</form>

Bound label

A <label> bound to a radio button using a for attribute.


<form>
    <input type="radio" name="mygender" id="male" value="male" checked>
    <label for="male"> Male</label><br />
    <input type="radio" name="mygender" id="female" value="female">
    <label for="female"> Female</label>
</form>

The wrapped label approach is preferred because it does not require for and id attributes and is therefore simpler.


Browser support

Here is when type="radio" support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <input>
Guides