Radios

The radios component provides styled radio button groups for single-selection form inputs. Use radio buttons when users need to choose exactly one option from a predefined set of mutually exclusive choices. The component supports proper grouping, validation states, and accessibility features to ensure consistent form experiences across all GNWT applications.

Do

  • Group related radio options within a fieldset with a clear legend that describes the choice users need to make.
  • Use descriptive option labels that clearly explain each choice without requiring additional context.
  • Limit the number of options to a reasonable amount (typically 2–7) to avoid overwhelming users.
  • Provide clear question text in the fieldset legend that explains what users are selecting.
  • Use consistent option ordering such as alphabetical, chronological, or logical progression.
  • Test keyboard navigation to ensure all radio buttons are accessible without a mouse.
  • Include validation messaging for required radio groups to guide users toward completion.
  • Consider default selections carefully—only pre-select options when there’s a clear, safe default choice.

Don’t

  • Don’t use radio buttons for multiple selections—use checkboxes when users can choose more than one option.
  • Don’t use radio buttons for binary choices—consider toggle switches or single checkboxes for yes/no decisions.
  • Don’t make option labels too long—keep text concise while remaining descriptive and clear.
  • Don’t forget to group related options—always use fieldsets to associate radio buttons logically.
  • Don’t use radio buttons for large option sets—consider dropdown menus for more than 7–8 choices.
  • Don’t rely solely on visual styling for grouping—use proper semantic markup with fieldsets and legends.
  • Don’t ignore mobile experience—ensure radio buttons have adequate touch targets and spacing.
  • Don’t use generic validation messages—provide specific feedback that relates to the actual choice being made.

Standard Radio Group

Basic radio button group for contact preference selection. Demonstrates proper fieldset grouping, clear option labels, and required field validation. Use this pattern for preference selections, method choices, or any single-selection scenario with multiple options.

Open example in a new tab

Accessibility Best Practices

Radio button group demonstrating comprehensive accessibility implementation with proper ARIA attributes, semantic markup, and keyboard navigation support. Shows how to structure radio button groups for optimal screen reader experience and keyboard accessibility.

Screen Reader Support

  • Fieldset grouping: Uses <fieldset> and <legend> elements to group related radio buttons and provide context.
  • Descriptive legends: Legend text clearly explains the choice users need to make without ambiguity.
  • Clear option labels: Each radio button has a specific, descriptive label that explains the choice.
  • Required field indication: Required radio groups are properly marked and announced to screen readers.

Keyboard Navigation

  • Arrow key navigation: Users can navigate between radio options using arrow keys within the same group.
  • Tab key behavior: Tab moves between different form elements, while arrows move within radio groups.
  • Space key selection: Users can select radio options using the Space key when focused.
  • Logical grouping: Related radio buttons are grouped together for efficient keyboard navigation.

Visual Accessibility

  • High contrast ratios: All radio button labels and indicators meet WCAG AA contrast requirements.
  • Clear selection states: Selected radio buttons are visually distinct through multiple cues, not color alone.
  • Adequate sizing: Radio buttons and labels meet minimum touch target sizes (44px) for mobile accessibility.
  • Focus indicators: Clear visual focus states help keyboard users identify their current position.

Content Guidelines

  • Clear question format: Write fieldset legends as questions that users need to answer.
  • Specific option labels: Use precise, descriptive text that clearly differentiates each choice.
  • Consistent terminology: Use similar language patterns across all radio button options.
  • Logical ordering: Arrange options in a meaningful sequence (alphabetical, frequency, importance).

Implementation Considerations

  • Form validation: Implement proper validation for required radio groups with clear error messaging.
  • Default selections: Consider whether pre-selecting an option improves or hinders the user experience.
  • Progressive enhancement: Ensure radio buttons work without JavaScript while providing enhanced experiences when available.
  • State persistence: Maintain user selections when forms are submitted with validation errors.

ARIA Attributes in Use

  • role="radiogroup" — applied automatically by fieldset to group related radio buttons.
  • aria-required="true" — indicates when radio button selection is required for form submission.
  • aria-describedby — connects radio groups to help text or error messages when needed.
  • aria-invalid="true" — applied to radio groups when validation fails to indicate errors.
Mis à jour: 02 décembre 2025