Form

Stitch your own fields inside it; Form adds the stacked or two-column rhythm, titled sections, the submit and cancel actions row, and Enter to submit.
Email
Password
iOS
Email
Password
Android
Email
Password
Web
tsx
<Form submitLabel="Sign in">
<Input label="Email" placeholder="you@example.com" />
<Input label="Password" />
</Form>
On the web, Enter confirms an active Autocomplete suggestion before it can submit the form. A subsequent Enter submits after the list closes. Enter used to confirm an input-method candidate never submits, and holding Enter does not repeat submission. Multiline fields retain Enter for newlines. On native platforms, each field's onSubmitEditing owns the return-key action.
Form is a composition surface: you stitch the field atoms as children and keep their state; Form supplies the vertical rhythm, the actions row, and onSubmit, which fires from the submit button or from Enter in a single-line field on the web.
On the web a Form is a form landmark. Name it with accessibilityLabel, a brief statement of its purpose such as "Sign in", so a screen reader's landmark list can tell it apart; a page that holds more than one form needs a distinct name on each.

Props

FormSection

Prop
Description
title
string
Section heading naming this group of controls.
description
ReactNode
Muted supporting line under the heading.
children
ReactNode
The section's stitched controls.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Form

Prop
Description
children
ReactNode
The form rows, stitched by the caller: Input, Select, Checkbox, a FormSection, any node. Each control keeps its own state (controlled or uncontrolled); Form never intercepts it.
twoColumn
boolean
Two-column: rows flow into a two-up grid that collapses to a single column on small screens (desktop-first). Omit for the stacked default.
submitLabel
string
Label for the primary submit button. Passing it (or `cancelLabel`) renders the actions row.
cancelLabel
string
Renders an outline cancel button before the submit button.
onSubmit
() => void
Fired when the submit button is pressed, and on the web when Enter is pressed inside one of the form's single-line text fields. Form owns no field state, so the caller reads its own values (no payload).
onCancel
() => void
Fired when the cancel button is pressed.
disabled
boolean
Disables the actions row and Enter-to-submit.
accessibilityLabel
string
The form's name for assistive tech, a brief statement of its purpose ("Sign in", "Invite a teammate"). Form is a form landmark on the web, and ARIA asks every form landmark for a name: it is how a landmark list tells two forms on one page apart. Omit it and the form stays unnamed, as before.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.
xxxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
sm
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
md
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
lg
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wide
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wider
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
widest
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
page
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
start
boolean
Pin a capped component to the leading edge instead of centering it in its column.

Do & Don’t

Stacked

Don’t
Email
Password
Pairing an email and password side by side cramps a sign-in form and breaks the natural top-to-bottom reading order.
Do
Email
Password
Keep short forms one field per row so each label sits directly above its input and the eye flows straight down.

Two-column

Don’t
Street address
ZIP
Putting a wide field next to a tiny one in the same two-column row leaves the short input awkwardly oversized.
Do
Street address
City
ZIP
Compose mixed rows inside the stacked form: give a full-width field like the street its own line and pair the similar-width city and ZIP in a Row.

Sections

Don’t
Personal info
Full name
Billing
Card number
Hand-rolled headings spliced between fields carry no grouping semantics, so assistive tech never hears which section a field belongs to.
Do
Personal info
Displayed on your public profile.
Full name
Billing
Used for invoices and receipts.
Card number
Group related fields in a FormSection so each cluster carries its heading, its supporting line, and group semantics a screen reader announces.

Inline form

Don’t
Subscribe to updates
We'll send you a weekly digest of what changed.
Stacking the field above its button breaks the single-decision rhythm and adds a row of dead space.
Do
Subscribe to updates
We'll send you a weekly digest of what changed.
Keep the input and its submit button on one row so the input + action reads as one step.
← Field
GridList →