Search bar audit

AID-696 — what hosts the search field on each screen, and what each one overrides.

The primitives

InputField sizes

packages/ui/src/components/Input/Field/styles.ts:6

size	height	padding	icon
small	32 px	10	14 px
base	40 px	14	20 px
large	48 px	14	22 px
xlarge	56 px	16	22 px

Strata PNB searchSlot

apps/mobile/src/features/persistent-nav-bar/slots/Search.tsx:30

<InputField
  size="base"           // 40 px
  showLabel={false}
  autoCapitalize="none"
  autoCorrect={false}
  label={placeholder ?? t("commandSearch")}
  placeholder={placeholder ?? t("commandSearch")}
  value={value}
  setValue={setValue}
/>

Consumers can only override value, setValue, placeholder, autoFocus, testID. No way to add an icon, clear button, or cancel button from the call site.

Per-screen overrides

Screen	Host	Underlying	Height	Icon	Clear	Cancel
Swap asset select	Strata useNavBar({ search })	InputField	40	—	—	—
Validator list	Strata useNavBar({ search })	InputField	40	—	—	—
Trending Perps	ExploreSearchInput wrapper	InputField	40	mag 20	—	—
Collectibles list	ExploreSearchInput wrapper	InputField	40	mag 20	—	—
Search tab	bespoke SearchScreenHeader	InputField	32	mag 20 / arrow 24	while-editing	always
Manage Tokens	bespoke SearchField	InputField	32	mag 16	onClear	—
Fiat onramp token select	SelectTokenSheet	raw TextInput	36	40 px header btn	—	—
Send token select	SelectTokenSheet	raw TextInput	36	40 px header btn	—	—

The offenders, with JSX

Money-Mover token sheets (fiat onramp + send)

packages/money-mover-ui/src/sheets/SelectTokenSheet.native.tsx:264

<TextInput
  value={query ?? ""}
  onChangeText={onQueryChange}
  placeholder={t("commandSearch")}
  placeholderTextColor={colors.textIncidental}
  returnKeyType="search"
  autoCorrect={false}
  autoCapitalize="none"
  style={{
    color: colors.textBase,
    backgroundColor: colors.areaAccent,
    borderRadius: 12,
    paddingHorizontal: 12,
    height: 36,             // hard-coded, not in InputField DIMS
  }}
/>

Search tab

apps/mobile/src/features/search/components/SearchScreenHeader.tsx:77

<InputField
  size="small"              // 32 px
  clearButton="while-editing"
  cancelButton="always"
  onCancel={goBack}
  autoFocus={true}
  ...
>
  {searchIcon /* mag 20 px on iOS, arrow 24 px on Android */}
</InputField>

Manage Tokens

apps/mobile/src/app/(fungible)/fungible/FungiblesVisibility.tsx:63

<SearchField
  size="small"              // 32 px
  showLabel={false}
  onChangeText={handleSearch}
  onClear={onClearSearch}
>
  <IconMagnifyingGlass size={16} />   {/* 16, not 20 */}
</SearchField>

Trending Perps / Collectibles (the consistent ones)

apps/mobile/src/pages/explore/ExplorePerpsTrendingPage.tsx:36
apps/mobile/src/features/collectibles/components/CollectionsList/index.tsx

<ExploreSearchInput
  id={SEARCH_INPUT_ID}
  value={searchText}
  onChangeText={onChangeSearchText}
/>
// → InputField with default size="base" (40 px) + mag 20 px icon

Swap / Validator (the slim-looking ones)

apps/mobile/src/pages/swapper/SwapAssetSelectPage.tsx:268
apps/mobile/src/pages/staking/native/ValidatorListPage.tsx:23

useNavBar({
  search: { value, setValue, placeholder, autoFocus, testID },
});
// → Strata searchSlot → InputField size="base" (40 px), NO icon

What to fix

• Strata searchSlot should render the magnifying glass by default and accept icon / clearButton / cancelButton in its slot config. Right now the slot is too thin and consumers route around it.
• Pick one canonical height. 40 px matches the slot default and most consumers; migrate the 32 px outliers (Search tab, Manage Tokens) and kill the 36 px hard-code in SelectTokenSheet.
• Rewrite SelectTokenSheet's search field as InputField. Highest-leverage fix — it's the input for fiat onramp, send, and every Money-Mover sheet consumer.
• Standardize the magnifying-glass icon at 20 px. Manage Tokens uses 16; everyone else uses 20.

Pinned to lisherwin/perth · 2026-05-20