Accessible Styled Form Controls

Styled Radio Button Pills

Last updated:

Pattern to restyle a radio button group into a selection pill.

Pattern Demo

Group Title
Show:
Show:

Pattern Details

Pattern Markup
<fieldset class="radio-pill">
  <legend>Group Title</legend>

  <div class="radio-pill__group">
    <input type="radio" id="r1" name="radios" checked>
    <label for="r1">Option 1</label>

    <input type="radio" id="r2" name="radios">
    <label for="r2">Option 2</label>
  </div>
</fieldset>

As with the styled radio buttons pattern, the radio button pills also utilize visually hidden native HTML radio buttons as the cornerstone for providing the necessary semantics and user experience for keyboard users, and the accessibility API.

The radio buttons are wrapped in a fieldset element. The presence of the fieldset element groups the radio buttons and programmatically communicates that they are functionally interdependent. The legend element provides a description of the grouped radio buttons' purpose.

If it makes sense for the grouping of radio buttons to be called out in the document outline, then the legend can incorporate an appropriately ranked heading element (e.g. h3).

The form control with the checked attribute applied to it will trigger a CSS selector that visually updates the appearance of the sibling label associated with it, indicating that it is the selected option. As there is no way to deselect a radio button, without also resetting an entire form or including a radio button option specifically to indicate a "no selection", a radio button pill should always have a radio button set with a default checked attribute.

A selector targeting the last label's :after pseudo-element will create an outline around the entire component to indicate it has keyboard focus and can be interacted with.

Affects on Screen Reader Announcements?

Since the native radio buttons remains in the DOM, and are used as the focusable elements that control the state of their custom visualization, there are no alterations to how a screen reader announces styled radio buttons.

Note that screen readers, like JAWS and NVDA, may automatically go into forms mode, or require a user to hit Enter or Space to change form the virtual cursor to forms mode, when a radio button is highlighted. Once in forms mode the arrow keys can be used to select the different radio buttons, as expected.

VoiceOver on macOS may begin to focus the radio button labels when using arrow keys to change the selected radio button. This issue does not exist in VoiceOver + Chrome and is not necessarily unique to this particular styling of radio buttons.

Usage note

Radio buttons are meant to indicate a group of single choice options, typically part of a larger form area of a document. It may be acceptable to a pattern like this outside of the context of a form, as long as reverting state is a simple process for the user, and the user is aware of the effect the state change will have on the UI. Be mindful of WCAG 3.2.2, On Input.

Alternatively, a grouping of button elements that are aware of each other's state, and utilize aria-pressed="true/false" to indicate their own state, may be more appropriate and understandable to users.