Custom Field on property vs Custom Field at Schema Level

[codisfy]

Prerequisites

• [X] I have read the documentation

What theme are you using?

bootstrap-4

What is your question?

Hello,

I am encountering an issue with globally overriding all instances of StringField in a form. While I can successfully override a specific field using ui:field in the uiSchema, attempting to apply a similar override globally across all string fields in the form does not yield the same result.

Issue Description:

When using ui:field in uiSchema to override a specific string field (e.g., api_version), the entire field including its label is replaced by the custom component. However, when trying to globally override all string fields by passing a custom component to the fields prop, only the input widget is replaced, but the label remains rendered by RJSF's default field template.

Reproduction Link:

I have created a CodeSandbox example to demonstrate this issue: https://codesandbox.io/p/sandbox/strange-firefly-mn859g

In this example, please notice the following behaviors:

• The api_version field (overridden using ui:field) is completely replaced by the custom component, including its label.
• The config_type field (intended to be globally overridden by the fields prop) only has the input widget replaced, while the label is still rendered.

Expected Behavior:

I would like to globally override all instances of StringField in a similar manner to how ui:field works for individual fields, where both the input widget and the label are replaced by the custom component.

Questions:

1. Is this behavior (partial override using the fields prop) intentional, or might it be a bug?
2. If it is intentional, could you provide guidance on how to achieve a full override of all string fields (including labels) globally across the form?

Any insights or suggestions on this matter would be greatly appreciated.

[heath-freenome]

@codisfy If you look at the second example in the documentation for custom fields you will see how to do what you want.

[codisfy]

Thanks for your response.

Do you mean this example?

import { RegistryFieldsType, RegistryWidgetsType } from '@rjsf/utils';
import { FormProps } from '@rjsf/core';

const customFields: RegistryFieldsType = { StringField: CustomString };
const customWidgets: RegistryWidgetsType = { CheckboxWidget: CustomCheckbox };

function MyForm(props: FormProps) {
  return <Form fields={customFields} widgets={customWidgets} {...props} />;
}

The code sandbox that I supplied along with this question, has single field override as well as fields override(like shown in example above). The full override still has the label, the single field override works as expected. I wanted to have all of the string type fields to be without label.

Also created a video of the sandbox just in case it doesn't open as expected:

screencast_00015.webm