A single form field, complete with a label, helper text and automatic validation: required fields, email addresses and numbers are checked by themselves before the form can be sent. The technical name is FormField.
Use FormField to wrap any input inside a Form block — text, email, number, select or textarea. It handles the label, helper text and validation state so every field in a form looks and behaves consistently, instead of hand-rolling markup for each one.
Helper text is useful for explaining why you're asking for something sensitive, such as a phone number ("only used to confirm your order"), and the required flag alone is often enough to stop an incomplete submission reaching you — no extra validation code needed.
Choosing the right field setup
On a webshop's custom order form, FormField typically wraps a shipping address, a gift note, or a size selection, each with helper text clarifying anything non-obvious — "leave blank for no gift message" avoids an empty field looking like an error. On a portfolio site's inquiry form, it commonly wraps a budget range or project timeline field, framed with helper text explaining why the information is useful ("helps us recommend the right package"). On a professional services intake form, fields like company size or industry often use a select input inside FormField so answers stay consistent and easy to filter later, instead of free text that's harder to analyse.
A common mistake is marking too many fields required just because the data would be nice to have — every required field is a chance for a visitor to abandon the form, so reserve required for information you genuinely can't proceed without. Another is skipping helper text on fields whose purpose isn't self-evident, like asking for a phone number without saying why; a short explanation reduces hesitation and support questions alike. Also make sure the input type matches the data — a phone number typed as plain text loses format checking, while typing it as tel or number catches obvious mistakes before submission.
FormField only makes sense inside a Form block — outside of one it has no submission target. For fields where visitors pick from a fixed set of options rather than typing free text, pair it with a RadioField instead of a plain input, which keeps the same label and validation behaviour but presents the choice as selectable options.
Because label, helper text and input are linked together automatically, screen readers announce the full context for each field — label, purpose and required state — without any manual aria-describedby wiring, and the validation state is exposed the same way native HTML form validation is, so it works consistently across browsers and assistive technology.
Example
The prompt for this example
Add a required email field to the form with the helper text 'We only use this to reply.'