DOCSEARCHbyAlgolia
Submit Docs

React JSON Schema Form

website·Indexed 29 days ago

https://rjsf-team.github.io/react-jsonschema-form/docs/

A library for building forms in React based on JSON Schema. It supports various themes including Bootstrap, DaisyUI, Mantine, and PrimeReact, and provides tools for validation using @rjsf/validator-ajv8 and @rjsf/validator-ata. The documentation covers JSON Schema implementation (oneOf, anyOf, dependencies), custom templates, LayoutGridField for form layouts, and migration guides for versions 3.x through 6.x.

Tokens
117.3K
Snippets
609
Records
894
Agent score
73%

What's inside RJSF

  1. Overview of LayoutGridField in RJSF v6

    The LayoutGridField allows developers to define the visual placement and order of fields on a grid via the uiSchema, regardless of their order in the JSON schema. It supports custom row/column definitions, conditional logic for showing/hiding grid subsets, and the inclusion of custom render components. Note that because grid systems vary by theme, uiSchema configurations for LayoutGridField are typically theme-specific and may require experimentation to achieve the desired look across different themes.

  2. Overview of react-jsonschema-form (RJSF)

    react-jsonschema-form is a React component that automatically generates HTML forms based on a JSON Schema. It is designed for scenarios where forms need to be generated for data without prior knowledge of the specific data structure, relying instead on the provided schema. It supports customization of look and feel via uiSchema and other form props.

  3. Overview of react-jsonschema-form

    react-jsonschema-form (RJSF) is a React component that automatically generates HTML forms based on a JSON Schema. It is designed for cases where forms need to be generated dynamically from a schema without prior knowledge of the specific data structure. It provides customization capabilities via uiSchema and various form props to modify the look and feel beyond default themes.

  5. Compare Custom Fields, Templates, and Widgets in RJSF

    RJSF provides three primary ways to customize form rendering depending on whether you need to change behavior, layout, or just the input element:

    • Custom Fields: Overrides all behavior and layout. Use when you need complete control over the field's logic and rendering.
    • Custom Templates: Overrides only the layout (e.g., how labels, help text, and inputs are positioned) without changing the underlying behavior.
    • Custom Widgets: Overrides only the input box itself, leaving labels, help text, and validation layout intact.

  7. Generate ARIA description IDs with ariaDescribedByIds()

    The ariaDescribedByIds() function returns a space-separated string of element IDs that provide additional information about a field, suitable for use in an aria-describedby attribute.
    // Parameters:
// id: FieldPathId | string
// includeExamples: boolean (optional, default: false)
ariaDescribedByIds(id, true);

  8. Understand the uiSchema structure and shorthand syntax

    The uiSchema is an object that mirrors the tree structure of the JSON schema to define how fields should be rendered. Most properties can be defined using two equivalent syntaxes: a direct ui:[property] key or nested within a ui:options object.
    // These two are equivalent:
{
  "ui:title": "Title",
  "ui:classNames": "my-class"
}

{
  "ui:options": {
    "title": "Title",
    "classNames": "my-class"
  }
}

  9. Choose between Custom Fields, Templates, and Widgets in RJSF

    Depending on the level of customization needed for a form element, RJSF provides three different extension points: Custom Fields, Custom Templates, and Custom Widgets.

    • Custom Fields: Overrides all behavior and layout. Use when you need full control over the field's logic and rendering.
    • Custom Templates: Overrides only the layout (not the behavior). Use when you want to change how a field is wrapped or positioned without altering its functionality.
    • Custom Widgets: Overrides only the input box. Use when you want to change the input mechanism (e.g., a custom dropdown) but keep the standard labels, help text, and validation layout.

  10. Override the base SchemaField component

    You can override the SchemaField base React component to change the fundamental rendering behavior for all field types (including objects and arrays). This is done by passing a fields object with a SchemaField property to the Form component. This is a powerful feature that can override entire form behaviors.
    import { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';

const CustomSchemaField = function (props: FieldProps) {
  return (
    <div id='custom'>
      <p>Custom SchemaField implementation</p>
      <div>Props: {JSON.stringify(props)}</div>
    </div>
  );
};

const fields: RegistryFieldsType = {
  SchemaField: CustomSchemaField,
};

const schema: RJSFSchema = { type: 'string' };

render(<Form schema={schema} validator={validator} fields={fields} />, document.getElementById('app'));

  11. Understand the uiSchema structure and syntax

    The uiSchema is an object that mirrors the tree structure of the JSON schema to define how fields should be rendered. Most properties can be defined using two equivalent syntaxes: as a direct ui:[property] key or nested within a ui:options object.
    // These two structures are equivalent
{
  "ui:title": "Title",
  "ui:description": "Description",
  "ui:classNames": "my-class"
}

{
  "ui:options": {
    "title": "Title",
    "description": "Description",
    "classNames": "my-class"
  }
}

  12. Understand and use uiSchema for form rendering

    The uiSchema is an object literal that mirrors the tree structure of the JSON schema to define how fields should be rendered. Directives can be defined in two equivalent formats: as a direct property with a ui: prefix (e.g., "ui:title": "Value") or within a ui:options object (e.g., "ui:options": { "title": "Value" }).
    // These two structures are equivalent
{
  "ui:title": "Title",
  "ui:description": "Description"
}

{
  "ui:options": {
    "title": "Title",
    "description": "Description"
  }
}