Patterns · Choosing / Choice tiles
Choice tiles
Two to four big options that change what comes next, such as where a test happens.
How it works
1
location_onWhere will it happen?
OptionDetail
radio_button_checkedOptionDetail
radio_button_uncheckedSelectkeyboard_arrow_down
Choosing a tile reveals only the fields that option needs.
2
location_onWhere will it happen?
OptionReason it is not possible
lockOptionDetail
radio_button_checkedAn option that cannot be used stays visible, locked, with the reason as its second line.
Rules
- Two to four tiles; five or more becomes a Dropdown.
- Each tile: a short title and one line that says what it means.
- The chosen tile has a green border on pale green and a filled radio.
- A locked tile says why in its second line; tapping it does nothing.
- Tiles sit two per row on phone when titles are short; otherwise one per row.
Motion and haptics
| Moment | Motion | Haptic |
|---|---|---|
| Tile chosen | Fields below slide open 180 ms | Light tick |
Seen in
EggRadiologyMedicalFamily treeGRC
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.