Selection List
Selection List are like visual labels you create to narrow down the information you see in an app. Think of them like keywords you type in a search bar but displayed as clear and identifiable labels. You can even combine multiple filter tags to get even more specific results. These tags are like mini filters you can add or remove on the fly. Adding a tag refines your search while removing one broadens it.
API Reference
| Prop | Type | Default |
|---|---|---|
label | string | - |
withButtons | boolean | false |
Examples
With Buttons
Usage
General Guidelines
Do's
- Make sure selection list are easy to read and understand.
- Use colors to represent different tags.
- It should be displayed in a row, aligned to the left, directly underneath the filter field or icon.
- The content must directly reflect the selected dropdown menu item's label.
- Display the selected tags prominently so people can easily track and change their choices.
Don'ts
- Don't make people hunt for important tags.
- Don't hide which tags people have already chosen.
- Don't use mysterious labels.
- Don't restrict users with too few tags.
- Don't wrap label text to multiple lines.
- Don't use different colors for tags.
- Do not use when you need to link to another page.
Writing Guidelines
When to use
- When categorizing scope, that is used to sort through information.
- When you want to find what you want and If you're looking for something specific.
- When you want to control the content that is displayed.
When not to use
- Don't use selection list when there are only a few choices; selection list might be overkill.
- Don't use selection list when selection list can become complicated and confusing when dealing with many filters and nested categories.
- Don't use selection list when they are poorly defined or applied inconsistently.
Use Case
General Use Cases
Selection List typically used for when selecting predefined options. This component allows users to select one or more items through clear visual cues and intuitive interaction methods, promoting efficient decision-making within your application.
Digital Health Use Cases
For digital health applications Selection List can be used when choosing preferred workout activities from a pre-defined set (e.g., running, swimming, yoga).
Marking symptoms experienced during a specific time frame (e.g., fever, cough, headache).
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.