Data Display
Result List Row
A Result List Row displays a single item within a list of search results, records, or data entries.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features6 checks
- Row expand/collapse button has descriptive aria-label that updates based on state
- Status badge uses both a color dot and a text label, color is never the sole indicator
- SLA indicator uses plain language ("8 days left") readable by assistive technology
- All interactive buttons meet minimum 32px touch target height
- Focus ring is visible on Track button and chevron toggle during keyboard navigation
- Reference ID is always visible, essential for citizen identification without color dependency
When to use this component
✓Do's
- •Search results or records need a consistent, scannable row treatment
- •Each entry has a title plus a few supporting attributes such as status, date, or reference
- •Users compare entries down a column before choosing one to open
- •Rows carry a primary action, such as viewing or downloading a record
✗Don'ts
- •The data is genuinely tabular and needs sorting across many columns, use Tables
- •Each entry needs rich media or a large amount of detail, use Card instead
- •There is a single result, present it directly rather than as a list of one
- •There are no results to show, use Empty State so the outcome is explicit
Do's and Don'ts
✓ Do's
Show the reference ID and department prominently. Use status badges with both a color dot and text label so the processing state is clear without relying on color alone.
✗ Don'ts
Don't expand rows by default in list views, it floods the screen and makes scanning harder. Don't omit the reference ID; it is essential for citizen tracking.