Form

Radio input

Published on

Description

Radio buttons allow users to select exactly one option from a group. All radios in a group share the same name attribute. Group them inside a <fieldset> with a <legend>.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <fieldset name="radio">
    <legend id="radio">
      <hgroup>
        <h1>Radios</h1>
      </hgroup>
    </legend> <span id="radio-hint">legend hint</span>
    <div><input value="a" id="radio-a" name="radio" type="radio" checked="" aria-describedby="radio-a-hint" /> <label for="radio-a">Option a</label> </div>
    <div><input value="b" id="radio-b" name="radio" type="radio" aria-describedby="radio-b-hint" /> <label for="radio-b">Option b</label> </div>
  </fieldset> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-radio" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use <fieldset> and <legend> to group radio buttons. Prefer native elements over role="group".
  • Add "required" explicitly in the legend text for required radio groups — this is more reliable than ARIA attributes alone. HTML required and aria-invalid do not work on <fieldset>.
  • Visually hide inputs using clip/position methods — never display: none.
  • Support Windows High Contrast Mode with system color keywords.

References

Variables

None for input