What it is
Selection List shows a group of options that users can tap to choose.What it’s best for
Use it when you want users to compare visible choices before selecting one or many.When to use it
- Select goals
- Choose preferences
- Pick a persona or plan type
- Capture interest in specific features
When not to use it
- Do not use it for very long lists that are hard to scan on one screen.
- Do not use it when the choice is best made through typed input.
How to add it in the dashboard
- Open the screen in the dashboard.
- Add Selection List from the Components panel.
- Select it on the canvas.
- In the properties panel, add options and choose the layout style.
- Adjust spacing and selected-state styling so the active choice is easy to understand.
Key parameters
| Parameter | What it changes | When to adjust it |
|---|---|---|
| Options | Sets which choices appear | Update it whenever the question changes |
| Layout style | Controls whether options appear in a column, row, or grid | Use the layout that best fits the number and type of choices |
| Spacing | Adds room between options | Increase it when the list feels crowded |
| Single or multi-select | Decides whether users can choose one or several options | Match it to the decision you are asking them to make |
| Required | Marks the question as mandatory | Enable it only when the choice is essential |
| Auto-advance | Moves users forward after selection | Use it for fast, one-tap questions |
| Unselected style | Defines how idle options look | Use it to keep the list clean and scannable |
| Selected style | Defines how chosen options look | Use strong contrast so the current choice is obvious |
| Background | Changes the overall list area | Use it when the list needs more separation from the page |
Example use cases
- Ask users which outcome they want from onboarding
- Let users choose the product area they care about most
- Offer a small set of plan preferences before showing recommendations
Best practices
- Keep option labels short and comparable.
- Make the selected state clearly different from the unselected state.
- Use auto-advance only when the question is simple and low-risk.
- Pair the list with a clear question so users know what they are choosing.
Common mistakes
- Showing too many options at once
- Making selected and unselected states look too similar
- Mixing options with very different lengths and visual weight