build69
build69  /  Components  /  Forms & Flows  /  FormField

FormField

v1.0.15Updated 19 Oct 2026

Composite of Label + Input/Select/Textarea + description + error. The standard atom for any form row in build69.

View source← Back to catalog

Preview

Live · 16 stories
DefaultOpen ↗
▸Why this is recommendedformfieldinputlabel+2

The default, out-of-the-box FormField.

Recommended for+14
  • ✓Every form field in build69
  • ✓Settings forms
  • ✓Multi-step wizards (one per step)
Tags+6
formfieldinputlabelerrordefault
Features+4
  • Label + control + description + error slot
  • Required indicator
  • Disabled state
  • Supports any input control as child
  • Inline / stacked layout
  • Error message wired to aria-describedby
  • i18n: labels prop (FormField + FieldArray) overrides every built-in UI string (info aria, auto-save states, row-remove aria template) — see FormFieldLabels / DEFAULT_FORM_FIELD_LABELS
  • Error and success status icons both reserve pr-9 on the control, so a trailing chevron / clear button laid out as the last flex child moves left of the icon instead of under it
  • Status modes: a control declares setFormFieldStatusMode(Control, "ring" | "self") to get the state ring only (groups: RadioGroup, Rating, clocks) or no ring / strip / icon at all (wrapper-rooted controls that paint aria-invalid themselves: TagInput, SearchInput, OtpInput, SignaturePad, Slider, Switch, Checkbox)
Not recommended for−2
  • ✕Read-only attribute lists (use KVList)
  • ✕Custom-layout fields (compose manually)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "FormField" })

Usage

import { FormField } from '@/components/patterns/form-field';
import { Input } from '@/components/inputs/input';

<FormField label="Email" description="We never share this." required>
  <Input type="email" />
</FormField>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
label

Field label

string—
description

Helper text

string—
error

Validation error message

string—
required

Mark required

boolean—
children

Input control

ReactNodeyes
labels

Override any built-in UI string — info aria, auto-save states, FieldArray row-remove template (i18n). Shared with FieldArray; merged over DEFAULT_FORM_FIELD_LABELS.

Partial<FormFieldLabels>—

Related

Platform docsAll componentsSource files