Custom components

The first input uses a custom renderer that converts text to uppercase; the second uses the built-in renderer. Set component on one field to replace its control.

Usage

Use your form instance from useForm. See the initial setup.

function UppercaseInput({ field }: FieldComponentProps<string>) {
  return (
    <input
      value={field.state.value}
      onChange={(event) => field.handleChange(event.target.value.toUpperCase())}
    />
  );
}

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{ name: { component: UppercaseInput } }}
/>

Erlangform still renders the label, description, and error around a custom input. Keep id equal to field.name to connect the label. Your component is responsible for value conversion, disabled/readonly/required behavior, accessibility attributes, and calling handleBlur when needed.

FieldComponentProps provides field, resolved config, and state. field includes name, state.value, state.meta.errors, handleChange, and optional handleBlur. Connect aria-describedby to the description/error IDs if those elements exist.

Component registry

<ErlForm form={form} schema={schema} fieldComponent={{ string: NameInput }} />

Define NameInput using FieldComponentProps and initialize form/schema as in the Quick Start. Priority is per-field component, then registry, then built-in input. Fields with options use the registry key select, including radio fields.

Registry keys: string, email, url, select, date, time, datetime, date-object, file, unknown, number, boolean, object, array, and union.

Containers

Objects and arrays accept component or the corresponding registry entry. ContainerComponentProps provides field, config, state, values, and optional children. The renderer does not populate children automatically; a custom container builds its own content.

Although the registry type includes union, the discriminated-union rendering path does not apply this override in 1.0.0. Record container overrides are also not used by the current renderer.