Components
SearchInput
{
function Controlled() {
const [value, setValue] = React.useState('');
return (
<View className="w-96 gap-3">
<SearchInput {...args} value={value} onChangeText={setValue} />
<Text variant="footnote" color="tertiary">
{value ? `Filtering by “${value}”` : 'No filter applied'}
</Text>
</View>
);
}
return <Controlled />;
}Import
import { SearchInput } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
placeholder | — | "Search…" | Hint shown while empty. Keep it short — the field is narrow once the cancel affordance appears. |
cancelText | — | — | iOS only. Label for the cancel button that slides in beside the field while it is focused. |
editable | boolean | true | False renders the field inert but still visible — use it when search is not available yet rather than hiding the control. |
value | — | — | Makes the input controlled. Pair with onChangeText, or typing will not register. |
Examples
With Value
Disabled
RectangleChart
FRACTIONS, NOT COUNTS — each datum is a 0–1 fill ratio, applied directly as y={(1 - value) * 100}% / height={value * 100}%.
SegmentedControl
WEB APPROXIMATION — on iOS this renders the platform's native segmented control (@react-native-segmented-control/segmented-control); what you see here is the Material fallback built from Button/Text.