RadioButton

From W3C Wiki


Radio button

A radio button is one of a group of controls representing mutually-exclusive choices. A radio button is typically represented as a round control to distinguish from the square checkbox control.

Events

  • Set selection - Fills in circular control of radio button with current focus, clearing any prior selection in the group. May be referred to as checked.
  • Clear selection - Indirect. Occurs when selection is explicitly set in other radio button in group.

Keyboard interaction

  • Focus can move to a radio group via:
    • The Tab key
    • An Access Key or mnemonic targeting the label
    • Activation of the label (through Assistive Technology mechanism)
  • The Tab key moves focus between radio button groups and other widgets.
  • When focus is on the group and when no radio button is selected:
    • Tab key press moves focus to the first radio button in the group, but does not select the radio button.
    • Shift+Tab key press moves focus to the last radio button in the group, but does not select the radio button.
  • When focus moves to the group in which a radio button is selected, pressing Tab and Shift+Tab keys move focus to the radio button that is checked.
  • Up Arrow and Down Arrow keys move focus and selection.
    • Up Arrow key press moves focus and selection forward through the radio buttons in the group. If the first radio button has focus, then focus and selection move to the last radio button in the group.
    • Down Arrow key press moves focus and selection backward through the radio buttons in the group. If the last radio button has focus, then focus and selection move to the first radio button in the group. * Space Bar key press checks the radio button that currently has focus.
  • When re-entering the group, focus returns to the point of previous focus (the item with selection set).
  • Pressing the Tab key exits the group and moves focus to the next form control.
  • Pressing the Shift+Tab keys exits the group and moves focus to the previous form control.

Mouse Interaction

  • Primary mouse button click on an unselected item selects that radio button and clears any other selected radio button in the group.

ARIA Roles and Properties

The radio button control uses the role radio. The group of radio controls uses the role radiogroup.

States and properties used include:

  • aaa:checked
  • aaa:labeledby
  • aaa:activedescendant

Example

Sample radio buttons.

Please note that not all examples work in all browser and version combinations. For example, note the compatibility statement.