Single-line iOS-style text input with customizable styling
1npm install @openwebf/react-cupertino-ui1import { useState } from 'react';
2import { FlutterCupertinoInput } from '@openwebf/react-cupertino-ui';
3
4export function TextFieldExample() {
5 const [value, setValue] = useState('');
6
7 return (
8 <FlutterCupertinoInput
9 val={value}
10 placeholder="Enter text…"
11 clearable
12 onInput={(e) => setValue(e.detail)}
13 />
14 );
15}| Name | Type | Default | Description |
|---|---|---|---|
| val | string | - | Current text value. |
| placeholder | string | - | Placeholder when empty. |
| type | string | text | Keyboard type: text/password/number/tel/email/url. |
| clearable | boolean | false | Show clear button while editing. |
| onInput | (event: CustomEvent<string>) => void | - | Fires on value changes (`event.detail`). |
| onSubmit | (event: CustomEvent<string>) => void | - | Fires on submit/done (`event.detail`). |
| Name | Type | Default | Description |
|---|---|---|---|
| focus() | () => void | - | Focus the input. |
| blur() | () => void | - | Blur the input. |
| clear() | () => void | - | Clear the value (fires `clear`). |