TLDR
|
Pattern |
When to use |
Control placement |
|---|---|---|
|
Radio group (Fieldset) |
Structured forms |
Leading |
|
Radio tile |
Rich options |
Trailing |
|
Radio list item |
Selection or filtering list |
Trailing |
Use this section to choose the correct selection pattern for both single-select (radio) and multi-select (checkbox) interactions.
When to use a group (fieldset)?
- The selection is part of a form with multiple different fields (e.g. textarea, select, checkboxes)
- The user is submitting or saving data
- Layout follows a form structure
Controls are placed on the leading side of each option. Users are completing a structured input task. Leading placement makes each option immediately recognizable as a selectable field and supports fast scanning in form flows where the primary goal is completion.
Example:
When to use a tile?
- Differences between options need a more detailed explanation and/or images
- The decision is meaningful or has a higher impact
- Visual hierarchy improves decision-making
Controls are placed on the trailing side of each tile. Users evaluate options visually before making a decision. The control is secondary to the visual content and acts as confirmation of selection rather than the entry point.
Example:
When to use a list item? (mobile)
- In filters, sheets, or dedicated selection screens
- Selection narrows results or chooses from a set of values or entities
- Options may be searchable or longer lists
Controls are placed on the trailing side of each row. Users first interpret the item, then decide whether to select it. Trailing placement preserves content hierarchy and keeps the item as the primary focus, with selection as an action applied to it.
Example:
Keep selection patterns consistent
Whenever possible, use a single selection pattern within the same screen or flow. Groups, tiles, and list items are designed for different contexts. Switching between patterns can make similar choices feel unrelated and force users to re-evaluate how to interact with each section. This isn't a strict rule, but consistency helps users focus on making decisions rather than understanding the interface.