react-formbridge
Browse documentation
Field buildersv1.0.2

Base field builder

Most field builders inherit from the same shared BaseFieldBuilder surface.

  • This is where labels, placeholders, required state, custom validators, custom renderers, and conditional logic come from
  • Builders such as field.text(), field.email(), field.password(), field.number(), field.select(), field.phone(), and field.custom() all expose this common base surface
  • String-like builders then add extra string-specific methods on top of it, while field.file() is the main exception because it uses its own upload-focused builder
  • There is no public field.base() factory today; this page documents the common methods that the other builders inherit
BaseFieldBuilder.web.tsxtsx
1const schema = {
2 displayName: field.text('Display name')
3 .defaultValue('Ava')
4 .required('Choose a display name')
5 .placeholder('@ava')
6 .hint('Shown publicly')
7 .debounce(250),
8
9 companyEmail: field.email('Company email')
10 .placeholder('ava@company.com')
11 .visibleAndRequiredWhen('accountType', 'company'),
12
13 internalNote: field.custom('')
14 .label('Internal note')
15 .hidden()
16 .clearOnHide(),
17}

How inheritance works

The inheritance tree is intentionally shallow:

  • BaseFieldBuilder provides the shared contract for value defaults, validation hooks, rendering escape hatches, and conditional runtime rules
  • StringFieldBuilder extends that base with string-specific methods such as min(), max(), pattern(), and trim()
  • Specialized builders such as field.email() or field.password() then add their own narrow behavior on top
  • field.custom(defaultValue) is the cleanest way to get just the base surface with no extra type-specific helpers

Common methods reference

Every method below is inherited from BaseFieldBuilder.

MethodTypeDefaultDescription
defaultValue(value)value: field valueKeeps the builder defaultOverrides the initial value used when the form runtime is created.
required(message?)message?: stringField starts optional; default message is 'This field is required.'Marks the field as required and optionally overrides the empty-state error message.
optional()() => thisNo-op if the field is already optionalMarks the field as optional (removes the required constraint). Useful when extending a schema where the field was previously required
label(text)text: stringKeeps the current labelOverrides the display label stored in the descriptor.
placeholder(text?)text?: stringDefaults to '' when omittedSets the placeholder text displayed inside the field when it is empty.
hint(text)text: stringNo hint by defaultAdds a helper/hint text displayed below the field to guide the user.
disabled(value = true)value?: booleanField state defaults to falseDisables (or re-enables) the field. A disabled field is rendered but not interactive.
hidden(value = true)value?: booleanField state defaults to falseHides (or shows) the field. A hidden field is not rendered at all.
debounce(ms)ms: numberDefaults to 300Sets the debounce delay (in milliseconds) for value changes. Validation and side-effects are deferred until the user stops typing for the specified duration.
validate(fn)fn: Validator<T>No custom validators by defaultAppends a sync or async custom validator to the field.
validateAsync(fn)fn: Validator<T>No custom validators by defaultAlias for validate() when the intent is explicitly asynchronous. Useful for username availability checks, server-side uniqueness validation, promo code verification, and other async rules.
transform(fn)fn: (value) => valueNo transform by defaultRegisters a transform function that is applied to the field value. before validation and submission (e.g. trimming whitespace, normalizing case).
render(fn)fn: (props) => ReactNodeUses the generated rendererProvides a custom render function to completely override the default field rendering. Use this when the built-in field components don't meet your UI needs.
visibleWhen(fieldOrFn, value?)field name or predicateNo visibility conditions by defaultMakes the field conditionally visible based on another field's value. or a custom predicate function. - When a string is passed, the field is visible when the referenced field equals value (defaults to true). - When a function is passed, the field is visible when the predicate returns true. Multiple visibleWhen* calls are combined with AND logic (all must be satisfied).
visibleAndRequiredWhen(fieldOrFn, value?)field name or predicateNo visibility or required conditions by defaultCombines a visibility rule and a required rule in one call.
visibleWhenNot(field, value)field: stringNo visibility conditions by defaultMakes the field visible when the referenced field does not equal the given value.
visibleWhenTruthy(field)field: stringNo visibility conditions by defaultMakes the field visible when the referenced field has a truthy value (any value that is not false, 0, '', null, or undefined)
visibleWhenFalsy(field)field: stringNo visibility conditions by defaultMakes the field visible when the referenced field has a falsy value (false, 0, '', null, or undefined)
visibleWhenAny(pairs)Array<[field, value]>No visibility conditions by defaultAdds OR-based visibility rules.
requiredWhen(fieldOrFn, value?)field name or predicateNo conditional required rules by defaultMakes the field required only when the condition matches.
requiredWhenAny(pairs)Array<[field, value]>No conditional required rules by defaultAdds OR-based conditional required rules.
disabledWhen(fieldOrFn, value?)field name or predicateNo conditional disabled rules by defaultDisables the field only when the condition matches.
resetOnHide()() => thisAlready the default hide behaviorResets the field back to its default value when it becomes hidden.
keepOnHide()() => thisOverrides the default reset behaviorKeeps the current value even when the field becomes hidden.
clearOnHide()() => thisOverrides the default reset behaviorClears the value when the field becomes hidden.

Important exception

field.file() does not inherit the full base builder surface.

  • It keeps a few familiar helpers such as required(), hint(), disabled(), and hidden()
  • It does not expose render(), transform(), or the conditional helpers from BaseFieldBuilder
  • Treat it as a specialized upload builder rather than the generic starting point for every field