Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThe phone search field in two platform forms: an iOS rounded field with a sliding Cancel button and an Android pill that becomes a full bar with a back arrow.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it at the top of a phone list or screen when search is a main task and you want it to look and behave like the platform's own.
Do not use it for site-wide search on desktop (use a command palette or search field) or when you need suggestions (pair it with a listbox).
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
MobileSearchBar | value / onValueChange | string / (value) => void | required | Controlled text. |
MobileSearchBar | onSearch | (value) => void | - | Enter or the Search key. |
MobileSearchBar | onCancel | () => void | - | Cancel, Back or Escape. |
MobileSearchBar | platform | "ios" | "android" | "ios" | The look and the cancel pattern. |
MobileSearchBar | label / placeholder / cancelLabel | string | Search / Search / Cancel | Texts. |
The component ships with a Testing Library test (mobile-search-bar.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.