Radio button

Examples

View in Pajamas UI Kit →

Structure

1. Legend: A title for a group of radio buttons.
2. Radio button: The input element that provides the visual affordance for the control.
3. Label: Text indicating the option.
4. Help text (optional): Used to further clarify an option.

Guidelines

When to use

• Use radio buttons to present a set of options, where only one option can be selected at a time.

When not to use

TODO:

Add when not to use. Create an issue

Appearance

• Radio buttons use high-contrast colors for labels and custom styles (based on Bootstrap) instead of browser defaults for the radio control.
• Radio buttons are vertically stacked, with one radio button per line.

Behavior

• One radio button should be selected as the default choice by using the checked attribute.
• Users are able to select an option with click/tap on the radio button or its label.
• Selecting one option unselects all others.

Content

Label

• Radio button labels are set in regular font weight, positioned to the right of the element, and should be as short as possible.

Legend

• Use a fieldset with legend (set in bold font weight and positioned above the group of radio buttons) to group a set of radio buttons. Some screen readers will announce the contents of the legend before each nested input to maintain context for a user.

Help text

• Help text can be added below the radio button label or as a paragraph below the group.

Accessibility

• Do not include nested or additional elements within a radio group. Nesting may prevent a screen reader user from discovering nested controls or content.

TODO:

Add additional accessibility specifications. Create an issue