A floating glass search pill that swells on focus as a cancel button splits off.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| value / defaultValue / onChangeText Controlled or uncontrolled query; clear and cancel report ''. | string | — |
| placeholder Placeholder, also the field's accessibility label. | string | "Search" |
| onSubmit Called with the query when the keyboard's search key is pressed. | (text: string) => void | — |
| showCancel A glass cancel button springs in beside the pill while focused or holding text. | boolean | false |
| cancelLabel Text for the cancel button, e.g. "Cancel"; without it the button is a round ✕. | string | — (round ✕) |
| onCancel After cancel clears the query and dismisses the keyboard. | () => void | — |
| leading Replaces the magnifier at the start of the pill. | ReactNode | magnifier |
| trailing Inside the pill at the end, e.g. a mic button. | ReactNode | — |
| autoFocus Focus the field on mount. | boolean | false |
| scheme Force light or dark glass and ink, e.g. 'dark' over a photo. | 'light' | 'dark' | kit theme |
| size 44 / 52pt tall; font, icons and padding scale too. | 'md' | 'lg' | 'md' |
| style Row holding the pill and the cancel button. | StyleProp<ViewStyle> | — |
| …TextInputProps editable, returnKeyType, onFocus, onBlur, onSubmitEditing, … (ref forwards to the TextInput). |
Behaviour & accessibility
- Motion
- The pill swells a touch on focus and a clear button pops in once there is text. With showCancel, a glass cancel button springs in beside it while searching.
- Reduced motion
- The pill no longer swells, and the clear and cancel buttons fade in with a short timing instead of a spring.
- Keyboard
- The return key reads Search and calls onSubmit with the query. Cancel clears the text and dismisses the keyboard.
- Screen readers
- The field has the search role and is labelled by its placeholder. The clear and cancel buttons read "Clear search" and cancelLabel (or "Cancel search").
- Platforms
- Real Liquid Glass on iOS 26, where the pill and cancel button melt together. Blur or frosted glass everywhere else.
Source
Did you like the content?