Minimal wrapper component returned by the hook. It provides context and connects its submit event to FormBridge's validation and submission pipeline. It does not render fields or a submit button.
- On web, it behaves like a smart
<form> - On native, it behaves like a smart wrapper you can place inside your layout
Formaccepts the native props of that underlying platform element.- Render your own controls and submit button. Read
form.state.isSubmittingto expose loading/disabled UI. - For a completely application-owned wrapper, use
handleSubmiton web or callsubmit()on native.
Form.tsxtsx
| 1 | <Form |
| 2 | id="profile-form" |
| 3 | name="profile-form" |
| 4 | method="post" |
| 5 | aria-label="Profile form" |
| 6 | onSubmit={saveProfile} |
| 7 | onError={(errors) => console.log(errors)} |
| 8 | onSubmitError={(error) => console.log(error)} |
| 9 | > |
| 10 | <AppField form={form} name="displayName" /> |
| 11 | <button |
| 12 | type="submit" |
| 13 | name="intent" |
| 14 | value="save-profile" |
| 15 | disabled={form.state.isSubmitting} |
| 16 | > |
| 17 | {form.state.isSubmitting ? 'Saving…' : 'Save'} |
| 18 | </button> |
| 19 | </Form> |
Props
Complete Form props surface:
Alongside the FormBridge-specific props below, Form also extends the native props of the underlying platform wrapper, except for the keys FormBridge already owns (children, onSubmit, style, and className).
- Web: native
<form>attributes likeid,name,method,autoComplete,aria-*,data-*,target,noValidate, … - Native: passthrough wrapper props such as
testID,accessibilityLabel,pointerEvents, …
| Method | Type | Description |
|---|---|---|
children | ReactNode | Form body content |
onSubmit | (values) => void | Promise<void> | Required - sync or async submit handler |
onError? | (errors) => void | Called when validation fails before submit |
onSubmitError? | (error) => string | Maps a thrown submit error to the user-facing state.submitError string |
style? | StyleProp | Cross-platform wrapper style prop |
className? | string | Web only |