Patterns · Choosing / Site switch
Site switch
Changes the site everything on the screen belongs to.
How it works
1
Record numberStatus
AB
Name
Detail
Record numberStatus
AB
Name
Detail
The site name sits on the right of the top bar.
2
Siteclose
Site oneCount of animals
radio_button_checkedSite twoCount of animals
radio_button_uncheckedSite threeCount of animals
radio_button_uncheckedTapping it opens a bottom sheet with one radio per site.
3
Record numberStatus
AB
Name
Detail
check_circleShowing site two
Choosing a site closes the sheet and reloads the screen. No Save button.
Rules
- One site switch per screen, always on the right of the top bar.
- The sheet lists only the sites the person may see; "All sites" comes first when the screen can show more than one.
- Each row may carry one count, such as animals or enclosures, to tell sites apart.
- The choice is kept when the person moves between tabs of the same module.
- Never a centred dialog, a menu under the chip, or a row of site tabs.
- The site switch can share the top bar with one icon, such as search; more actions go in the more menu.
Motion and haptics
| Moment | Motion | Haptic |
|---|---|---|
| Sheet opens | Slides up 260 ms | — |
| Site chosen | Sheet slides down 200 ms; list fades in | Light tick |
Seen in
| Module | How it was drawn | Kept |
|---|---|---|
| Medical · Nitin | Card anchored under the header | Bottom sheet |
| GRC · Nitin | Small menu under a header chip | Bottom sheet |
| Home · Naveen | Site tabs, a centred dialog and a bottom sheet | Bottom sheet |
| Egg · Prajwal | Site name in the header | Bottom sheet |
| Assessments · Deepannita | "All sites" menu in the table tools | Bottom sheet |
| Radiology · Swathi | "All locations" menu in the top bar | Bottom sheet |
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.