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

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.
• When using GlFormGroup, the label prop alone does not give the input an accessible name.
• The label-for prop must also be provided to give the input an accessible name.

Single radio button

Single radio with a label

<gl-form-radio v-model="status" value="opened">
  {{ __('Opened') }}
</gl-form-radio>

Single radio with a hidden label

<gl-form-radio v-model="status" value="opened">
  <span class="gl-sr-only">{{ __('Opened') }}</span>
</gl-form-radio>

Multiple radio buttons

Multiple labeled radio buttons grouped within a fieldset

<gl-form-group :label="__('Issue status')">
  <gl-form-radio value="opened">{{ __('Opened') }}</gl-form-radio>
  <gl-form-radio value="closed">{{ __('Closed') }}</gl-form-radio>
</gl-form-group>

Using GlFormRadioGroup:

<gl-form-group :label="__('Issue status')">
  <gl-form-radio-group v-model="selected" :options="options" />
</gl-form-group>

Multiple labeled radio buttons grouped within a fieldset with hidden legend

<gl-form-group :label="__('Issue status')" label-sr-only>
  <gl-form-radio value="opened">{{ __('Opened') }}</gl-form-radio>
  <gl-form-radio value="closed">{{ __('Closed') }}</gl-form-radio>
</gl-form-group>

Using GlFormRadioGroup:

<gl-form-group :label="__('Issue status')" label-sr-only>
  <gl-form-radio-group v-model="selected" :options="options" />
</gl-form-group>