react-formbridge
Browse documentation
Core conceptsv1.0.2

Actions & helpers

Imperative helpers are useful when the form participates in a bigger flow: wizard steps, route changes, modal close guards, inline autosave, custom field chrome, or external events.

Actions.tsts
1await form.validate(names?)
2form.resetFields(values?)
3form.setValue('firstName', 'Ava')
4form.getValue('firstName')
5form.getValues()
6form.setError('email', 'Already used')
7form.clearErrors(['email'])
8form.watch('email')
9form.watchAll()
10await form.submit()
11const email = form.fieldController('email')
12email.onChange('ops@runilib.dev')
13email.focus()
14await form.saveDraftNow()
15await form.clearDraft()
16form.visibility.company?.visible

Complete helper surface

Complete imperative helper surface. Each entry below is exposed on the object returned by useFormBridge() and runs through the same pipeline as the built-in UI (validation, analytics, conditional rules, persistence):

MethodTypeDescription
validate(name? | name[]) => Promise<boolean>Trigger validation imperatively. Pass one name, an array, or nothing for the whole form. Resolves true when every targeted field is valid
resetFields(partialValues?) => voidReset to schema defaults (or merge a partial on top). Clears errors, touched, and dirty flags and re-runs conditional rules
setValue(name, value) => voidImperatively write into one field. Goes through the normal change pipeline (validation timing, analytics, conditional re-evaluation)
getValue(name) => valueRead one field on demand without subscribing the caller to updates
getValues() => ValuesRead the full typed value object without subscribing - ideal for building payloads or logging
setError(name, message) => voidPush a manual error onto one field. Used to project server-side errors back onto the form
clearErrors(name? | name[]) => voidClear errors for one field, a subset, or the whole form
watch(name) => valueReactive single-field read - subscribes the caller so it re-renders on change
watchAll() => ValuesReactive full-values read - heavier than watch, use for summary bars or debug panels
submit() => Promise<void>Imperatively trigger submission through the same pipeline as <Form.Submit> (validation, onSubmit / onError / onSubmitError, analytics)
fieldController(name) => ControllerReturns a headless controller for one field (reactive value, error, touched, visible, change/blur/focus handlers, imperative helpers, focus bridge)
saveDraftNow() => voidWhen persist is configured, flush current values to storage immediately, bypassing the debounce window
clearDraft() => voidWhen persist is configured, delete the saved draft for this form
visibility[name]{ visible, required, disabled }Computed per-field conditional flags - drive surrounding layout without re-implementing the rule engine

Field-scoped imperative control

Use form.fieldController(name) when the action belongs to one field rather than the whole form.

  • Examples: opening a custom picker, focusing a masked input from another button, mapping server validation back to a single custom field, or building your own review shell around one schema key

Complete fieldController(name) surface:

MethodTypeDescription
namestringField name as declared in the schema
valueunknownCurrent field value (reactive)
label / placeholder / hintstringCopy strings resolved from the schema
errorstring | undefinedCurrent error message for this field
touched / dirty / validatingbooleanPer-field interaction + validation flags
disabled / required / visiblebooleanComputed conditional flags
options?SelectOption[]Options (select/radio/async) when applicable
otpLength?numberOTP length (OTP fields only)
allValuesRecord<string, unknown>Snapshot of every current form value
descriptorFieldDescriptorRaw descriptor produced by the builder
renderPropsRenderContextContext object passed to custom render(fn) hooks
setValue(value) => voidImperative value write (goes through change pipeline)
onChange(value) => voidChange handler expected by most controlled inputs
onBlur / onFocus() => voidBlur / focus event handlers
focus / blur() => voidImperative focus / blur (uses the focus bridge)
validate() => Promise<boolean>Run validation for this field only
setError(message) => voidPush an error on this field
clearError() => voidClear this field error
registerFocusable(target) => voidRegister a DOM node, TextInput, or { focus?, blur? } object for the focus bridge