Skip to Content
UI Components/Cupertino UI/Cupertino TextFormField Row

Cupertino TextFormField Row

Inline text field row for form sections

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

TextFormFieldRow.tsx
1import { useState } from 'react';
2import { FlutterCupertinoTextFormFieldRow } from '@openwebf/react-cupertino-ui';
3
4export function TextFormFieldRowExample() {
5  const [value, setValue] = useState('');
6
7  return (
8    <FlutterCupertinoTextFormFieldRow
9      val={value}
10      placeholder="Email"
11      onInput={(e) => setValue(e.detail)}
12    />
13  );
14}

API Reference

Props (React)

NameTypeDefaultDescription
valstring-Current text value.
placeholderstring-Placeholder when empty.
typestringtextKeyboard type: text/password/number/tel/email/url.
clearablebooleanfalseShow clear button while editing.
onInput(event: CustomEvent<string>) => void-Fires on value changes (`event.detail`).

Methods (React ref)

NameTypeDefaultDescription
focus()() => void-Focus the field.
blur()() => void-Blur the field.
clear()() => void-Clear the value.
Full type definitions: npm package docs.