Earn income with your HTML skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

HTML <input> type="radio"

HTML <img>

HTML <ins>

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

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

Wrap a <label> around the <input> element (radio button), or
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

#

Back to <input>