SelectionListPicker — 375 px, English · العربية

Frames 4a–4c at a phone width, inside a consuming product's form — not the FuzeFront shell. The control fills the field width, the menu opens in the flow below it (never clipped by the host's container), and options are thumb-sized.

en · ltr · 375 · single select

Acme CRM

New opportunity

CRM · a consuming product's form

Account name

Sales region

What the host form submits

{ "sales_region": "sli_12h455vb4pex5vsknk084sn02q" }

en · ltr · 375 · multi select

Helpdesk

Support ticket

Helpdesk · a consuming product's form

Countries affected

ar · rtl · 375 · single select

Acme CRM

فرصة جديدة

نموذج منتج مستهلك

منطقة المبيعات

submits

{ "sales_region": "sli_12h455vb4pex5vsknk084sn02q" }

en · ltr · 375 · stored archived / purged

Acme CRM

Opportunity #2210

Saved in March

Sales region

Real label, greyed. Not offered in the menu — it can be kept, not newly chosen.

Country

Purged id: the id stays in the form, so re-saving does not drop it.

States at 375 px

Same states as frame 4a: never throw into the host, never silently render an empty control.

Sales region

empty — no active values

Sales region

No options available

error

Sales region

Couldn't load options

Keeps any selected value.

404 — list unavailable

Sales region

List unavailable

404, never 403 — no cross-org probing.

Rules the implementation must keep

The picker takes the width of the host field and never imposes a minimum width that would scroll the host page at 375 px.
Below 40em the menu opens inline, in the flow under the control (data-menu-placement="inline") instead of as an absolutely-positioned popover, so a host container with overflow: hidden cannot clip it and the on-screen keyboard cannot cover it. The filter input keeps focus while the keyboard is open.
Options, the control and the filter are ≥ 44 px (--touch-target). Chip remove targets are padded to at least --space-6 and spaced apart; Clear all becomes its own full-width button under the chips.
RTL (ar, he): the host's dir drives the picker — label, value and options align to the start, the caret sits at the inline end; ids in the inspector stay LTR.
Archived and purged stored values render exactly as in frame 4c; every state renders inside the field, never by throwing into the host.

Test hooks: [data-frame='18-mobile-picker'] · [data-device='375'] · [data-panel='picker-mobile'] · [data-mode='single'] · [data-mode='multi'] · [data-locale='ar'][data-dir='rtl'] · [data-combo-control] · [data-combo-menu][data-menu-placement='inline'] · [data-combo-search] · [data-selected-label] · [data-chips] · [data-action='clear-all'] · [data-persisted] · [data-case='archived'] · [data-case='purged'] · [data-state='loading'] · [data-state='empty'] · [data-state='error'] · [data-state='not-found'] · [data-rules='mobile-picker']
Playwright mounts the harness at { viewport: 375×812, locale: en | ar }: no horizontal scroll, the open menu's box lies inside the viewport and below the control, every option ≥ 44 px, and the form still submits the item id.
Tokens only — no raw hex, spacing or type outside tokens.css / frame.css / mobile.css.