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.



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

Your native language

<form action="/tutorial/action.html">
    <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">

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.


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

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

Bound label

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

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

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:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

 Back to <input>

Last updated on Sep 30, 2023