The radio Type

Live Demo

Firefox	Safari	Safari	Chrome	Opera	IE	Android

The Low Down

The radio input type is used to create a radio button. Radio buttons are generally presented in groups of related values where only one value can be selected of a predefined group of options.

• While optional, you need to include the name and value attributes to define the name/value content that will be submitted, if a radio button is selected, when the form is submitted.
• Only one radio button in a same named group of radio buttons is selectable at a time and only the one that is checked will be sent to the server on form submission.
• While you generally want a unique name for most form controls , you need to give all your radio buttons in a group the same name. Clicking on a radio button within a group of same named radio buttons will toggle the state of that button to checked, deselecting all other radio buttons within that same named group.
• Once a radio button in a same named group of buttons is selected, there is no way to natively deselect all the radio buttons in a group without resetting the form or employing JavaScript.
• While you should include a <label> for every form control, it is especially important to associate one with each radio input type: A radio button is tiny, and can be difficult to tap or mouse click. Clicking or tapping on the associated label selects that radio button and deselects all the other radio buttons in the same named group. Labels are larger than radio buttons: including the label improves accessibility.
• Use the checked attribute to default select a radio button. Without this attribute, the default state for a radio is not checked.
• If any radio button in a same named group of radio buttons has the required attribute set, the user must select one of the radio buttons in that group, but not necessarily the one that has the attribute set. The one occurrence of the required attribute is applied to the whole group of same named radio buttons.
• Cross browser constraint validation and verbiage:
  • Firefox:“Please select one of these options,” highlighting the first in the group.
  • Chrome: “Please select one of these options,” highlighting the first in the group.
  • IE: “You must choose an option”, highlighting the control with the required attribute with a red box.
  • Opera: gives focus to the first option in the group of radio buttons, but no error message.
  • Safari: doesn’t prevent form submission even if no radio in a required group is selected.
• You can target radio buttons and associated elements with :checked and :not(:checked). For example, you can target the label that comes after a selected radio buttons with:

  input[type=radio]:checked + label {}

• Some designers want to create their own look and feel for radio buttons. Don’t try to style the default radio buttons. Also, don’t try to use generated content on this replaced elements. Instead, visually hide the button, and use a background image on the label.
• In Firefox, you can target the radio button that was checked by default with :default.