Feedback
Feedback
Feedback allows users to provide ratings and share opinions about their experience. It supports multiple feedback formats, including thumbs, stars, NPS, and emoji ratings.
Examples
Was this page helpful?
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Each rating type uses role="radiogroup" with role="radio" options and aria-checked state
- Thumb pills, emoji tiles and NPS buttons all expose descriptive aria-labels
- Submit is programmatically disabled until a rating is chosen
- Gratification panel uses role="status" with aria-live="polite" so screen readers announce confirmation
- Color contrast ratios meet or exceed 4.5:1 for text and 3:1 for UI components (WCAG 1.4.3 / 1.4.11)
- Icons supplemented with text legends ("Bad ← → Good", "Extremely Unlikely / Likely")
- Selected emoji conveys state through size + background, not color alone
- Visual focus indicators on every interactive element (WCAG 2.4.7)
When to use this component
✓Do's
- •Measuring page helpfulness (Thumb)
- •Capturing post-transaction satisfaction (Stars / Emoji)
- •Tracking recommendation likelihood (NPS)
- •Collecting a single rating with an optional comment
✗Don'ts
- •For multi-question surveys, use a dedicated form or survey.
- •For bug reports, use a dedicated form.
- •For collecting free-text feedback only, use a Textarea.
- •For capturing settings or preferences, use a Switch or Checkbox.
Do's and Don'ts
✓ Do's
Ask one question, match the type to the moment, and confirm submission with the gratification panel.
Always offer a Skip so feedback never blocks the citizen's task.
✗ Don'ts
Don't require a comment for a simple satisfaction rating.
Don't invent decorative colour scales, stars use the neutral treatment and emoji use the success palette only when selected.