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" id="radio" tabindex="-1" aria-describedby="radio-hint">
    <legend>
      <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> <span id="radio-a-hint">label hint</span> </div>
    <div><input value="b" id="radio-b" name="radio" type="radio" aria-describedby="radio-b-hint" /> <label for="radio-b">Option b</label> <span id="radio-b-hint">label hint</span> </div>
  </fieldset> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-radio" target="_top">View our guidance</a></p>
</form>

Related options can be organized into groups using nested <fieldset> elements that share the same name.

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <fieldset name="radio-group" id="radio-group" tabindex="-1" aria-describedby="radio-group-hint">
    <legend>
      <hgroup>
        <h1>Radios with groups</h1>
      </hgroup>
    </legend> <span id="radio-group-hint">legend hint</span>
    <fieldset name="radio-group" id="radio-group-one" tabindex="-1">
      <legend>Group one</legend>
      <div><input value="a" id="radio-group-a" name="radio-group" type="radio" checked="" aria-describedby="radio-group-a-hint" /> <label for="radio-group-a">Option a</label> <span id="radio-group-a-hint">label hint</span> </div>
      <div><input value="b" id="radio-group-b" name="radio-group" type="radio" aria-describedby="radio-group-b-hint" /> <label for="radio-group-b">Option b</label> <span id="radio-group-b-hint">label hint</span> </div>
    </fieldset>
    <fieldset name="radio-group" id="radio-group-two" tabindex="-1">
      <legend>Group two</legend>
      <div><input value="c" id="radio-group-c" name="radio-group" type="radio" aria-describedby="radio-group-c-hint" /> <label for="radio-group-c">Option c</label> <span id="radio-group-c-hint">label hint</span> </div>
      <div><input value="d" id="radio-group-d" name="radio-group" type="radio" aria-describedby="radio-group-d-hint" /> <label for="radio-group-d">Option d</label> <span id="radio-group-d-hint">label hint</span> </div>
    </fieldset>
  </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