List
List components provide a structured and visually appealing way to present collections of similar items. This component ensures clarity and efficient information processing by offering a well-organized layout, highlighting key details, and allowing for optional interactive features like sorting or filtering.
API Reference
| Prop | Type | Default |
|---|---|---|
marker | MarkerTypes | - |
Examples
Circle
Decimal
Upper Roman
Usage
General Guidelines
Do's
- Present information clearly and concisely, use well-formatted text.
- Use proper color contrast and allow for screen reader compatibility.
Don'ts
- Don't overload the list with information, limit clutter and focus on essential details.
Writing Guidelines
When to use
- When displaying a collection of similar items that require individual presentation.
- When the order of items is important or chronological.
- When information needs to be easily scanned and compared.
When not to use
- Don't use list when dealing with complex data sets requiring advanced organization (consider using a data table component).
Use Case
General Use Cases
List typically used when displaying a list of products in an online store or presenting a chronological timeline of events.
Digital Health Use Cases
For digital health applications List can be used when listing daily medication reminders with details like dosage and time.
Also when presenting a list of upcoming doctor appointments with date, time, and location.
Accessibility Guidelines
- Add
aria-labelledbyto provide an accessible name for components that don't have visible text, and to distinguish between multiple item with identical visible text. - Use
aria-selectedto indicates the current "selected" state of various widgets. - Use
aria-disabledto indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. - Add
aria-multiselectedattribute to indicates that the user may select more than one item from the current selectable descendants.