Health Check answer

Best practices

Answer options should be designed as a cohesive group. Consistency within the group is critical for clarity and usability. Mixing visual styles, interaction types, or content structures creates confusion and should be avoided.

Use images only when they add clear value and help users differentiate between options. If images are used, apply them consistently across all options in the group. If not, rely on well-written labels to carry meaning.

When to use

Use this component when:

• Presenting answer options within a Health Check flow
• Users need to select one or multiple predefined answers
• The interaction is part of a structured, guided experience

Use the appropriate variant based on the question type:

• Single choice → use radio button variant
• Multiple choice → use checkbox variant

When not to use

Do not use this component:

• Outside of Health Check flows
• For unstructured forms or general input collection
• When free text input is required
• When mixing different selection types in the same group

Avoid combining:

• Single and multiple choice options in the same group
• Options with and without images in the same group

Anatomy

1. Image (optional)
2. Label
3. Option type
4. Helper text (optional)

Variants

• Single choice (radio button)
• Multi choice (checkbox)

Both variants support:

• Optional image
• Label (required)

All options within a group must use the same variant and structure.

Interaction pattern

Each option is presented as a selectable item with a clear interactive area. Users can select:

• One option in single-choice mode
• One or more options in multiple-choice mode

The entire option is clickable, not just the control element. Selection is reflected immediately through visual state changes.

States

• Default
• Hover
• Focus
• Selected

Focus and selection states must be clearly distinguishable.

Content guidelines

Labels should be clear, concise, and easy to understand. They must reflect meaningful, distinct choices and avoid ambiguity or overlap.
Follow the Health Check playbook for:

• Tone and phrasing
• Level of specificity
• Consistency across answer sets

Avoid vague or overly complex wording. Each option should be understandable on its own, without relying on surrounding context.

Do’s and don’ts

Accessibility

1. Fully keyboard navigable
2. Uses native radio button or checkbox semantics
3. Proper grouping and labeling for screen readers
4. Clear focus and selected states
5. Images must include meaningful alt text or be marked decorative
6. Meets WCAG 2.2 AA contrast requirements