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

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.

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 →