Components · Form & Input
Search Input
StableSince v0.0.1
A text input pre-wired with a search icon and a clear button for filtering content.
import { SearchInput } from '@nexub/react';Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | — | Placeholder text shown when empty. |
| value | string | — | Controlled value of the search field. |
| onClear | () => void | — | Called when the user clicks the clear button. |
| size | 'sm' | 'md' | 'lg' | — | Controls font size and padding. |
On iOS & Android: SearchField
@nexub/react-nativeAlpha
import { SearchField } from '@nexub/react-native';
<SearchField label="Search transactions" onChangeText={setQuery} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Name | SearchInput. | SearchField, with the platform search keyboard and clear button. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
SearchField props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Accessible name. |
| style | StyleProp<ViewStyle> | — | — |