<input type="radio">

<input> elements of type radio are rendered by default as small circular icons that are filled when activated, similar to the checkbox type described above. Radio buttons allow you to select single values for submission in a form.

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

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. Each individual radio button is basically a Boolean control — yes/no.

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


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:

Please specify your gender:
    <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>
    <button type="submit">Submit</button>

In this example, we have four separate radio-type 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.

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


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

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.