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 a radio button group for 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

• In a radio button group, only one option can be selected at a time and there must be a default selected option.
• To pick an option, the user can select the radio button or its content.

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 nest or add other elements within a radio button group. Keep the radio button group as a single cohesive unit to ensure the user can properly traverse the controls.

TODO:

Add additional accessibility specifications. Create an issue