rjsf-team/react-jsonschema-form v0.39.0

on GitHub

• Fix #284: Introduce a field template API. (#304)

Field template

To take control over the inner organization of each field (each form row), you can define a field template for your form.

A field template is basically a React stateless component being passed field-related props so you can structure your form row as you like:

function CustomFieldTemplate(props) {
  const {id, classNames, label, help, required, description, errors, children} = props;
  return (
    <div className={classNames}>
      <label htmlFor={id}>{label}{required ? "*" : null}</label>
      {description}
      {children}
      {errors}
      {help}
    </div>
  );
}

render((
  <Form schema={schema}
        FieldTemplate={CustomFieldTemplate} />,
), document.getElementById("app"));

The following props are passed to a custom field template component:

• id: The id of the field in the hierarchy. You can use it to render a label targetting the wrapped widget;
• classNames: A string containing the base bootstrap CSS classes merged with any custom ones defined in your uiSchema;
• label: The computed label for this field, as a string;
• description: A component instance rendering the field description, if any defined (this will use any custom DescriptionField defined);
• children: The field or widget component instance for this field row;
• errors: A component instance listing any encountered errors for this field;
• help: A component instance rendering any ui:help uiSchema directive defined;
• hidden: A boolean value stating if the field should be hidden;
• required: A boolean value stating if the field is required;
• readonly: A boolean value stating if the field is read-only;
• displayLabel: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI.

Note: you can only define a single field template for a form. If you need many, it's probably time to look for custom fields instead.