Wrapper component returned by the hook. It connects submit, validation, async loading state, and submit error handling to the generated field runtime.
- On web, it behaves like a smart
<form> - On native, it behaves like a smart wrapper you can place inside your layout
Formalso accepts the native props of that underlying platform element, so things likeid,method,autoComplete,aria-*,testID, oraccessibilityLabelcan be passed directly at the call siteForm.Submitis coupled to the same runtime, so loading and disabled states stay aligned with the form, and it likewise extends the native button / pressable props of the platform
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 | {/* fields... */} |
| 11 | <Form.Submit |
| 12 | type="submit" |
| 13 | name="intent" |
| 14 | value="save-profile" |
| 15 | loadingText="Saving..." |
| 16 | > |
| 17 | Save |
| 18 | </Form.Submit> |
| 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 |
Form.Submit
Complete Form.Submit props surface:
Alongside the props below, Form.Submit also extends the native props of the underlying platform button / pressable, except for the keys FormBridge already models itself (children, style, and the managed loading / disabled behavior).
- Web: native
<button>attributes liketype,name,value,form,formAction,aria-*,data-*, … - Native: passthrough
TouchableOpacity-style props such astestID,accessibilityLabel,hitSlop,activeOpacity, …
| Method | Type | Description |
|---|---|---|
children? | ReactNode | Button label / content |
style? | StyleProp | Cross-platform button/wrapper style |
loadingText? | ReactNode | Replaces the label while submitting |
disabled? | boolean | Adds an extra disabled condition on top of submit state |
className? | string | Web only |
containerStyle? | StyleProp | Native only wrapper/button style |
textStyle? | StyleProp | Native only label style |
indicatorColor? | string | Native only loading indicator color |