Skip to Content
UI Components/Cupertino UI/Cupertino Search Text Field

Cupertino Search Text Field

iOS-style search bar with clear button

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

SearchTextField.tsx
1import { 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}

API Reference

Props (React)

NameTypeDefaultDescription
valstring-Current text value.
placeholderstring-Placeholder when empty.
onInput(event: CustomEvent<string>) => void-Fires on value changes (`event.detail`).
onSubmit(event: CustomEvent<string>) => void-Fires on submit (`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.