Patterns · Choosing / Choose a place or animal

Choose a place or animal

Find an enclosure or animal by search or QR, or step through Site → Section → Enclosure → Animal.

How it works

1
closeChoose place
qr_code_scanner
Or choose step by step
Selectkeyboard_arrow_down
Choose a section firstkeyboard_arrow_down
Choose an enclosure firstkeyboard_arrow_down

Search every enclosure at once, scan its QR, or step through the levels.

2
closeChoose place
qr_code_scanner
Section namekeyboard_arrow_down
Selectkeyboard_arrow_down
Enclosureclose
Enclosure oneAnimals 4
radio_button_checked
Enclosure twoAnimals 12
radio_button_unchecked
Enclosure threeAnimals 2
radio_button_unchecked

Each level opens as a bottom sheet once the one above is chosen.

3
closeChoose place
Enclosure
Enclosure name
Section · Site
cancel
Animal
M
Animal IDCommon nameScientific nameEnclosure

The choice shows as a site card and an animal card, each with a remove icon.

Rules

  • Search covers every level; a result says which section and site it belongs to.
  • The scan button sits beside the search and opens the chosen place directly.
  • A level stays disabled, saying "Choose a … first", until the level above is chosen.
  • The site comes from the site switch; it is not asked again.
  • Removing the picked place returns to this screen with the search empty.

Motion and haptics

MomentMotionHaptic
Level chosenSheet slides down; next field enablesLight tick
QR readCamera closes; place appearsSuccess pulse

Seen in

MedicalEggGRC

Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.