Field – Once UI

Field takes the same props as on the web (label, hint, error, required, span). It puts a label above one control and the error and hint under it, and hands the control what a screen reader needs: the label as its name, the error and hint as its hint, aria-required, and error so the control draws itself invalid. See the web Field for the same component in the browser.

Email.tsx

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

export function Email({ error }: { error?: string }) {
return (
  <Field label="Email" hint="We send the receipt here." error={error} required>
    <Input autoComplete="email" keyboardType="email-address" />
  </Field>
);
}

The control's own props win, so <Input error={false} /> inside a Field with an error stays unmarked. For a custom control, pass a function: it receives the props to spread.

Rating.tsx

<Field label="Rating" error={error}>
{(control) => <MyStars {...control} />}
</Field>

Differences from the web

One label. When the control's own label repeats the Field's, the control drops it, so <Field label="Space"><Select label="Space" /></Field> shows "Space" once. A Select or DateInput then uses the Field's label as its sheet title.
controlId is accepted and ignored: React Native links the label to the control through props, not ids.
The error is announced when it appears (a polite live region).

API reference

Prop	Type	Default	Description
label	ReactNode		The label above the control, and its spoken name.
hint	ReactNode		Helper text under the control.
error	ReactNode		The error. While set, the control is invalid.
required	boolean	false	An asterisk after the label and aria-required.
span	number		Columns to take inside a Form.
children	ReactNode \| (control) => ReactNode		One control, or a function given the control's props.