iOS-style search bar with clear button
1npm install @openwebf/react-cupertino-ui1import { useState } from 'react';
2import { FlutterCupertinoSearchTextField } from '@openwebf/react-cupertino-ui';
3
4export function SearchTextFieldExample() {
5 const [value, setValue] = useState('');
6
7 return (
8 <FlutterCupertinoSearchTextField
9 val={value}
10 placeholder="Search"
11 onInput={(e) => setValue(e.detail)}
12 onSubmit={(e) => console.log('Submit:', e.detail)}
13 />
14 );
15}| Name | Type | Default | Description |
|---|---|---|---|
| val | string | - | Current text value. |
| placeholder | string | - | Placeholder when empty. |
| onInput | (event: CustomEvent<string>) => void | - | Fires on value changes (`event.detail`). |
| onSubmit | (event: CustomEvent<string>) => void | - | Fires on submit (`event.detail`). |
| Name | Type | Default | Description |
|---|---|---|---|
| focus() | () => void | - | Focus the field. |
| blur() | () => void | - | Blur the field. |
| clear() | () => void | - | Clear the value. |