Form – Once UI

Form takes the same props as on the web (density, columns, size, as, onSubmit, pending). It lays its fields out in rows and columns, gives them all one size, and tells a SubmitButton when a submit is running. With density="stacked" the fields fuse onto shared borders and only the group's outer corners stay round. See the web Form for the same component in the browser.

Submitting

React Native has no form element, so the SubmitButton inside a Form with onSubmit calls it; as="form" is accepted and changes nothing more. Return a promise and the form stays pending until it settles: the button shows its spinner, swaps to pendingLabel and ignores taps, so a double tap sends one request.

SignIn.tsx

import { Form, Input, SubmitButton } from "@once-ui-system/native";

export function SignIn() {
return (
  <Form as="form" onSubmit={() => fetch("/api/sign-in", { method: "POST" })}>
    <Input label="Email" autoComplete="email" />
    <Input label="Password" secureTextEntry />
    <SubmitButton label="Sign in" pendingLabel="Signing in…" fillWidth />
  </Form>
);
}

Stacked fields

density="stacked" joins the fields into one block. The corners come from the fields that actually rendered, so hiding one never leaves the group ending on a square edge. tight (the default, 8) and spacious (24) keep every field separate.

Contact.tsx

<Form density="stacked">
<Input label="Name" />
<Input label="Phone" />
<Input label="Email" />
</Form>

Columns

columns takes a number, or one per breakpoint ({ xs: 1, m: 2 }). A child's span takes several columns.

Visit.tsx

<Form columns={2}>
<Input label="Party" />
<Input label="Time" />
<Field span={2}>
  <Textarea label="Notes" />
</Field>
</Form>

Differences from the web

No form element. onSubmit takes no event, and only a SubmitButton submits. The keyboard's return key does not; call your submit from onSubmitEditing on the last field if you want it to.
Columns are rows of flexible cells rather than a CSS grid.

API reference

Prop	Type	Default	Description
density	"stacked" \| "tight" \| "spacious"	"tight"	Gap and grouping.
columns	number \| { xl?, l?, m?, s?, xs? }	1	Columns, flat or per breakpoint.
size	"xs" \| "s" \| "m" \| "l" \| "xl"		Size for every field that sets none.
as	"div" \| "form"	"div"	Accepted for the web's sake; onSubmit alone lets a SubmitButton inside submit.
onSubmit	() => unknown		Called by the SubmitButton. A returned promise keeps the form pending.
pending	boolean		Marks the form as submitting from outside.

Form also takes every Flex prop.