Skip to Content
UI Components/Cupertino UI/Cupertino Form Section

Cupertino Form Section

Form sections with rows for grouped settings

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

FormSection.tsx
1import { FlutterCupertinoFormSection, FlutterCupertinoFormRow } from '@openwebf/react-cupertino-ui';
2
3export function FormSectionExample() {
4  return (
5    <FlutterCupertinoFormSection insetGrouped>
6      <FlutterCupertinoFormRow>
7        <span slot="prefix">Username</span>
8        <input placeholder="john.appleseed" />
9      </FlutterCupertinoFormRow>
10    </FlutterCupertinoFormSection>
11  );
12}
  • Rows support slots such as `prefix`, `helper`, and `error` (slot names depend on your markup).

API Reference

Props (React)

NameTypeDefaultDescription
insetGroupedbooleanfalseUse inset-grouped iOS form style.
clipBehaviorstring-Clip behavior for the section.
Full type definitions: npm package docs.