Conditions and dynamic values
Control visibility, input state, dependent options, and callback scope.
showIf, disableIf, readOnlyIf, and requiredIf receive values for the field's scope. label, placeholder, description, and options accept static values or synchronous callbacks.
The demo shows a company field only for business accounts, validates it conditionally, clears it when hidden, and lets you lock a note through readOnlyIf.
Usage
Use your form instance from useForm. See the initial setup.
const schema = z.object({ business: z.boolean(), company: z.string() });
<ErlForm
form={form}
schema={schema}
fieldConfig={{
company: {
showIf: (values) => values.business,
requiredIf: (values) => values.business,
clearOnHide: true,
},
}}
/>Callback scope
| Position | Callback argument |
|---|---|
| Root field | Complete form values |
| Object child | Immediate parent object |
| Object child in an array | That item object |
| Tuple position | Parent tuple |
| Primitive array item configured through item | Parent array |
Use nested configuration to isolate children with the same name. Flat legacy keys are only a fallback. Prefer explicit item configuration for primitive arrays to keep scope consistent.
Hidden fields
Hidden fields keep their values by default. clearOnHide resets strings to an empty string, numbers/Date/datetime/files to undefined, booleans to false, arrays/tuples to an empty array, and objects to an empty object. Other types fall back to an empty string; this is not schema.parse.
Hidden fields remain part of schema validation. requiredIf controls UI state and native input attributes, not Zod requirements. Define conditional rules using superRefine or a discriminated union. Do not unconditionally require a value that clearOnHide removes.
Native readonly is not enforced uniformly: radio and checkbox change handlers need custom handling when editing must be blocked. Use disableIf or a custom component where appropriate.
Dependent choices
options: (values) => [...] recalculates select choices from current values. If the selected value disappears from the list, the renderer resets it to an empty string. Fetch asynchronous data in your application first; options callbacks do not accept Promises.