Components / Inputs / Picker fieldOpen in Figma

Picker field

Ready

A field that opens a chooser for people, sites or other records, and lists what was picked below it.

Platforms Phone · TabletGroup InputsUpdated 26 Oct 2026

When to use

  • People choose one or more records the app already holds: people, sites, sections, animals.
  • Each choice needs more than a name to be told apart: a photo, a role, an area.

When not to use

If people need toUse
Choose one option from a short fixed listDropdown
Tick a few plain optionsCheckbox
Type free textText field
Filter a listSearch and filter

Anatomy

Choose peopleadd_circle
AB
Name
Detail
cancel
  1. Label · required
  2. Container · required
  3. Hint text · required; says what will be chosen
  4. Add icon · required, Add blue, right side
  5. Picked row · one per chosen record, below the field
  6. Photo or initials · required in a picked row; thumbnail for sites
  7. Name and detail · name required, detail optional
  8. Remove icon · required, Coral

Variants

VariantPurposeFigma
PeoplePicked rows with a 36 round photo or initials, name and roleDesigned
SitesPicked rows use the site card: 56 tall, thumbnail 40, Page light fillDesigned
Single pickThe field is replaced by its one picked row; tapping the row opens the chooser againTemporary rule
AnimalA bottom sheet with search and full animal cards, a filled radio on the chosen one; the picked animal shows as its animal card with a remove iconTemporary rule

States

StateWhenWhat changesFigma
EmptyNothing picked yetHint text in Hint grey, add icon in Add blueDesigned
PickedOne or more records chosenPicked rows stack below the field, gap 8; the field stays so more can be addedDesigned
ChoosingThe chooser is openA bottom sheet with search, "Selected n/total", Select all and rows with checkboxes; Cancel and Save in the footerDesigned
ErrorA required pick is missingRed border and a red message 4 belowTemporary rule
DisabledPicks can't be changed nowDisabled fill, add icon in Hint grey; picked rows lose their remove iconTemporary rule

Behaviour

  • Tapping anywhere on the field opens the chooser as a bottom sheet titled with what is being chosen.
  • Rows already picked open ticked. Tapping a row ticks or unticks it; the count updates at once.
  • Picks are kept only on Save. Cancel, × or tapping the dimmed area drops the unsaved changes.
  • The remove icon on a picked row takes it out at once, with no confirm. Removing the last one returns the field to empty.
  • Sites are always picked and shown with the site card, never as plain text.
  • Animals are always picked and shown with the full animal card. One animal: radios and Select; several animals: check boxes and Save.
  • Choosing exactly one shows filled radios; choosing several shows check boxes. A green tick is never the chosen mark.

Phone and tablet

PhoneTablet
Label to field812
Picked rowsOne per line, gap 8Two per line, gap 8
ChooserBottom sheetBottom sheet

Content

PartRule
LabelA plural noun in sentence case: "Trainers", "Sites"
Hint text"Choose" plus the noun: "Choose sites"
Picked rowName on the first line; one detail on the second (role, area). No IDs unless people search by them
Error messageSays what to do in one line: "Choose at least one"

Do and don't

Choose peopleadd_circle
AB
Name
Detail
cancel
DoList each pick as its own row with a way to remove it.
Name 1, Name 2, Name 3add_circle
Don'tJoin picks into one line of text inside the field.
Choose sitesadd_circle
DoUse the add icon in Add blue to show the field opens a chooser.
Choose siteskeyboard_arrow_down
Don'tUse a chevron. It reads as a dropdown with a single choice.
DropdownSite cardAnimal cardBottom sheetCheckboxForm layout
← Date fieldCheckbox →