{"owner":"rjsf-team","repo":"react-jsonschema-form","hasSkills":true,"totalSkillsCount":122,"totalTokensCount":248398,"categories":["claude-rule","plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["CLAUDE.md","packages/antd/README.md","packages/chakra-ui/README.md","packages/core/README.md","packages/daisyui/README.md","packages/docs/README.md","packages/docs/docs/01-quickstart.md","packages/docs/docs/advanced-customization/custom-templates.md","packages/docs/docs/advanced-customization/custom-themes.md","packages/docs/docs/advanced-customization/custom-widgets-fields.md","packages/docs/docs/advanced-customization/internals.md","packages/docs/docs/advanced-customization/typescript.md","packages/docs/docs/api-reference/LayoutGridField.md","packages/docs/docs/api-reference/dynamic-ui-schema-examples.md","packages/docs/docs/api-reference/form-props.md","packages/docs/docs/api-reference/themes/antd/uiSchema.md","packages/docs/docs/api-reference/themes/chakra-ui/uiSchema.md","packages/docs/docs/api-reference/themes/mui/uiSchema.md","packages/docs/docs/api-reference/themes/primereact/uiSchema.md","packages/docs/docs/api-reference/themes/semantic-ui/uiSchema.md","packages/docs/docs/api-reference/uiSchema.md","packages/docs/docs/api-reference/utility-functions.md","packages/docs/docs/api-reference/validator-ajv8.md","packages/docs/docs/api-reference/validator-ata.md","packages/docs/docs/api-reference/validator-cfworker.md","packages/docs/docs/contributing.md","packages/docs/docs/json-schema/arrays.md","packages/docs/docs/json-schema/definitions.md","packages/docs/docs/json-schema/dependencies.md","packages/docs/docs/json-schema/objects.md","packages/docs/docs/json-schema/oneof.md","packages/docs/docs/json-schema/single.md","packages/docs/docs/migration-guides/v2.x upgrade guide.md","packages/docs/docs/migration-guides/v3.x upgrade guide.md","packages/docs/docs/migration-guides/v4.x upgrade guide.md","packages/docs/docs/migration-guides/v5.x upgrade guide.md","packages/docs/docs/migration-guides/v6.x upgrade guide.md","packages/docs/docs/usage/layout-grid.md","packages/docs/docs/usage/themes.md","packages/docs/docs/usage/validation.md","packages/docs/docs/usage/widgets.md","packages/docs/package.json","packages/docs/tsconfig.json","packages/docs/versioned_docs/version-3.2.1/00-quickstart.md","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-templates.md","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-themes.md","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-widgets-fields.md","packages/docs/versioned_docs/version-3.2.1/advanced-customization/internals.md","packages/docs/versioned_docs/version-3.2.1/api-reference/form-props.md","packages/docs/versioned_docs/version-3.2.1/api-reference/themes/semantic-ui/uiSchema.md","packages/docs/versioned_docs/version-3.2.1/api-reference/uiSchema.md","packages/docs/versioned_docs/version-3.2.1/usage/arrays.md","packages/docs/versioned_docs/version-3.2.1/usage/definitions.md","packages/docs/versioned_docs/version-3.2.1/usage/dependencies.md","packages/docs/versioned_docs/version-3.2.1/usage/objects.md","packages/docs/versioned_docs/version-3.2.1/usage/oneof.md","packages/docs/versioned_docs/version-3.2.1/usage/single.md","packages/docs/versioned_docs/version-3.2.1/usage/themes.md","packages/docs/versioned_docs/version-3.2.1/usage/validation.md","packages/docs/versioned_docs/version-3.2.1/usage/widgets.md","packages/docs/versioned_docs/version-4.2.3/00-quickstart.md","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-templates.md","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-themes.md","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-widgets-fields.md","packages/docs/versioned_docs/version-4.2.3/advanced-customization/internals.md","packages/docs/versioned_docs/version-4.2.3/advanced-customization/material-ui/customizing-material-ui.md","packages/docs/versioned_docs/version-4.2.3/api-reference/form-props.md","packages/docs/versioned_docs/version-4.2.3/api-reference/themes/chakra-ui/uiSchema.md","packages/docs/versioned_docs/version-4.2.3/api-reference/themes/semantic-ui/uiSchema.md","packages/docs/versioned_docs/version-4.2.3/api-reference/uiSchema.md","packages/docs/versioned_docs/version-4.2.3/usage/arrays.md","packages/docs/versioned_docs/version-4.2.3/usage/definitions.md","packages/docs/versioned_docs/version-4.2.3/usage/dependencies.md","packages/docs/versioned_docs/version-4.2.3/usage/objects.md","packages/docs/versioned_docs/version-4.2.3/usage/oneof.md","packages/docs/versioned_docs/version-4.2.3/usage/single.md","packages/docs/versioned_docs/version-4.2.3/usage/themes.md","packages/docs/versioned_docs/version-4.2.3/usage/validation.md","packages/docs/versioned_docs/version-4.2.3/usage/widgets.md","packages/docs/versioned_docs/version-5.24.10/01-quickstart.md","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-templates.md","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-themes.md","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-widgets-fields.md","packages/docs/versioned_docs/version-5.24.10/advanced-customization/internals.md","packages/docs/versioned_docs/version-5.24.10/advanced-customization/typescript.md","packages/docs/versioned_docs/version-5.24.10/api-reference/form-props.md","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/antd/uiSchema.md","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/chakra-ui/uiSchema.md","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/semantic-ui/uiSchema.md","packages/docs/versioned_docs/version-5.24.10/api-reference/uiSchema.md","packages/docs/versioned_docs/version-5.24.10/api-reference/utility-functions.md","packages/docs/versioned_docs/version-5.24.10/api-reference/validator-ajv8.md","packages/docs/versioned_docs/version-5.24.10/contributing.md","packages/docs/versioned_docs/version-5.24.10/json-schema/arrays.md","packages/docs/versioned_docs/version-5.24.10/json-schema/definitions.md","packages/docs/versioned_docs/version-5.24.10/json-schema/dependencies.md","packages/docs/versioned_docs/version-5.24.10/json-schema/objects.md","packages/docs/versioned_docs/version-5.24.10/json-schema/oneof.md","packages/docs/versioned_docs/version-5.24.10/json-schema/single.md","packages/docs/versioned_docs/version-5.24.10/migration-guides/v2.x upgrade guide.md","packages/docs/versioned_docs/version-5.24.10/migration-guides/v3.x upgrade guide.md","packages/docs/versioned_docs/version-5.24.10/migration-guides/v4.x upgrade guide.md","packages/docs/versioned_docs/version-5.24.10/migration-guides/v5.x upgrade guide.md","packages/docs/versioned_docs/version-5.24.10/usage/themes.md","packages/docs/versioned_docs/version-5.24.10/usage/validation.md","packages/docs/versioned_docs/version-5.24.10/usage/widgets.md","packages/docs/versioned_sidebars/version-3.2.1-sidebars.json","packages/docs/versioned_sidebars/version-4.2.3-sidebars.json","packages/docs/versioned_sidebars/version-5.24.10-sidebars.json","packages/docs/versions.json","packages/fluentui-rc/README.md","packages/mantine/README.md","packages/mui/README.md","packages/primereact/README.md","packages/react-bootstrap/README.md","packages/semantic-ui/README.md","packages/shadcn/README.md","packages/snapshot-tests/README.md","packages/utils/README.md","packages/validator-ajv8/README.md","packages/validator-ata/README.md","packages/validator-cfworker/README.md"],"skills":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages (parallel)\npnpm run build\n\n# Build all packages (sequential, use if parallel causes issues)\npnpm run build-serial\n\n# Run all tests\npnpm test\n\n# Lint (oxlint, type-aware)\npnpm run lint\n\n# Typecheck every package and its tests\npnpm run typecheck\n\n# Dead code / unused dependency check\npnpm run knip\n\n# Format check / format source files (oxfmt)\npnpm run cs-check\npnpm run cs-format\n\n# Format check / format every file in the repo, including configs and markdown\npnpm run format-check\npnpm run format\n\n# Run a single package's tests\ncd packages/core && pnpm test\n\n# Watch mode for a single package\ncd packages/core && pnpm run test:watch\n\n# Update snapshots\ncd packages/snapshot-tests && pnpm run test:update\n\n# Start the playground (interactive demo)\ncd packages/playground && pnpm start\n\n# Full sanity check (lint + knip + build + test)\npnpm run sanity-check\n```\n\nCI runs lint, knip, build, typecheck, and test in that order, so run those before pushing. Per-package `tsc` misses the test and playground projects; only the root `typecheck` covers them.\n\nIndividual package builds run `build:ts` (`tsc -b`, emits `lib/`) and then bundle `dist/` in three formats: `build:cjs` and `build:esm` via esbuild, `build:umd` via rollup.\n\n## Architecture\n\nThis is an **pnpm workspaces + Nx** monorepo. All packages live under `packages/` and are scoped as `@rjsf/*`.\n\n### Package roles\n\n| Package | Role |\n| ------------------------------------------------------------------- | ------------------------------------------------------------------------ |\n| `@rjsf/utils` | Shared types, 80+ utility functions, schema helpers. No UI dependencies. |\n| `@rjsf/core` | Core `Form` component, Bootstrap 3 as default theme, `withTheme()` HOC. |\n| `@rjsf/validator-ajv8` | AJV 8-based validator. Exported via `customizeValidator()`. |\n| `@rjsf/snapshot-tests` | Shared snapshot test suite consumed by all theme packages. |\n| Theme packages (`@rjsf/mui`, `@rjsf/antd`, `@rjsf/chakra-ui`, etc.) | UI-library-specific implementations of fields, widgets, and templates. |\n| `@rjsf/playground` | Vite app importing all themes, used for manual testing and demos. |\n| `@rjsf/docs` | Docusaurus documentation site. |\n\n### Registry pattern (the plugin system)\n\nThe `Registry` object is the core extension point passed to every field/widget/template:\n\n```typescript\nRegistry = {\n fields, // Map of field type → Field component\n widgets, // Map of widget name → Widget component\n templates, // Layout/structural templates\n rootSchema, // Root JSON Schema\n formContext, // Arbitrary context object threaded to all components\n schemaUtils, // Schema parsing & validation helpers\n translateString,\n globalFormOptions, // Form-level options available to every template, field, and widget\n globalUiOptions, // Optional; global ui:options applied to every field\n uiSchemaDefinitions, // Optional; uiSchema fragments keyed by $ref path, applied when that $ref resolves\n};\n```\n\nOverride fields/widgets/templates per-form via props, or globally via `withTheme()`.\n\n### Theme pattern\n\nEvery theme package follows the same structure:\n\n1. Imports `withTheme` from `@rjsf/core`\n2. Defines custom `Templates`, `Widgets`, and optionally `Fields`\n3. Calls `withTheme({ templates, widgets, fields })` to produce a themed `Form`\n4. Exports: `Form` (default), `Theme`, `Templates`, `Widgets`\n\n### Field → Widget → Template hierarchy\n\n- **Fields** handle schema-level logic (ObjectField, ArrayField, MultiSchemaField for oneOf/anyOf, etc.)\n- **Widgets** handle individual input rendering (TextWidget, SelectWidget, CheckboxWidget, etc.)\n- **Templates** control structural/layout rendering (FieldTemplate, ArrayFieldTemplate, ButtonTemplates, etc.)\n\nFields select which widget to render based on schema `type` and `ui:widget`. Templates wrap the output for consistent styling.\n\nWhen making a change to a widget or template, consider if the change should be generalized to all theme packages. If substantial logic is duplicated across themes, consider refactoring the logic to `@rjsf/utils` or `@rjsf/core`.\n\n### Form rendering flow\n\n1. Caller provides `schema`, `validator` (required), `formData`, and `uiSchema`\n2. `Form` creates `schemaUtils` from validator + schema\n3. Schema is recursively decomposed into fields → widgets → templates\n4. On change/blur: callbacks fire with updated `formData` and `errorSchema`\n5. On submit: full validation runs, then `onSubmit` fires (or `onError` if invalid)\n\n### Key `@rjsf/utils` exports to know\n\n- Schema helpers: `findSchemaDefinition`, `mergeSchemas`, `getSchemaType`, `createSchemaUtils`\n- Form data: `mergeDefaultsWithFormData`, `removeOptionalEmptyObjects`\n- Error handling: `toErrorSchema`, `toErrorList`\n- Enum helpers: `enumOptionsSelectValue`, `enumOptionsDeselectValue`\n- React hooks: `useDeepCompareMemo`, `useFileWidgetProps`, `useAltDateWidgetProps`\n\n## Code style\n\n- **TypeScript strict mode**, `esnext` target, `verbatimModuleSyntax` (type-only imports must be `import type`), relative imports include the `.ts`/`.tsx` extension\n- **oxfmt** (`.oxfmtrc.json`): single quotes, JSX single quotes, 120-char print width, sorted imports with React first\n- **oxlint** (`.oxlintrc.json`): the `airbnb-typescript` rule set translated to oxlint, plus `typescript`, `react`, `jsx-a11y`, and `import` plugins; enforces curly braces, no-console, React rules of hooks\n- **knip** (`knip.jsonc`): fails CI on unused files, exports, and dependencies\n- Pre-commit hook (Husky + lint-staged) runs `oxlint --fix` and `oxfmt` on staged files\n\n## Code comments\n\n- Default to no comments. Write self-documenting code — clear names and structure — as the primary means of explanation.\n- When a comment is warranted, explain the WHY (rationale, constraints, non-obvious tradeoffs), not the WHAT — well-named code already says what it does.\n- Don't leave \"before/after\" or diff-style commentary in code comments or in this file. That belongs in commit messages and PR descriptions, not in code that has to keep reading true after the change ships.\n\n## Changelog\n\n- When adding an entry to `CHANGELOG.md`, append it as the last bullet under the relevant package's heading (e.g. `## @rjsf/daisyui`) — after the existing bullets, not inserted above or among them.\n\n## Testing\n\n- Vitest, jsdom, Testing Library; shared config in `testing/vitest.base.mts`, extended per package\n- Tests resolve `@rjsf/*` imports to TypeScript source via the `@rjsf/source` export condition, so no build is needed before running them\n- `@rjsf/utils` and the validator packages enforce 100% coverage\n- Snapshot tests in `@rjsf/snapshot-tests` are shared across theme packages — run `test:update` there when changing core rendering\n- Node >=20 required; `.nvmrc` pins 24\n","packages/antd/README.md":"","packages/chakra-ui/README.md":"","packages/core/README.md":"","packages/daisyui/README.md":"","packages/docs/README.md":"","packages/docs/docs/01-quickstart.md":"# Quickstart\n\nLet's walk through setup of a form after installing the dependency properly.\nNOTE: As of version 5, the `Form` now requires you to provide a `validator` implementation. We recommend the one from `@rjsf/validator-ajv8`.\n\n## Form schema\n\nFirst, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nrender(
, document.getElementById('app'));\n```\n\nYou can also render an object with multiple fields with the below schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nFor more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](json-schema/single.md).\n\n## Form uiSchema\n\nThe uiSchema is used to add more customization to the form's look and feel. Use the `classNames`\nattribute of the uiSchema to add a custom CSS class name to the form:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:classNames': 'custom-css-class',\n};\n\nrender(, document.getElementById('app'));\n```\n\nTo customize object fields in the uiSchema, the structure of the\nuiSchema should be `{key: value}`, where `key` is the property key and `value` is an\nobject with the uiSchema configuration for that particular property. For example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n name: {\n 'ui:classNames': 'custom-class-name',\n },\n age: {\n 'ui:classNames': 'custom-class-age',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n title: {\n type: 'string',\n },\n done: {\n type: 'boolean',\n },\n },\n};\n\nconst formData = {\n title: 'First task',\n done: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If your form has a single field, pass a single value to `formData`. ex: `formData=\"Charlie\"`\n\n> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\nYou can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `` component; see the [Form Props Reference](./api-reference/form-props.md) for more details.\n\n### Controlled component\n\nBy default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the\n`onChange` and `formData` props as in the below example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst App = () => {\n const [formData, setFormData] = React.useState(null);\n return (\n setFormData(e.formData)}\n validator={validator}\n />\n );\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/advanced-customization/custom-templates.md":"# Custom Templates\n\nThis is an advanced feature that lets you customize even more aspects of the form:\n\n| | Custom Field | Custom Template | Custom Widget |\n| --------------------- | ----------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| **What it does** | Overrides all behaviour | Overrides just the layout (not behaviour) | Overrides just the input box (not layout, labels, or help, or validation) |\n| **Usage** | Global or per-field | Global or per-field | Global or per-field |\n| **Global Example** | `` | `` | `` |\n| **Per-Field Example** | `\"ui:field\": MyCustomField` | `\"ui:ArrayFieldTemplate\": MyArrayTemplate` | `\"ui:widget\":MyCustomWidget` |\n| **Documentation** | [Custom Fields](custom-widgets-fields.md) | See documentation below | [Custom Widgets](custom-widgets-fields.md) |\n\nIn version 5, all existing `templates` were consolidated into a new `TemplatesType` interface that is provided as part of the `Registry`.\nThey can also be overloaded globally on the `Form` via the `templates` prop as well as globally or per-field through the `uiSchema`.\nFurther, many new templates were added or repurposed from existing `widgets` and `fields` in an effort to simplify the effort needed by theme authors to build new and/or maintain current themes.\nThese new templates can also be overridden by individual users to customize the specific needs of their application.\nA special category of templates, `ButtonTemplates`, were also added to support the easy replacement of the `Submit` button on the form, the `Add` and `Remove` buttons associated with `additionalProperties` and `patternProperties` on objects and elements of arrays, as well as the `Move up` and `Move down` buttons used for reordering arrays.\nThis category, unlike the others, can only be overridden globally via the `templates` prop on `Form`.\n\nBelow is the table that lists all the `templates`, their props interface, their `uiSchema` name and from where they originated in the previous version of RJSF:\n\n| Template | Props Type | UiSchema name | Origin |\n| --------------------------------------------------------------- | ---------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [ArrayFieldTemplate](#arrayfieldtemplate) | ArrayFieldTemplateProps | ui:ArrayFieldTemplate | Formerly `Form.ArrayFieldTemplate` or `Registry.ArrayFieldTemplate` |\n| [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate) | ArrayFieldDescriptionProps | ui:ArrayFieldDescriptionTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemTemplate](#arrayfielditemtemplate) | ArrayFieldItemTemplateProps | ui:ArrayFieldItemTemplate | Formerly an internal class for `ArrayFieldTemplate`s in all themes, refactored as a template in each theme, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemButtonsTemplate](#arrayfielditembuttonstemplate) | ArrayFieldItemButtonsTemplateProps | ui:ArrayFieldItemButonsTemplate | Formerly an internal class for `ArrayFieldItemTemplate`s in all themes, refactored as a template in the `core`, used in all `ArrayFieldItemTemplate` implementations |\n| [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) | ArrayFieldTitleProps | ui:ArrayFieldTitleTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations. |\n| [BaseInputTemplate](#baseinputtemplate) | WidgetProps | ui:BaseInputTemplate | Formerly a `widget` in `@rjsf.core` moved to `templates` and newly implemented in each theme to maximize code reuse. |\n| [CyclicSchemaExpandTemplate](#cyclicschemaexpandtemplate) | CyclicSchemaExpandProps | ui:CyclicSchemaExpandTemplate | Added in RJSF v6 to support circular `$ref` cycle detection |\n| [DescriptionFieldTemplate](#descriptionfieldtemplate) | DescriptionFieldProps | ui:DescriptionFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [ErrorListTemplate](#errorlisttemplate) | ErrorListProps | ui:ErrorListTemplate | Formerly `Form.ErrorList` moved to `templates` with the `Templates` suffix. Previously implemented in each theme. |\n| [FallbackFieldTemplate](#fallbackfieldtemplate) | FallbackFieldTemplateProps | ui:FallbackFieldTemplate | Added in RJSF v6 |\n| [FieldErrorTemplate](#fielderrortemplate) | FieldErrorProps | ui:FieldErrorTemplate | Formerly internal `ErrorList` component accessible only to `SchemaField` |\n| [FieldHelpTemplate](#fieldhelptemplate) | FieldHelpProps | ui:FieldHelpTemplate | Formerly internal `Help` component accessible only to `SchemaField` |\n| [FieldTemplate](#fieldtemplate) | FieldTemplateProps | ui:FieldTemplate | Formerly `Form.FieldTemplate` or `Registry.FieldTemplate` |\n| [GridTemplate](#gridtemplate) | GridTemplateProps | ui:GridTemplate | Theme dependent implementations of a Grid element for either rows or columns |\n| [MultiSchemaFieldTemplate](#multischemafieldtemplate) | MultiSchemaFieldTemplateProps | ui:MultiSchemaFieldTemplate | Formerly part of `@rjsf/core `MultiSchemaField`, refactored as a template |\n| [ObjectFieldTemplate](#objectfieldtemplate) | ObjectFieldTemplateProps | ui:ObjectFieldTemplate | Formerly `Form.ObjectFieldTemplate` or `Registry.ObjectFieldTemplate` |\n| [OptionalDataControlsTemplate](#optionaldatacontrolstemplate) | OptionalDataControlsTemplateProps | ui:OptionalDataControlsTemplate | New feature in V6 |\n| [TitleFieldTemplate](#titlefieldtemplate) | TitleFieldProps | ui:TitleFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [UnsupportedFieldTemplate](#unsupportedfieldtemplate) | UnsupportedFieldProps | ui:UnsupportedFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. |\n| [WrapIfAdditionalTemplate](#wrapifadditionaltemplate) | WrapIfAdditionalTemplateProps | ui:WrapIfAdditionalTemplate | Formerly an internal component in `@rjsf.core`. Previously implemented in most themes. |\n| [ButtonTemplates.AddButton](#addbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveDownButton](#movedownbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveUpButton](#moveupbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.RemoveButton](#removebutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.SubmitButton](#submitbutton) | SubmitButtonProps | n/a | Formerly a `field` in each theme move to `templates.ButtonTemplates` |\n\n## ArrayFieldTemplate\n\nYou can use an `ArrayFieldTemplate` to customize how your arrays are rendered.\nThis allows you to customize your array, and each element in the array.\nIf you only want to customize how the array's title, description or how the array items are presented, you may want to consider providing your own [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate), [ArrayFieldItemTemplate](#arrayfielditemtemplate) and/or [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) instead.\nYou can also customize arrays by specifying a widget in the relevant `ui:widget` schema, more details over on [Custom Widgets](../json-schema/arrays.md#custom-widgets).\n\n```tsx\nimport { ArrayFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldTemplate from './ArrayFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': ArrayFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': 'CustomArrayFieldTemplate',\n};\n```\n\nPlease see the [customArray.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customArray.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for another example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `fieldPathId`: An object containing the id for this object & ids for its properties.\n- `items`: An array of React nodes representing the items in the array.\n- `onAddClick: (event?) => void`: A function that adds a new item to the end of the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formData`: The formData for this array.\n- `errorSchema`: The optional validation errors for the array field and the items within it, in the form of an `ErrorSchema`\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget\n- `registry`: The `registry` object.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.\n\n## ArrayFieldDescriptionTemplate\n\nThe out-of-the-box version of this template will render the `DescriptionFieldTemplate` with a generated id, if there is a `description` otherwise nothing is rendered.\nIf you want different behavior for the rendering of the description of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL descriptions in the `Form`, see [DescriptionFieldTemplate](#descriptionfieldtemplate)\n\n```tsx\nimport { ArrayFieldDescriptionProps, RJSFSchema, descriptionId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldDescriptionTemplate(props: ArrayFieldDescriptionProps) {\n const { description, fieldPathId } = props;\n const id = descriptionId(fieldPathId);\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldDescriptionTemplate`:\n\n- `description`: The description of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `registry`: The `registry` object.\n\n## ArrayFieldItemTemplate\n\nThe `ArrayFieldItemTemplate` is used to render the representation of a single item in an array.\nAll of the `ArrayFieldTemplate` implementations in all themes get this template from the `registry` in order to render array fields items.\nEach theme has an implementation of the `ArrayFieldItemTemplate` to render an array field item in a manner best suited to the theme.\nIf you want to change how an array field item is rendered you can customize this template (for instance to remove the buttons rendered by `ArrayFieldItemButtonsTemplate`).\n\n```tsx\nimport { ArrayFieldItemTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {\n const { children, className } = props;\n return
{children}
;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemTemplate`:\n\n- `children`: The html for the item's content.\n- `buttonsProps`: The props to pass to the `ArrayFieldItemButtonTemplate`.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `itemKey`: A stable, unique key for the array item.\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n- `parentUiSchema`: The UI schema of the array item's parent array field, used for customization in some themes\n\n## ArrayFieldItemButtonTemplate\n\nThe `ArrayFieldItemButtonTemplate` is used to render the representation of the buttons used for copying, moving and deleting an item in an array.\nAll of the `ArrayFieldItemTemplate` implementations in all themes get this template from the `registry` in order to render array fields items' buttons.\nCurrently, only the `core` them has an implementation of this template as the button rendering is identical across all themes.\nIf you want to change how an array field item's buttons are rendered you can customize this template (for instance to remove the move up/down and remove buttons).\n\n```tsx\nimport { useMemo } from 'react';\nimport { ArrayFieldTemplateItemButtonsType, buttonId, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemButtonsTemplate(props: ArrayFieldTemplateItemButtonsType) {\n const { disabled, readonly, hasCopy, fieldPathId, index, onCopyIndexClick, registry, uiSchema } = props;\n const { CopyButton } = registry.templates.ButtonTemplates;\n const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);\n if (!hasCopy) {\n return undefined;\n }\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemButtonsTemplate`:\n\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `hasCopy`: A boolean value stating whether the array item can be copied.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `onAddItem: event?) => void`: Callback function that adds a new item below this item.\n- `onCopyItem: (event?) => void`: Callback function that copies this item below itself.\n- `onRemoveItem: (event?) => void`: Callback function that removes the item from the list.\n- `onMoveUpItem: (event?) => void`: Callback function that moves the item up one spot in the list\n- `onMoveDownItem: (event?) => void`: Callback function that moves the item down one spot in the list\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `style`: The optional style to pass to all of the buttons\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n\n## ArrayFieldTitleTemplate\n\nThe out-of-the-box version of this template will render the `TitleFieldTemplate` with a generated id, if there is a `title` otherwise nothing is rendered.\nIf you want a different behavior for the rendering of the title of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL titles in the `Form`, see [TitleFieldTemplate](#titlefieldtemplate)\n\n```tsx\nimport { ArrayFieldTitleTemplateProps, RJSFSchema, titleId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTitleTemplate(props: ArrayFieldTitleProps) {\n const { title, fieldPathId } = props;\n const id = titleId(fieldPathId);\n return

{title}

;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldTitleTemplate`:\n\n- `title`: The title of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `required`: A boolean value stating if the field is required\n- `registry`: The `registry` object.\n\n## BaseInputTemplate\n\nThe `BaseInputTemplate` is the template to use to render the basic `` component for a theme.\nIt is used as the template for rendering many of the `` based widgets that differ by `type` and callbacks only.\nFor example, the `TextWidget` implementation in `core` is simply a wrapper around `BaseInputTemplate` that it gets from the `registry`.\nAdditionally, each theme implements its own version of `BaseInputTemplate` without needing to provide a different implementation of `TextWidget`.\n\nIf you desire a different implementation for the `` based widgets, you can customize this template.\nFor instance, say you have a `CustomTextInput` component that you want to integrate:\n\n```tsx\nimport { ChangeEvent, FocusEvent } from 'react';\nimport { getInputProps, RJSFSchema, BaseInputTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nimport CustomTextInput from '../CustomTextInput';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction BaseInputTemplate(props: BaseInputTemplateProps) {\n const {\n schema,\n id,\n options,\n label,\n value,\n type,\n placeholder,\n required,\n disabled,\n readonly,\n autofocus,\n onChange,\n onChangeOverride,\n onBlur,\n onFocus,\n rawErrors,\n hideError,\n uiSchema,\n registry,\n ...rest\n } = props;\n const onTextChange = ({ target: { value: val } }: ChangeEvent) => {\n // Use the options.emptyValue if it is specified and newVal is also an empty string\n onChange(val === '' ? options.emptyValue || '' : val);\n };\n const onTextBlur = ({ target: { value: val } }: FocusEvent) => onBlur(id, val);\n const onTextFocus = ({ target: { value: val } }: FocusEvent) => onFocus(id, val);\n\n const inputProps = { ...rest, ...getInputProps(schema, type, options) };\n const hasError = rawErrors.length > 0 && !hideError;\n\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### Wrapping BaseInputTemplate to customize it\n\nSometimes you just need to pass some additional properties to the existing `BaseInputTemplate`.\nThe way to do this varies based upon whether you are using `core` or some other theme (such as `mui`):\n\n```tsx\nimport { BaseInputTemplateProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Templates } from '@rjsf/mui';\n\nconst {\n templates: { BaseInputTemplate },\n} = getDefaultRegistry(); // To get templates from core\n// const { BaseInputTemplate } = Templates; // To get templates from a theme do this\n\nfunction MyBaseInputTemplate(props: BaseInputTemplateProps) {\n const customProps = {};\n // get your custom props from where you need to\n return ;\n}\n```\n\nThe following props are passed to the `BaseInputTemplate`:\n\n- `id`: The generated id for this widget;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `hideError`: A boolean value stating if the widget is hiding its errors.\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onChangeOverride`: A `BaseInputTemplate` implements a default `onChange` handler that it passes to the HTML input component to handle the `ChangeEvent`. Sometimes a widget may need to handle the `ChangeEvent` using custom logic. If that is the case, that widget should provide its own handler via this prop;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties` and `patternProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](./custom-widgets-fields.md#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: The `registry` object\n\n## CyclicSchemaExpandTemplate\n\nThe `CyclicSchemaExpandTemplate` is the template rendered by `CyclicSchemaField` when a circular `$ref` cycle is detected in the schema.\nRJSF automatically detects when a `$ref` would recurse indefinitely (e.g. a schema whose property references its own root) and stops rendering at the cycle boundary.\nAt that point `CyclicSchemaField` renders this template, which shows a warning message and an expand button that the user can click to render one additional level of the recursive structure.\n\nEach theme provides its own implementation.\nYou can replace the template globally via the `templates` prop on `Form`, or per-field via `ui:CyclicSchemaExpandTemplate` in the `uiSchema`.\n\n```tsx\nimport { CyclicSchemaExpandProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// A schema that is self-referencing\nconst schema: RJSFSchema = {\n $schema: 'http://json-schema.org/draft-07/schema#',\n type: 'object',\n title: 'Node',\n properties: {\n value: { type: 'string' },\n child: { $ref: '#' },\n },\n};\n\nfunction CyclicSchemaExpandTemplate(props: CyclicSchemaExpandProps) {\n const { name, fieldPathId, onExpand } = props;\n const buttonId = `${fieldPathId.$id}-button`;\n return (\n
\n Circular reference detected for field "{name}"\n \n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also provide a per-field template via `uiSchema`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': CyclicSchemaExpandTemplate,\n};\n```\n\nor a string value from the `Registry`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': 'CustomCyclicSchemaExpandTemplate',\n};\n```\n\nThe following props are passed to the `CyclicSchemaExpandTemplate` as defined by `CyclicSchemaExpandProps` in `@rjsf/utils`:\n\n- `name`: The unique name of the field at the cycle boundary, usually the property name within its parent object.\n- `fieldPathId`: The `FieldPathId` of the field in the hierarchy; use `fieldPathId.$id` to get the HTML id string.\n- `onExpand`: Callback to call when the user wants to render one additional level; receives the field's id string.\n- `schema`: The schema object for the field at the cycle boundary.\n- `uiSchema`: The uiSchema object for this field.\n- `registry`: The `registry` object.\n\n## DescriptionFieldTemplate\n\nEach theme implements a `DescriptionFieldTemplate` used to render the description of a field.\nIf you want to customize how descriptions are rendered you can.\n\n```tsx\nimport { DescriptionFieldProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction DescriptionFieldTemplate(props: DescriptionFieldProps) {\n const { description, id } = props;\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `DescriptionFieldTemplate`:\n\n- `description`: The description of the field being rendered.\n- `id`: The id of the field in the hierarchy.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ErrorListTemplate\n\nThe `ErrorListTemplate` is the template that renders the all the errors associated with the fields in the `Form`, at the top.\nEach theme implements a `ErrorListTemplate` used to render its errors using components for the theme's toolkit.\nIf you want to customize how all the errors are rendered you can.\n\n```tsx\nimport { ErrorListProps, RJSFValidationError, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction ErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: RJSFValidationError, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `ErrorListTemplate`:\n\n- `schema`: The schema that was passed to `Form`\n- `uiSchema`: The uiSchema that was passed to `Form`\n- `errors`: An array of all errors in this `Form`.\n- `errorSchema`: The `ErrorSchema` constructed by `Form`\n\n## FallbackFieldTemplate\n\nThe `FallbackFieldTemplate` is the template that renders opt-in fallback UI to control fields of unknown or unhandled types. Usage of this feature is controlled by the [`useFallbackUiForUnsupportedType` Form prop](../api-reference/form-props.md#usefallbackuiforunsupportedtype).\n\n```tsx\nimport { FallbackFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'unknownType',\n title: 'My input',\n};\n\nfunction FallbackFieldTemplate(props: FallbackFieldTemplateProps) {\n const { typeSelector, schemaField } = props;\n return (\n
\n
{typeSelector}
\n
{schemaField}
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FallbackFieldTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `registry`: The `Registry` object\n 1\n\n## FieldErrorTemplate\n\nThe `FieldErrorTemplate` is the template that renders all the errors associated a single field.\nIf you want to customize how the errors are rendered you can.\n\n```tsx\nimport { FieldErrorProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldErrorTemplate(props: FieldErrorProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: string, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldErrorTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errors`: An array of all errors for this field\n- `errorSchema`: The `ErrorSchema` for this field\n- `registry`: The `Registry` object\n\n## FieldHelpTemplate\n\nThe `FieldHelpTemplate` is the template that renders the help associated a single field.\nIf you want to customize how the help is rendered you can.\n\n```tsx\nimport { FieldHelpProps, RJSFSchema, helpId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldHelpTemplate(props: FieldHelpProps) {\n const { help, fieldPathId } = props;\n const id = helpId(fieldPathId);\n return ;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldHelpTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `help`: The help information to be rendered\n- `registry`: The `Registry` object\n\n## FieldTemplate\n\nTo take control over the inner organization of each field (each form row), you can define a _field template_ for your form.\n\nA field template is basically a React stateless component being passed field-related props, allowing you to structure your form row as you like.\n\n```tsx\nimport { FieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction CustomFieldTemplate(props: FieldTemplateProps) {\n const { id, classNames, style, label, help, required, description, errors, children } = props;\n return (\n
\n \n {description}\n {children}\n {errors}\n {help}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CustomFieldTemplate from './CustomFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': CustomFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': 'CustomFieldTemplate',\n};\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](../api-reference/uiSchema.md#classnames) defined in your uiSchema.\n- `style`: An object containing the `StyleHTMLAttributes` defined in the `uiSchema`.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionFieldTemplate`](#descriptionfieldtemplate) defined in the `templates` passed to the `Form`).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `hideError`: A boolean value stating if the field is hiding its errors\n- `disabled`: A boolean value stating if the field is disabled.\n- `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.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `onChange`: The value change event handler; Can be called with a new value to change the value for this field.\n- `formData`: The formData for this field.\n- `registry`: The `registry` object.\n\n> Note: you can only define a single global field template for a form, but you can set individual field templates per property using `\"ui:FieldTemplate\"`.\n\n## GridTemplate\n\nThe `GridTemplate` is the template that renders a theme dependent Grid for either a row or column.\nWhile it has only two explicit properties, it extends the `GenericObjectTemplate` in order to support passing any of the properties associated with a Grid implementation for any theme.\nIf you want to customize how grids are rendered you can.\n\n```tsx\nimport { Grid2 } from '@mui/material';\nimport { GridTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\nimport classNames from 'classnames';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction GridTemplate(props: FieldHelpProps) {\n const { children, column, className, ...rest } = props;\n return (\n \n {children}\n \n );\n}\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to the `GridTemplate`:\n\n- `children`: The contents of the grid template\n- `column`: Optional flag indicating whether the grid element represents a column, necessary for themes which have components for Rows vs Column\n\n## MultiSchemaFieldTemplate\n\nEach theme implements a `MultiSchemaFieldTemplate` used to render the layout of a MultiSchemaField, i.e. a field described by a `oneOf` or `anyOf` schema.\nThe template typically renders a Widget used to select the schema to use, as well as a field for the selected schema.\n\n```tsx\nimport { MultiSchemaFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n myField: {\n oneOf: [\n {\n type: 'string',\n title: 'String Field',\n description: 'A field that accepts a string',\n },\n {\n type: 'number',\n title: 'Number Field',\n description: 'A field that accepts a number',\n },\n ],\n },\n },\n};\n\nfunction MultiSchemaFieldTemplate(props: MultiSchemaFieldTemplateProps) {\n const { selector, optionSchemaField } = props;\n return (\n
\n {selector}\n
\n {optionSchemaField}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `MultiSchemaFieldTemplate`:\n\n- `selector`: The rendered Widget used to select a multischema option.\n- `optionSchemaField`: The rendered SchemaField representing the selected option.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ObjectFieldTemplate\n\n```tsx\nimport { ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n title: 'Object title',\n description: 'Object description',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nfunction ObjectFieldTemplate(props: ObjectFieldTemplateProps) {\n return (\n
\n {props.title}\n {props.description}\n {props.properties.map((element) => (\n
{element.content}
\n ))}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ObjectFieldTemplate from './ObjectFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': ObjectFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': 'ObjectFieldTemplate',\n};\n```\n\nPlease see the [customObject.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customObject.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate` as defined by the `ObjectFieldTemplateProps` in `@rjsf/utils`:\n\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `disabled`: A boolean value stating if the object is disabled.\n- `properties`: An array of object representing the properties in the object. Each of the properties represent a child with properties described below.\n- `onAddProperty: () => void`: Callback to use in order to add an new additionalProperty to the object field (to be used with additionalProperties and patternProperties)\n- `readonly`: A boolean value stating if the object is read-only.\n- `required`: A boolean value stating if the object is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errorSchema`: The optional validation errors in the form of an `ErrorSchema`\n- `formData`: The form data for the object.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n- `hidden`: A boolean value stating if the property should be hidden.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.\n\n## OptionalDataControlsTemplate\n\nEach theme implements a `OptionalDataControlsTemplate` used to render the `Optional Data Controls` when that feature has been enabled\n\n```tsx\nimport { OptionalDataControlsTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nfunction OptionalDataControlsTemplate(props: OptionalDataControlsTemplateProps) {\n const { id, registry, label, onAddClick, onRemoveClick } = props;\n if (onAddClick) {\n return (\n \n );\n } else if (onRemoveClick) {\n return (\n \n );\n }\n return {label};\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `OptionalDataControlsTemplate` as defined by the `OptionalDataControlsTemplateProps` in `@rjsf/utils`:\n\n- `id`: The generated id for this Optional Data Control instance.\n- `label`: The label to use for the Optional Data Control\n- `onAddClick`: Optional callback to call when clicking on the Optional Data Control to add data\n- `onRemoveClick`: Optional callback to call when clicking on the Optional Data Control to remove data\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `registry`: The `registry` object.\n\n## TitleFieldTemplate\n\nEach theme implements a `TitleFieldTemplate` used to render the title of a fie\n\n","packages/docs/docs/advanced-customization/custom-themes.md":"# Custom Themes\n\nThe `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component.\nThis theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.\n\n## Usage\n\n```tsx\nimport React, { Component } from 'react';\nimport validator from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\nconst theme: ThemeProps = { widgets: { test: () =>
test
} };\n\nconst ThemedForm = withTheme(theme);\n\nconst Demo = () => ;\n```\n\n## Theme object properties\n\nThe Theme object consists of the same properties as the rjsf `Form` component (such as **widgets**, **fields** and **templates**).\nThe themed-Form component merges together any theme-specific **widgets**, **fields** and **templates** with the default **widgets**, **fields** and **templates**.\nFor instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name.\nThus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`.\nNote that you are not required to pass in either custom **widgets**, **fields** or **templates** when using the custom-themed HOC component;\nyou can essentially redefine the default Form by simply doing `const Form = withTheme({});`.\n\n### Widgets and fields\n\n**widgets** and **fields** should be in the same format as shown [here](./custom-widgets-fields.md).\n\nExample theme with custom widget:\n\n```tsx\nimport { WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst myWidgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst ThemeObject: ThemeProps = { widgets: myWidgets };\nexport default ThemeObject;\n```\n\nThe above can be similarly done for **fields** and **templates**.\n\n### Templates\n\nEach template should be passed into the theme object via the **templates** object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](./custom-templates.md#arrayfieldtemplate) and [ErrorListTemplate](./custom-templates.md#errorlisttemplate) in the theme object:\n\n```tsx\nimport { ArrayFieldTemplateProps, ErrorListProps } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nfunction MyArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nfunction MyErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
    \n {errors.map((error) => (\n
  • {error.stack}
    • \n ))}\n
\n );\n}\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n ErrorListTemplate: MyErrorListTemplate,\n },\n widgets: myWidgets,\n};\n\nexport default ThemeObject;\n```\n\n## Overriding other Form props\n\nJust as the theme can override **widgets**, **fields**, any of the **templates**, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.\n\n```tsx\nimport { ThemeProps } from '@rjsf/core';\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n },\n fields: myFields,\n showErrorList: false,\n widgets: myWidgets,\n};\n```\n\nThus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).\n","packages/docs/docs/advanced-customization/custom-widgets-fields.md":"# Custom Widgets and Fields\n\nThe API allows to specify your own custom _widget_ and _field_ components:\n\n- A _widget_ represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A _field_ usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n## Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `BooleanField`\nrenders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the\n`fields` and `widgets` props:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n default: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkbox',\n};\n\nconst CustomCheckbox = function (props: WidgetProps) {\n return (\n \n );\n};\n\nconst widgets: RegistryWidgetsType = {\n CheckboxWidget: CustomCheckbox,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```tsx\nimport { RegistryFieldsType, RegistryWidgetsType } from '@rjsf/utils';\nimport { FormProps } from '@rjsf/core';\n\nconst customFields: RegistryFieldsType = { StringField: CustomString };\nconst customWidgets: RegistryWidgetsType = { CheckboxWidget: CustomCheckbox };\n\nfunction MyForm(props: FormProps) {\n return ;\n}\n```\n\nThe default fields you can override are:\n\n- `ArrayField`\n- `ArraySchemaField`\n- `BooleanField`\n- `DescriptionField`\n- `OneOfField`\n- `AnyOfField`\n- `LayoutGridField`\n- `LayoutMultiSchemaField`\n- `LayoutHeaderField`\n- `NullField`\n- `NumberField`\n- `ObjectField`\n- `SchemaField`\n- `StringField`\n- `TitleField`\n- `UnsupportedField`\n- `FallbackField`\n- `CyclicSchemaField`\n\nThe default widgets you can override are:\n\n- `AltDateTimeWidget`\n- `AltDateWidget`\n- `CheckboxesWidget`\n- `CheckboxWidget`\n- `ColorWidget`\n- `DateTimeWidget`\n- `DateWidget`\n- `EmailWidget`\n- `FileWidget`\n- `HiddenWidget`\n- `PasswordWidget`\n- `RadioWidget`\n- `RangeWidget`\n- `SelectWidget`\n- `TextareaWidget`\n- `TextWidget`\n- `TimeWidget`\n- `UpDownWidget`\n- `URLWidget`\n\n## Raising errors from within a custom widget or field\n\nYou can raise custom 'live validation' errors by overriding the `onChange` method to provide feedback while users are actively changing the form data.\nIf you do set errors this way, you must also clear them this way by passing `undefined` to the `onChange()` for the `errorSchema` parameter.\n\n:::warning\n\nWhile these errors are retained during validation, it is still preferred for you to use the [`customValidate` Form prop](../api-reference/form-props.md#customvalidate) mechanism instead.\n\n:::\n\n```tsx\nimport { ErrorSchema, RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'text',\n default: 'hello',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'text',\n};\n\nconst CustomTextWidget = function (props: WidgetProps) {\n const { id, value } = props;\n const raiseErrorOnChange = ({ target: { value } }: ChangeEvent) => {\n let raiseError: ErrorSchema | undefined;\n if (value !== 'test') {\n raiseError = {\n __errors: ['Value must be \"test\"'],\n };\n }\n props.onChange(value, [], raiseError, id);\n };\n\n return ;\n};\n\nconst widgets: RegistryWidgetsType = {\n TextWidget: CustomTextWidget,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis creates a custom text widget that raises an error if the input value does not match 'test'.\n\n## Adding your own custom widgets\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `array`\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: Schema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this widget, used to provide unique `name`s and `id`s for the HTML field elements rendered by widgets;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema; Provided in support of custom widgets;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `hideLabel`: A boolean value, if true, will cause the label to be hidden. This is useful for nested fields where you don't want to clutter the UI. Customized via `label` in the `UiSchema`;\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: A [registry](#the-registry-object) object (read next).\n\n### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst widgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'myCustomWidget',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction MyCustomWidget(props: WidgetProps) {\n const { options } = props;\n const { color, backgroundColor } = options;\n return ;\n}\n\nMyCustomWidget.defaultProps = {\n options: {\n color: 'red',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': MyCustomWidget,\n 'ui:options': {\n backgroundColor: 'yellow',\n },\n};\n\n// renders red on yellow input\nrender(, document.getElementById('app'));\n```\n\n> Note: This also applies to [registered custom components](#custom-component-registration).\n\n### Customizing widgets' text input\n\nAll the widgets that render a text input use the `BaseInputTemplate` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInputTemplate` component in the `templates` property of `Form` (see [Custom Templates](./custom-templates.md#baseinputtemplate)).\n\n### Wrapping an existing widget to customize it\n\nSometimes you just need to customize the properties that are passed to an existing widget.\nThe way to do this varies based upon whether you are using core or some other theme (such as mui).\n\nHere is an example of modifying the `SelectWidget` to change the ordering of `enumOptions`:\n\n```tsx\nimport { WidgetProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Widgets } from '@rjsf/mui';\n\nimport myOptionsOrderFunction from './myOptionsOrderFunction';\n\nconst {\n widgets: { SelectWidget },\n} = getDefaultRegistry(); // To get widgets from core\n// const { SelectWidget } = Widgets; // To get widgets from a theme do this\n\nfunction MySelectWidget(props: WidgetProps) {\n const { options } = props;\n let { enumOptions } = options;\n // Reorder the `enumOptions` however you want\n enumOptions = myOptionsOrderFunction(enumOptions);\n return ;\n}\n```\n\n## Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a _latitude_ and a _longitude_:\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n required: ['lat', 'lon'],\n properties: {\n lat: { type: 'number' },\n lon: { type: 'number' },\n },\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n constructor(props: FieldProps) {\n super(props);\n this.state = { ...props.formData };\n }\n\n onChange(name) {\n return (event) => {\n this.setState(\n {\n [name]: parseFloat(event.target.value),\n },\n () => this.props.onChange(this.state),\n );\n };\n }\n\n render() {\n const { lat, lon } = this.state;\n return (\n
\n \n \n
\n );\n }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema: UiSchema = { 'ui:field': 'geo' };\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields: RegistryFieldsType = { geo: GeoPosition };\n\n// Render the form with all the properties we just defined passed\n// as props\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n> Note: Registered fields can be reused across the entire schema.\n\n### Field props\n\nA field component will always be passed the following props:\n\n- `schema`: The JSON subschema object for this field;\n- `uiSchema`: The [uiSchema](../api-reference/uiSchema.md) for this field;\n- `idSchema`: The FieldPathId of the field in the hierarchy\n- `formData`: The data for this field;\n- `errorSchema`: The tree of errors for this field and its children;\n- `registry`: A [registry](#the-registry-object) object (read next).\n- `required`: The required status of this field;\n- `disabled`: A boolean value stating if the field is disabled;\n- `readonly`: A boolean value stating if the field is read-only;\n- `autofocus`: A boolean value stating if the field should autofocus;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema\n- `rawErrors`: `An array of strings listing all generated error messages from encountered errors for this field\n- `onChange`: The field change event handler; called with the updated field value, the optional change path for the value (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed\n- `onBlur`: The input blur event handler; call it with the field id and value;\n- `onFocus`: The input focus event handler; call it with the field id and value;\n\n## The `registry` object\n\nThe `registry` is an object containing the registered core, theme and custom fields and widgets as well as the root schema, form context, schema utils.\n\n- `fields`: The set of all fields used by the `Form`. Includes fields from `core`, theme-specific fields and any [custom registered fields](#custom-field-components);\n- `widgets`: The set of all widgets used by the `Form`. Includes widgets from `core`, theme-specific widgets and any [custom registered widgets](#custom-component-registration), if any;\n- `templates`: The set of templates used by the `Form`. Includes templates from `core`, theme-specific templates and any custom registered templates\n- `rootSchema`: The root schema, as passed to the `Form`, which can contain referenced [definitions](../json-schema/definitions.md);\n- `schemaUtils`: The current implementation of the `SchemaUtilsType` (from `@rjsf/utils`) in use by the `Form`. Used to call any of the validation-schema-based utility functions.\n- `translateString`: The string translation function to use when displaying any of the RJSF strings in templates, fields or widgets\n- `globalFormOptions`: The global Form Options that are available for all templates, fields and widgets to access\n- `globalUiOptions`: The optional global UI Options that are available for all templates, fields and widgets to access\n\nThe registry is passed down the component tree, so you can access it from your custom field, custom widget, custom template and `SchemaField` components.\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSchemaField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n SchemaField: CustomSchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n\n### Custom ArraySchemaField\n\nEverything that was mentioned above for a `Custom SchemaField` applies, but this is only used to render the Array item `children` that are then passed to the `ArrayFieldItemTemplate`.\nBy default, `ArraySchemaField` is not actually implemented in the `fields` list since `ArrayField` falls back to `SchemaField` if `ArraySchemaField` is not provided.\nIf you want to customize how the individual items for an array are rendered, provide your implementation of `ArraySchemaField` as a `fields` override.\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomArraySchemaField = function (props: FieldProps) {\n const { index, registry } = props;\n const { SchemaField } = registry.fields;\n const name = `Index ${index}`;\n return ;\n};\n\nconst fields: RegistryFieldsType = {\n ArraySchemaField: CustomArraySchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom Field by Id\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the field component that applies to any schema or sub-schema based on the schema's `$id` value. This is useful when your custom field should be conditionally applied based on the schema rather than the property name or data type.\n\nTo provide a custom field in this way, the `fields` prop should be an object which contains a key that matches the `$id` value of the schema which should have a custom field; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomIdField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n '/schemas/my-id': CustomIdField,\n};\n\nconst schema: RJSFSchema = {\n $id: '/schemas/my-id',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Wrapping an existing field to customize it\n\nSometimes you just need to customize the properties that are passed to an existing field.\n\nHere is an example of wrapping the `ObjectField` to tweak the `onChange` handler to look for a specific kind of bad data:\n\n```tsx\nimport { useCallback } from 'react';\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nimport checkBadData from './checkBadData';\n\nconst {\n fields: { ObjectField },\n} = getDefaultRegistry();\n\nfunction MyObjectField(props: FieldProps) {\n const { onChange } = props;\n const onChangeHandler = useCallback(\n (newFormData: T | undefined, path: (number | string)[], es?: ErrorSchema, id?: string) => {\n let data = newFormData;\n let error = es;\n if (checkBadData(newFormData)) {\n // Format the `error` and fix the `data` here\n }\n onChange(data, path, error, id);\n },\n [onChange],\n );\n return ;\n}\n```\n","packages/docs/docs/advanced-customization/internals.md":"# Internals\n\nMiscellaneous internals of react-jsonschema-form are listed here.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. We currently support JSON Schema-07 by default, but we also support other JSON schema versions through the [custom schema validation](../usage/validation.md#custom-meta-schema-validation) feature. Due to the limitation of form widgets, there are some exceptions as follows:\n\n- `additionalItems` keyword for arrays\n\n This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n\n- `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`)\n\n The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties \"outside\" of the `anyOf/oneOf`.\n\n You can also use `oneOf` with [schema dependencies](../json-schema/dependencies.md#schema-dependencies) to dynamically add schema properties based on input data.\n\n The `allOf` keyword is supported; it uses [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema.\n\n- `\"additionalProperties\":false` produces incorrect schemas when used with [schema dependencies](../json-schema/dependencies.md#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `\"additionalProperties\":false` when you use schema dependencies. See [#848](https://github.com/rjsf-team/react-jsonschema-form/issues/848) [#902](https://github.com/rjsf-team/react-jsonschema-form/issues/902) [#992](https://github.com/rjsf-team/react-jsonschema-form/issues/992)\n\n## Handling of schema defaults\n\nThis library automatically fills default values defined in the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](../json-schema/dependencies.md#schema-dependencies).\n\nSince there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.\n\nCheck out the defaults example on the [live playground](https://rjsf-team.github.io/react-jsonschema-form/) to see this in action.\n\n### Merging of defaults into the form data\n\nThere are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.\n\nThis are the rules which are used when injecting the defaults:\n\n- When there is a scalar in the form data, nothing is changed.\n- When the value is `undefined` in the form data, the default is created in the form data.\n- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.\n- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.\n\nA boolean property that is listed in its parent's `required` array and has no `default` of its own is populated with `false`. You can turn this off using the experimental [`requiredBooleanDefault`](../api-reference/form-props.md#requiredbooleandefault) flag, so that the property stays `undefined` until the user answers it.\n\n### Merging of defaults within the schema\n\nIn the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together, with the deeper (descendant) default taking precedence for any overlapping properties by default. You can change this behavior using the experimental [`nestedDefaultsPrecedence`](../api-reference/form-props.md#nesteddefaultsprecedence) flag. If the parent node defines properties which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.\n\nFor arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.\n\n## Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, copy, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons).\nIf you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n> NOTE this only applies to the `@rjsf/core` theme\n\n```css\ni.glyphicon {\n display: none;\n}\n.btn-add::after {\n content: 'Add';\n}\n.array-item-copy::after {\n content: 'Copy';\n}\n.array-item-move-up::after {\n content: 'Move Up';\n}\n.array-item-move-down::after {\n content: 'Move Down';\n}\n.array-item-remove::after {\n content: 'Remove';\n}\n```\n\n## Submit form programmatically\n\nYou can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.\nThis method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onSubmit = ({ formData }) => console.log('Data submitted: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.submit();\n```\n\n## Update field value in form programmatically\n\nYou can use the reference to get your `Form` component and call the `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void` method to change the value of a field.\nThis method will dispatch the `onChange` event of the form.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onChange = ({ formData }) => console.log('Data updated to: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: {\n type: 'object',\n required: ['input'],\n properties: {\n input: {\n type: 'string',\n },\n },\n },\n },\n required: ['foo'],\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.setFieldValue('foo.input', 'value');\nformRef.current.setFieldValue(['foo'], { input: 'newvalue' });\nformRef.current.setFieldValue('', { foo: { input: 'another value' } });\nformRef.current.setFieldValue([], { foo: { input: 'more values' } });\n```\n","packages/docs/docs/advanced-customization/typescript.md":"# Typescript Support\n\nRJSF fully supports Typescript.\nThe [types and functions](../api-reference/utility-functions.md) exported by `@rjsf/utils` are fully typed (as needed) using one or more of the following 3 optional generics:\n\n- `T = any`: This represents the type of the `formData` and defaults to `any`.\n- `S extends StrictRJSFSchema = RJSFSchema`: This represents the type of the `schema` and extends the `StrictRJSFSchema` type and defaults to the `RJSFSchema` type.\n- `F extends FormContextType = any`: This represents the type of the `formContext`, extends the `FormContextType` type and defaults to `any`.\n\nEvery other library in the `@rjsf/*` ecosystem use these same generics in their functions and React component definitions.\nFor instance, in the `@rjsf/core` library the definitions of the `Form` component and the `withTheme()` and `getDefaultRegistry()` functions are as follows:\n\n```ts\nexport default class Form<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n> extends Component, FormState> {\n // ... class implementation\n}\n\nexport default function withTheme(\n themeProps: ThemeProps\n) {\n // ... function implementation\n}\n\nexport default function getDefaultRegistry<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n>(): Omit, 'schemaUtils'> {\n // ... function implementation\n}\n```\n\nOut of the box, the defaults for these generics will work for all use-cases.\nProviding custom types for any of these generics may be useful for situations where the caller is working with typed `formData`, `schema` or `formContext` props, Typescript is complaining and type casting isn't allowed.\n\n## Overriding generics\n\n### T\n\nThe generic `T` is used to represent the type of the `formData` property passed into `Form`.\nIf you are working with a simple, unchanging JSON Schema and you have defined a type for the `formData` you are working with, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formData: FormData = {};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} formData={formData} />, document.getElementById('app'));\n```\n\n### S\n\nThe generic `S` is used to represent the type of the `schema` property passed into `Form`.\nIf you are using something like the [Ajv utility types for schemas](https://ajv.js.org/guide/typescript.html#utility-types-for-schemas) typing system, you can override this generic as follows:\n\n```tsx\nimport { JSONSchemaType } from 'ajv';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} />, document.getElementById('app'));\n\n// Alternatively since you have the type, you could also use this\n// const validator = customizeValidator();\n// render((\n// schema={schema} validator={validator} />\n//), document.getElementById(\"app\"));\n```\n\n> NOTE: using this `Ajv typing system` has not been tested extensively with RJSF, so use carefully\n\n### F\n\nThe generic `F` is used to represent the type of the `formContext` property passed into `Form`.\nIf you have a type for this data, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formContext: FormContext = {\n myCustomWidgetData: {\n enableCustomFeature: true,\n },\n};\n\nconst validator = customizeValidator();\n\nrender(\n schema={schema} validator={validator} formContext={formContext} />,\n document.getElementById('app')\n);\n```\n\n## Overriding generics in core\n\nAs shown in previous examples, overriding the default `Form` from `@rjsf/core` is pretty straight forward.\nUsing the `withTheme()` function is just as easy:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst theme: ThemeProps = {\n widgets: { test: () =>
test
},\n};\n\nconst ThemedForm = withTheme(theme);\n\nconst validator = customizeValidator();\n\nconst Demo = () => ;\n```\n\n## Overriding generics in other themes\n\nSince all the other themes in RJSF are extensions of `@rjsf/core`, overriding parts of these themes with custom generics is a little different.\nThe exported `Theme` and `Form` from any of the themes have been created using the generic defaults, and as a result, do not take generics themselves.\nIn order to override generics, special `generateForm()` and `generateTheme()` functions are exported for your use.\n\n### Overriding a Theme\n\nIf you are doing something like the following to create a new theme based on `@rjsf/mui` to extend one or more `templates`:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\nimport { Theme } from '@rjsf/mui';\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst Demo = () => ;\n```\n\nThen you would use the new `generateTheme()` and `generateForm()` functions as follows:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { generateTheme } from '@rjsf/mui';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst Theme: ThemeProps = generateTheme();\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst validator = customizeValidator();\n\n// You could also do since they are effectively the same:\n// const ThemedForm = generateForm(myTheme);\n\nconst Demo = () => ;\n```\n\n> NOTE: The same approach works for extending `widgets` and `fields` as well.\n","packages/docs/docs/api-reference/LayoutGridField.md":"# LayoutGridField\n\nThe `LayoutGridField` will render a schema, uiSchema and formData combination out into a `GridTemplate` in the shape\ndescribed in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in\nthe uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):\n\n```json\n{\n \"field1\" : {\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": { ... }\n }\n }\n}\n```\n\nSee the [LayoutGridField usage](../usage/layout-grid.md) for more detailed walk-through on how to use the component. This page is condensed\nversion of the `uiSchema` APIs for faster reference.\n\n## `ui:row`\n\nThe outermost level of a `LayoutGridField` is the `ui:row` that defines the nested rows, columns, and/or condition\nelements (i.e. \"grid elements\") in the grid. This definition is either a simple \"grid elements\" OR an object with\nnative `GridTemplate` implementation-specific props and a `children` array of \"grid elements\". E.g. (as JSON objects):\n\nSimple `ui:row` definition, without additional `GridTemplate` props:\n\n```json\n{\n \"ui:row\": [\n { \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ... },\n ...\n ]\n}\n```\n\nComplex `ui:row` definition, with additional `GridTemplate` (this example uses `@mui/material/Grid2` native props):\n\n```json\n{\n \"ui:row\": {\n \"spacing\": 2,\n \"size\": {\n \"md\": 4\n },\n \"alignContent\": \"flex-start\",\n \"className\": \"GridRow\",\n \"children\": [\n {\n \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ...\n },\n ...\n ]\n }\n }\n```\n\n> NOTE: Special note about the native `className` prop values. All className values will automatically be looked up in\n> the `formContext.lookupMap` in case they have been defined using a CSS-in-JS approach. In other words, from the\n> example above, if the `Form` was constructed with a `layoutGridLookupMap` set to `{ GridRow: cssInJs.GridRowClass }`\n> then when rendered, the native `GridTemplate` will get the `className` with the value from\n> `cssInJs.GridRowClass`. This automatic lookup will happen for any of the \"grid elements\" when rendering with\n> `GridTemplate` props. If multiple className values are present, for example:\n> `{ className: 'GridRow GridColumn' }`, the classNames are split apart, looked up individually, and joined\n> together to form one className with the values from `cssInJs.GridRowClass` and `cssInJs.GridColumnClass`. See the\n> [example](../usage/layout-grid.md#named-lookup-support-for-classname) in the usage documentation.\n\n## `ui:col`\n\nThe `ui:col` grid element is used to specify the list of columns within a grid row. A `ui:col` element can take on\nseveral forms:\n\n1. a simple list of dotted-path field names within the root field;\n2. a list of objects containing the dotted-path field `name` any other props that are gathered into `ui:options` for the field;\n3. a list with a one-off `render` functional component with or without a non-field `name` identifier and any other to-be-spread props; and\n4. an object with native `GridTemplate` implementation specific props and a `children` array with 1) or 2) or even a nested `ui:row` or a `ui:condition` containing a `ui:row` (although this should be used carefully). E.g. (as JSON objects):\n\nSimple `ui:col` definition, without additional `GridTemplate` props and form 1 only children:\n\n```json\n{\n \"ui:col\": [\"innerField\", \"inner.grandChild\", ...]\n}\n```\n\nComplicated `ui:col` definition, without additional `GridTemplate` props and form 2 only children:\n\n```json\n{\n \"ui:col\": [\n { \"name\": \"innerField\", \"fullWidth\": true },\n { \"name\": \"inner.grandChild\", \"fullWidth\": false },\n ...\n ]\n}\n```\n\nMore complicated `ui:col` definition, without additional `GridTemplate` props and form 2 children, one being a\none-off `render` functional component without a non-field `name` identifier\n\n```json\n{\n \"ui:col\": [\n \"innerField\",\n {\n \"render\": \"WizardNavButton\",\n \"isNext\": true,\n \"size\": \"large\"\n }\n ]\n}\n```\n\nMost complicated `ui:col` definition, additional `GridTemplate` props and form 1, 2 and 3 children (this example\nuses @mui/material/Grid2 native props):\n\n```json\n{\n \"ui:col\": {\n \"size\": { \"md\": 4 },\n \"className\": \"GridColumn\",\n \"children\": [\n \"innerField\",\n { \"name\": \"inner.grandChild\", \"fullWidth\": true },\n { \"name\": \"customRender\", \"render\": \"CustomRender\", \"toSpread\": \"prop-value\" },\n { \"ui:row|ui:condition\": ... },\n ...\n ]\n }\n}\n```\n\n> NOTE: If a `name` prop does not exist or its value does not match any field in a schema, then it is assumed to be a\n> custom `render` component. If the `render` prop does not exist, a null render will occur. If `render` is a\n> string, its value will be looked up in the `formContext.lookupMap` first before defaulting to a null render. If the\n> resulting looked up `render` is not a function (React components are functions), then it will be a null render.\n\n## `ui:columns`\n\nThe `ui:columns` grid element is syntactic sugar to specify a set of `ui:col` columns that all share the same set of\nnative `GridTemplate` props. In other words rather than writing the following configuration that renders a\n`` element with 3 `` nodes and 2\n`` nodes within it (one for each of the fields contained in the `children`\nlist):\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"inner.grandChild\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [{ \"name\": \"inner.grandChild2\" }]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\nOne can write this instead:\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:columns\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\", \"inner.grandChild\", { \"name\": \"inner.grandChild2\", \"fullWidth\": true }]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\", \"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\n> NOTE: This syntax differs from `\"ui:col\": { \"className\": \"col-md-6\", \"children\": [\"innerField2\", \"inner.grandChild3\"] }` in that\n> the `ui:col` will render the two children fields inside a single ``\n> element.\n\n## `ui:condition`\n\nThe final grid element, `ui:condition`, allows for conditionally displaying \"grid elements\" within a row based on the\ncurrent value of a field as it relates to a (list of) hard-coded value(s). There are four elements that make up a\n`ui:condition`:\n\n1. the dotted-path `field` name within the root field that makes up the left-side of the condition;\n2. the hard-coded `value` (single or list) that makes up the right-side of the condition;\n3. the `operator` that controls how the left and right sides of the condition are compared; and\n4. the `children` array that defines the \"grid elements\" to display if the condition passes.\n\nA `ui:condition` uses one of three `operators` when deciding if a condition passes:\n\n1. The `all` operator will pass when the right-side and left-side contains all the same value(s);\n2. the `some` operator will pass when the right-side and left-side contain as least one value in common;\n3. the `none` operator will pass when the right-side and left-side do not contain any values in common. E.g. (as JSON objects):\n\nHere is how to render an if-then-else for `field2` which is an enum that has 3 known values and supports allowing\nany other value:\n\n```json\n{\n \"ui:row\": [\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"all\",\n \"value\": \"value1\",\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"some\",\n \"value\": [\"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"none\",\n \"value\": [\"value1\", \"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ]\n }\n }\n ]\n}\n```\n","packages/docs/docs/api-reference/dynamic-ui-schema-examples.md":"# Dynamic uiSchema Examples\n\n## Backward Compatibility Examples\n\n### Example 1: Traditional Static uiSchema (No Changes Required)\n\n```typescript\nimport { UiSchema } from '@rjsf/utils';\n\n// This continues to work exactly as before\nconst uiSchema: UiSchema = {\n guests: {\n items: {\n name: { 'ui:placeholder': 'Enter guest name' },\n age: { 'ui:widget': 'updown' },\n relationship: { 'ui:widget': 'select' },\n },\n },\n};\n```\n\n### Example 2: Dynamic uiSchema with Function\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface GuestData {\n name?: string;\n age?: number;\n relationship?: 'child' | 'adult' | 'senior';\n guardianName?: string;\n mealPreference?: string;\n}\n\n// New functionality - dynamic UI based on item data\nconst uiSchema: UiSchema = {\n guests: {\n items: (itemData: GuestData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Note: For newly added items, `itemData` will be undefined or contain default values.\n // Using optional chaining (`?.`) is recommended to handle this case gracefully.\n\n // Base UI schema for all items\n const baseUiSchema: UiSchema = {\n name: { 'ui:placeholder': `Guest ${index + 1} name` },\n relationship: { 'ui:widget': 'select' },\n };\n\n // Conditionally modify UI based on data\n if (itemData?.relationship === 'child') {\n return {\n ...baseUiSchema,\n age: {\n 'ui:widget': 'updown',\n 'ui:help': 'Age is required for children',\n 'ui:options': { min: 0, max: 17 },\n },\n guardianName: {\n 'ui:placeholder': 'Parent/Guardian name',\n },\n mealPreference: { 'ui:widget': 'hidden' },\n };\n }\n\n if (itemData?.relationship === 'adult') {\n return {\n ...baseUiSchema,\n age: { 'ui:widget': 'hidden' },\n guardianName: { 'ui:widget': 'hidden' },\n mealPreference: {\n 'ui:widget': 'select',\n 'ui:placeholder': 'Select meal preference',\n },\n };\n }\n\n // Default for new items or unknown relationships\n return baseUiSchema;\n },\n },\n};\n```\n\n### Example 3: Using Form Context\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ParticipantData {\n name?: string;\n email?: string;\n workshop?: string;\n}\n\ninterface MyFormContext extends FormContextType {\n eventType?: 'conference' | 'workshop' | 'webinar';\n}\n\nconst uiSchema: UiSchema = {\n participants: {\n items: (itemData: ParticipantData | undefined, index: number, formContext?: MyFormContext): UiSchema => {\n // Access form-wide settings\n const isConference = formContext?.eventType === 'conference';\n\n return {\n name: { 'ui:placeholder': 'Participant name' },\n email: { 'ui:widget': 'email' },\n // Show workshop selection only for conference events\n workshop: isConference ? { 'ui:widget': 'select' } : { 'ui:widget': 'hidden' },\n };\n },\n },\n};\n```\n\n### Example 4: Falsy Return Values\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ItemData {\n needsCustomUI?: boolean;\n field1?: string;\n field2?: string;\n}\n\nconst uiSchema: UiSchema = {\n items: {\n items: (itemData: ItemData | undefined, index: number): UiSchema | null | undefined => {\n // Only apply custom UI to specific items\n if (itemData?.needsCustomUI) {\n return {\n field1: { 'ui:widget': 'textarea' },\n field2: { 'ui:help': 'This item needs special attention' },\n };\n }\n\n // Return null or undefined to use default UI rendering\n // This is useful for conditionally applying custom UI\n return null;\n },\n },\n};\n```\n\n### Example 5: Dynamic UI for Fixed Arrays\n\nFor fixed/tuple arrays (where schema.items is an array), the dynamic function can be applied to each position:\n\n```typescript\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\ninterface DetailsData {\n age?: number;\n role?: string;\n}\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: [\n { type: 'string', title: 'First Name' },\n { type: 'string', title: 'Last Name' },\n { type: 'object', title: 'Details', properties: { age: { type: 'number' }, role: { type: 'string' } } },\n ],\n};\n\nconst uiSchema: UiSchema = {\n items: [\n { 'ui:placeholder': 'Enter first name' }, // Static UI for first item\n { 'ui:placeholder': 'Enter last name' }, // Static UI for second item\n // Dynamic UI for third item based on its data\n (itemData: DetailsData | undefined, index: number): UiSchema => {\n if (itemData?.role === 'admin') {\n return {\n age: { 'ui:widget': 'hidden' },\n role: { 'ui:help': 'Admin role selected' },\n };\n }\n return {\n age: { 'ui:widget': 'updown' },\n role: { 'ui:widget': 'select' },\n };\n },\n ],\n};\n```\n\n## Schema Example\n\n```typescript\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n guests: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: { type: 'string', title: 'Name' },\n age: { type: 'number', title: 'Age' },\n relationship: {\n type: 'string',\n title: 'Relationship',\n enum: ['adult', 'child', 'senior'],\n },\n guardianName: { type: 'string', title: 'Guardian Name' },\n mealPreference: {\n type: 'string',\n title: 'Meal Preference',\n enum: ['vegetarian', 'vegan', 'standard', 'gluten-free'],\n },\n },\n required: ['name', 'relationship'],\n },\n },\n },\n};\n```\n\n## Key Benefits\n\n1. **Backward Compatible**: Existing forms with object-based `uiSchema.items` continue to work without any changes\n2. **Progressive Enhancement**: Developers can opt-in to dynamic behavior when needed\n3. **Flexible**: Access to item data, index, and form context enables complex UI logic\n4. **Safe**: Built-in error handling prevents the entire form from crashing if your function throws an error. When an error occurs for a specific item, it will be caught and logged to the developer console, and the UI for that item will fall back to the default rendering. This ensures the rest of the form remains functional while making debugging easier.\n5. **On-Demand Execution**: The function is executed on-demand during the render cycle. However, as it runs for each array item, performance should be carefully managed for large lists (see Performance Considerations below).\n\n## Key Behaviors\n\n- **Falsy Returns**: If your function returns a falsy value (e.g., `null` or `undefined`), the UI for that specific item will fall back to its default rendering. This allows you to conditionally apply custom UI only when needed.\n- **Error Handling**: If your function throws an error, it will be caught and logged to the console. The form will continue to work, using default UI for the affected item.\n- **New Items**: When a new item is added to the array, `itemData` will be `undefined` or contain default values from the schema. Always use optional chaining (`?.`) to safely access properties.\n\n## Performance Considerations\n\nWhen using dynamic `uiSchema.items` functions, keep in mind:\n\n- The function is executed **on every render** for **each array item**\n- For large arrays, this can impact performance if the function performs expensive operations\n- Best practices:\n - Keep the function logic lightweight and fast\n - Avoid heavy computations or external API calls within the function\n - Consider memoizing results if the same inputs produce the same outputs\n - For complex logic, pre-compute values and store them in formContext or component state\n\nExample of a performance-optimized approach:\n\n```typescript\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema, FormContextType, IChangeEvent } from '@rjsf/utils';\n\ninterface ItemData {\n type?: string;\n field?: any;\n}\n\ninterface ExpensiveDataConfig {\n widget: string;\n}\n\ninterface MyFormProps {\n schema: RJSFSchema;\n formData?: any;\n}\n\n// In your React component that renders the form:\nfunction MyFormComponent({ schema, formData }: PropsWithChildren) {\n // Pre-compute expensive data once, and only re-compute if dependencies change\n const expensiveData = useMemo>(() => computeExpensiveData(), [/* dependencies */]);\n\n const defaultConfig: ExpensiveDataConfig = { widget: 'text' };\n\n // Define the uiSchema inside the component so it can access the memoized data\n const uiSchema: UiSchema = {\n myArrayField: { // Target your specific array field\n items: (itemData: ItemData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Use the pre-computed data - this is very fast\n const config = expensiveData[itemData?.type || ''] || defaultConfig;\n\n return {\n field: { 'ui:widget': config.widget }\n };\n }\n }\n };\n\n return ;\n}\n\n// Placeholder for the expensive computation function\ndeclare function computeExpensiveData(): Record;\n```\n","packages/docs/docs/api-reference/form-props.md":"---\ntitle: Props\n---\n\n# <Form /> props\n\n## acceptCharset\n\nThe value of this prop will be passed to the `accept-charset` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-accept-charset).\n\n## action\n\nThe value of this prop will be passed to the `action` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action).\n\nNote that this just renders the `action` attribute in the HTML markup. There is no real network request being sent to this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()` and then calls the [`onSubmit`](#onSubmit) function, where you could send a request programmatically with `fetch` or similar.\n\n## autoComplete\n\nThe value of this prop will be passed to the `autocomplete` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete).\n\n## className\n\nThe value of this prop will be passed to the `class` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## children\n\nYou can provide custom buttons to your form via the `Form` component's `children`. If no children are provided, by default a `Submit` button will be rendered.\n\nFor other ways to modify the default `Submit` button, see both the [Submit Button Options](./uiSchema.md#submitbuttonoptions) and the [SubmitButton Template](../advanced-customization/custom-templates.md#submitbutton) documentation.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(\n \n
\n \n \n
\n ,\n document.getElementById('app'),\n);\n```\n\n> **Warning:** There needs to be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n## customValidate\n\nFormerly the `validate` prop.\nThe `customValidate` prop requires a function that specifies custom validation rules for the form.\nSee [Validation](../usage/validation.md) for more information.\n\n## experimental_componentUpdateStrategy\n\nExperimental feature to specify an alternative component update strategy that accepts one of the following value:\nReact's default `Component` rendering strategy is to re-render on every state change, see `shouldComponentUpdate` docs.\n`PureComponent`'s strategy uses shallow equality. One can also always update (not recommended for performance reasons, but can be useful for testing)\n\n| Option | Description |\n| ---------- | ------------------------------------------------- |\n| customDeep | Legacy behavior - uses RJSF's deepEquals function |\n| shallow | shallow equality |\n| always | component always rerenders |\n\n## experimental_defaultFormStateBehavior\n\nExperimental features to specify different form state behavior.\nCurrently, this only affects the handling of optional array fields where `minItems` is set and handling of setting defaults based on the value of `emptyObjectFields`.\n\n> **Warning:** This API is experimental and unstable, therefore breaking changes may be shipped in minor or patch releases. If you want to use this feature, we recommend pinning exact versions of `@rjsf/\\*` packages in your package.json file or be ready to update your use of it when necessary.\n\nThe following subsections represent the different keys in this object, with the tables explaining the values and their meanings.\n\n### arrayMinItems\n\nThis optional subsection is an object with two optional fields, `populate` and `mergeExtraDefaults`.\nWhen not specified, it defaults to `{ populate: 'all', mergeExtraDefaults: false }`.\n\n#### arrayMinItems.populate\n\nOptional enumerated flag controlling how array minItems are populated, defaulting to `all`:\n\n| Flag Value | Description |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `all` | Legacy behavior - populate minItems entries with default values initially and include empty array when no values have been defined. |\n| `requiredOnly` | Ignore `minItems` on a field when calculating defaults unless the field is required. |\n| `never` | Ignore `minItems` on a field when calculating defaults for required and non-required. Value will set only if defined `default` and from `formData` |\n\n#### arrayMinItems.computeSkipPopulate\n\nThe signature and documentation for this property is as follow:\n\n##### computeSkipPopulate <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nA function that determines whether to skip populating the array with default values based on the provided validator, schema, and root schema.\nIf the function returns `true`, the array will not be populated with default values.\nIf the function returns `false`, the array will be populated with default values according to the `populate` option.\n\n###### Parameters\n\n- validator: ValidatorType<T, S, F> - An implementation of the `ValidatorType` interface that is used to detect valid schema conditions\n- schema: S - The schema for which resolving a condition is desired\n- [rootSchema]: S - The root schema that will be forwarded to all the APIs\n\n###### Returns\n\n- boolean: A boolean indicating whether to skip populating the array with default values.\n\n##### Example\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n stringArray: {\n type: 'array',\n items: { type: 'string' },\n minItems: 1,\n },\n numberArray: {\n type: 'array',\n items: { type: 'number' },\n minItems: 1,\n },\n },\n required: ['stringArray', 'numberArray'],\n};\n\nconst computeSkipPopulateNumberArrays = (validator, schema, rootSchema) =>\n // These conditions are needed to narrow down the type of the schema.items\n !Array.isArray(schema?.items) &&\n typeof schema?.items !== 'boolean' &&\n schema?.items?.type === 'number',\n\nrender(\n ,\n document.getElementById('app')\n);\n```\n\n#### arrayMinItems.mergeExtraDefaults\n\nOptional boolean flag, defaulting to `false` when not specified.\nWhen `formData` is provided and does not contain `minItems` worth of data, this flag controls whether the extra data provided by the defaults is appended onto the existing `formData` items to ensure the `minItems` condition is met.\nWhen `false` (legacy behavior), only the `formData` provided is merged into the default form state, even if there are fewer than the `minItems`.\nWhen `true`, the defaults are appended onto the end of the `formData` until the `minItems` condition is met.\n\n### emptyObjectFields\n\nOptional enumerated flag controlling how empty object fields are populated, defaulting to `populateAllDefaults`:\n\n| Flag Value | Description |\n| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `populateAllDefaults` | Legacy behavior - set default when there is a primitive value, an non-empty object field, or the field itself is required |\n| `populateRequiredDefaults` | Only sets default when a value is an object and its parent field is required, or it is a primitive value and it is required |\n| `skipDefaults` | Does not set defaults |\n| `skipEmptyDefaults` | Does not set an empty default. It will still apply the default value if a default property is defined in your schema |\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: { type: 'string' },\n minItems: 3,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### allOf\n\nOptional enumerated flag controlling how empty defaults are populated when `allOf` schemas are provided, defaulting to `skipDefaults`:\n\n| Flag Value | Description |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------- |\n| `skipDefaults` | Skip parsing defaults from `allOf` schemas nested inside the schema defaults are computed from, with the exceptions below |\n| `populateDefaults` | Generate default values for properties in the `allOf` schema including `if-then-else` syntax |\n\n`skipDefaults` only skips the `allOf` schemas nested inside the schema that defaults are computed from, not that schema's own `allOf`.\nWhich schema that is depends on what the form is doing:\n\n- When the form computes defaults from the root schema, a root-level `allOf` provides its defaults with either value.\n- Some actions compute defaults from a subschema as if it were the root, such as adding an array item or optional data, or switching a `oneOf` or `anyOf` option, so that subschema's own `allOf` provides its defaults with either value. When switching options, though, the `if` of an `if-then-else` in the new option's `allOf` is checked against the data of the option being left, so under `skipDefaults` its `then` default is filled in only when that data matches the `if`.\n- The option picked on the initial render is not computed as if it were the root, even when its `oneOf` or `anyOf` is in the root schema, so under `skipDefaults` its `allOf` is left out until the user switches away from that option and back.\n\nThe branch of an `if-then-else` is picked from the form data, not from the computed defaults, except in a `dependencies` entry, as the last item below says:\n\n- When the `if` lists a property in `required` and only a default provides that property, the `then` default is left out until the form data holds the value, for instance on the initial render.\n- Without `required`, a missing property still satisfies the `if`'s `properties`, so such an `if` passes with no data, and its `then` default is filled in even when the `if` does not match the defaulted value.\n- With one `allOf` entry per `enum` value and no form data, the default `allOf` merger merges the `then` defaults of all the entries, and the first entry that defaults a property wins. An `experimental_customMergeAllOf` that throws on the conflicting `default`s drops the whole `allOf` instead.\n\nAn `allOf` in an object property or in an array's `items` is skipped as a whole, plain property defaults included, so it usually needs `populateDefaults` to provide its defaults.\nThis is specific to `allOf`:\n\n- An `if-then-else` placed directly in a nested object schema is resolved with either value, unless `emptyObjectFields` is `skipEmptyDefaults`. For example, under `skipDefaults`, `items: { type: 'object', if, then }` fills in the `then` default, while `items: { type: 'object', allOf: [{ if, then }] }` does not.\n- Adding a direct `if` to that `items` schema resolves its whole `allOf` too, unless `emptyObjectFields` is `skipEmptyDefaults`.\n- With an `experimental_customMergeAllOf` built on a deep merger, such as `createDeepAllOfMerge` from `@x0k/json-schema-merge` given a shallow merge built with that library's `createMerger` and `createShallowAllOfMerge`, merging an `allOf` also turns a property's `allOf: [{ if, then }]` into a direct `if-then-else`, so that property's `then` default is filled in under `skipDefaults`, unless `emptyObjectFields` is `skipEmptyDefaults`. That happens wherever an `allOf` is merged: the root's own `allOf`, or the `allOf` of an object or `items` schema that also has a direct `if`, but not a nested `allOf` on its own.\n- A `dependencies` entry in a nested object schema is resolved once its property has a value, its `allOf` and `if-then-else` included, even when `emptyObjectFields` is `skipEmptyDefaults`. A default counts as that value, and the entry's `if` is checked against it, so an `if` that lists the property in `required` passes with no form data, while one that does not match the default fails. For example, under `skipDefaults`, `items: { type: 'object', properties: { animal: { default: 'Cat' } }, dependencies: { animal: { allOf: [{ if, then }] } } }` fills in the `then` default. A root `dependencies` entry counts a default only while the form data is empty: once the form data holds any value, the entry is applied only when the form data holds its property.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Example',\n type: 'object',\n properties: {\n animalInfo: {\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n allOf: [\n {\n if: {\n properties: {\n animal: {\n const: 'Cat',\n },\n },\n },\n then: {\n properties: {\n food: {\n type: 'string',\n default: 'meat',\n enum: ['meat', 'grass', 'fish'],\n },\n },\n required: ['food'],\n },\n },\n ],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### constAsDefaults\n\nOptional enumerated flag controlling how const values are merged into the form data as defaults when dealing with undefined values, defaulting to `always`.\nThe defaulting behavior for this flag will always be controlled by the `emptyObjectField` flag value.\nFor instance, if `populateRequiredDefaults` is set and the const value is not required, it will not be set.\n\n| Flag Value | Description |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `always` | A const value will always be merged into the form as a default. If there is are const values in a `oneOf` (for instance to create an enumeration with title different from the values), the first const value will be defaulted |\n| `skipOneOf` | If const is in a `oneOf` it will NOT pick the first value as a default |\n| `never` | A const value will never be used as a default |\n\n### mergeDefaultsIntoFormData\n\nOptional enumerated flag controlling how the defaults are merged into the form data when dealing with undefined values, defaulting to `useFormDataIfPresent`.\n\nNOTE: If there is a default for a field and the `formData` is unspecified, the default ALWAYS merges.\n\n| Flag Value | Description |\n| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| `useFormDataIfPresent` | Legacy behavior - Do not merge defaults if there is a value for a field in `formData` even if that value is explicitly set to `undefined` |\n| `useDefaultIfFormDataUndefined` | If the value of a field within the `formData` is `undefined`, then use the default value instead |\n\n### nestedDefaultsPrecedence\n\nOptional enumerated flag controlling how defaults defined on multiple levels are merged together for overlapping properties, defaulting to `descendantWins`.\n\n| Flag Value | Description |\n| -----------------| --------------------------------------------------------------------------------------------------|\n| `descendantWins` | The innermost (descendant) default value definition takes precedence over its ancestor's defaults |\n| `ancestorWins` | The outermost (ancestor) default value definition takes precedence over any descendant's defaults |\n\n#### Example\n\nIn the following example, the `animal` property is a descendant of the root schema and both define a default value for `animal`. By default, the `animal`'s default value `Cat` would take precedence over its ancestor's `Fish`. However, since `nestedDefaultsPrecedence` is set to `ancestorWins`, the root schema's default value takes precedence and `animal` is set to `Fish` by default.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n default: {\n animal: 'Fish',\n },\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### requiredBooleanDefault\n\nOptional enumerated flag controlling whether a boolean listed in its parent's `required` array, with no `default` of its own, is populated with `false`, defaulting to `populateFalse`.\nAn explicit schema `default`, a parent default and an existing `formData` value always take precedence; this flag only decides what happens when none of them provides a value.\n\n| Flag Value | Description |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| `populateFalse` | A required boolean with no `default` is set to `false` |\n| `skip` | No value is synthesized; the property stays `undefined` until the user answers it, so `required` remains a validation concern |\n\n#### Example\n\nIn the following example, `agree` is required but has no `default`. By default it would start as `false`, and the form would report `{ agree: false }` through `onChange` on mount. With `requiredBooleanDefault` set to `skip`, `formData` stays `{}` until the user answers, and validation reports `agree` as missing until then. This is the behavior to choose when a boolean question is rendered with an explicit \"unanswered\" state, for example a `- - -` / Yes / No select, rather than a checkbox.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n agree: {\n type: 'boolean',\n title: 'Do you agree?',\n },\n },\n required: ['agree'],\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## experimental_customMergeAllOf\n\nThe `experimental_customMergeAllOf` function allows you to provide a custom implementation for merging `allOf` schemas. This can be particularly useful in case the where the default merge library ([@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/)) doesn't satisfy your functional or performance requirements.\n\nBy providing your own implementation, you can potentially achieve significant performance improvements. For instance, if your use case only requires a subset of JSON Schema features, you can implement a faster, more tailored merging strategy.\n\nIf you're looking for alternative `allOf` merging implementations, you might consider [allof-merge](https://github.com/udamir/allof-merge).\n\n**Warning:** This is an experimental feature. Only use this if you fully understand the implications of custom `allOf` merging and are prepared to handle potential edge cases. Incorrect implementations may lead to unexpected behavior or validation errors.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst customMergeAllOf = (schema: RJSFSchema): RJSFSchema => {\n // Your custom implementation here\n};\n\nrender(\n
,\n document.getElementById('app'),\n);\n```\n\n## disabled\n\nIt's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`.\n\n## readonly\n\nIt's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to make some fields read-only, see the `ui:readonly` parameter in `uiSchema`.\n\n## enctype\n\nThe value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).\n\n## extraErrors\n\nThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation.\nBy default, these are non-blocking errors, meaning that you can still submit the form when these are the only errors displayed to the user.\nSee [Validation](../usage/validation.md) for more information.\n\n## extraErrorsBlockSubmit\n\nIf set to true, causes the `extraErrors` to become blocking when the form is submitted.\n\n## fields\n\nDictionary of registered fields in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n## focusOnFirstError\n\nIf set to true, then the first field with an error will receive the focus when the form is submitted with errors.\n\nYou can also provide a custom callback function to handle what happens when this function is called.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, RJSFValidationError } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst focusOnError = (error: RJSFValidationError) => {\n console.log('I need to handle focusing this error');\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.\n\nSee [AntD Customization](themes/antd/uiSchema.md#formcontext) for formContext customizations for the `antd` theme.\nSee [Semantic UI Customization](themes/semantic-ui/uiSchema.md#formcontext) for formContext customizations for the `semantic-ui` theme.\n\n## formData\n\nThe data for the form, used to load a \"controlled\" form with its current data. If you want an \"uncontrolled\" form with initial data, then use `initialFormData` instead.\n\n## id\n\nThe value of this prop will be passed to the `id` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## idPrefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of ``\n\n## idSeparator\n\nTo avoid using a path separator that is present in field names, it is possible to change the separator used for ids (the default is `_`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n first: {\n type: 'string',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of `` when rendering `first`.\n\n## initialFormData\n\nThe initial data for the form, used to fill an \"uncontrolled\" form with existing data on the initial render and when `reset()` is called programmatically.\n\n## nameGenerator\n\nThe `nameGenerator` prop allows you to customize how HTML `name` attributes are generated for form fields. This is essential when submitting form data to backend frameworks that expect specific naming conventions for structured data.\n\n**Default behavior:** When no `nameGenerator` is provided, the `name` attribute will equal the `id` attribute (e.g., `root_tasks_0_title`).\n\nRJSF provides two built-in generators:\n\n**`bracketNameGenerator`** - Generates bracket notation for PHP/Rails (e.g., `root[tasks][0][title]`). Automatically appends `[]` for multi-value fields like checkboxes.\n\n**`dotNotationNameGenerator`** - Generates dot notation for other frameworks (e.g., `root.tasks.0.title`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { bracketNameGenerator, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n firstName: { type: 'string' },\n tasks: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n title: { type: 'string' },\n },\n },\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also create a custom generator by implementing the `NameGeneratorFunction` type, which receives `path` (array of path segments), `idPrefix` (typically `'root'`), and optional `isMultiValue` (boolean for multi-value fields).\n\n## liveOmit\n\nFlag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to\nto `true` and the form's data is updated by the user.\n\nIf no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for\nthe flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live omit will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## liveValidate\n\nFlag that describes when live validation will be performed. Live validation means that the form will perform\nvalidation and show any validation errors whenever the form data is updated, rather than just on submit.\n\nIf no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for\nthe flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live validation will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## method\n\nThe value of this prop will be passed to the `method` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method).\n\n## name\n\nThe value of this prop will be passed to the `name` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name).\n\n## noHtml5Validate\n\nIf set to true, turns off HTML5 validation on the form. Set to `false` by default.\n\n## noValidate\n\nIf set to true, turns off all validation. Set to `false` by default.\n\n> NOTE: In a future major release, this flag may be deleted replaced by making `validator` prop optional\n\n## omitExtraData\n\nIf set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.\n\n## onBlur\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n## onChange\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same first argument as `onSubmit` any time a value is updated in the form.\nIt will also receive, as the second argument, the `id` of the field which experienced the change.\nGenerally, this will be the `id` of the field for which input data is modified.\nIn the case of adding/removing of new fields in arrays or objects with `additionalProperties` or `patternProperties` and the rearranging of items in arrays, the `id` will be that of the array or object itself, rather than the item/field being added, removed or moved.\n\n## onError\n\nTo react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onError = (errors) => console.log('I have', errors.length, 'errors to fix');\n\nrender(, document.getElementById('app'));\n```\n\n## onFocus\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## onSubmit\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid.\nIt will be passed a result object having a `formData` attribute, which is the valid form data you're usually after.\nThe original event will also be passed as a second parameter:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onSubmit = ({ formData }, e) => console.log('Data submitted: ', formData);\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, you may need to set the `omitExtraData` and/or `liveOmit` props.\n\n## removeEmptyOptionalObjects\n\n> **Deprecated**: This prop no longer has any effect and will be removed in a future release. The behavior of pruning optional empty objects is now built into [`omitExtraData`](#omitextradata) — enable that prop instead.\n\nWhen a JSON Schema has a required field inside an optional object, any user interaction with that optional object \"activates\" it. Even if the user clears all the fields within that object, the empty object property (e.g., `{ test: {} }` or `{ test: { field1: \"\" } }`) remains in the `formData`. Because the object contains required fields that are now empty, the form becomes unsubmittable.\n\nPreviously, setting `removeEmptyOptionalObjects` to `true` caused the form to recursively prune these optional empty objects from the `formData` during `onChange`, `onBlur`, and `onSubmit`. This pruning is now performed automatically by `omitExtraData`.\n\n## schema\n\n**Required**! Form schema. We support JSON schema draft-07 by default. See [Schema Reference](https://json-schema.org/draft-07/json-schema-release-notes.html) for more information.\n\n## showErrorList\n\nWhen this prop is set to `top` or `bottom`, a list of errors (or the custom error list defined in the `ErrorList`) will also show at the `bottom` or `top` of the form. When set to false, only inline input validation errors will be shown. Set to `top` by default. See [Validation](../usage/validation.md) for more information.\n\n## tagName\n\nIt's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.\n\n```tsx\n\n```\n\nYou can also provide a class/function component.\n\n```tsx\nconst CustomForm = props => \n// ...\n\n```\n\n## target\n\nThe value of this prop will be passed to the `target` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-target).\n\n## templates\n\nDictionary of registered templates in the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## transformErrors\n\nA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation. See [Validation](../usage/validation.md) for more information.\n\n## translateString\n\nOptional string translation function, if provided, allows users to change the translation of the RJSF internal strings.\nSome strings contain replaceable parameter values as indicated by `%1`, `%2`, etc.\nThe number after the `%` indicates the order of the parameter.\nThe ordering of parameters is important because some languages may choose to put the second parameter before the first in its translation. In addition to replaceable parameters, some of the strings support the use of markdown and simple html.\n\nOne can use the [documentation](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts) of the `TranslatableString` enums to determine which enum values contain replaceable parameters and which support markdown and simple html.\n\nOne could use this function to alter one or more of the existing english strings to better suit one's application or fully translate all strings into a different language.\nBelow is an example of changing a few of the english strings to something else:\n\n```ts\nimport { TranslatableString, englishStringTranslator, replaceStringParameters } from '@rjsf/utils';\n\nfunction fixupSomeEnglishStrings(stringToTranslate: TranslatableString, params?: string[]): string {\n switch (stringToTranslate) {\n case TranslatableString.NewStringDefault:\n return ''; // Use an empty string for the new additionalProperties string default value\n case TranslatableString.KeyLabel:\n return replaceStringParameters('%1 Key Name', params); // Add \"Name\" onto the end of the WrapIfAdditionalTemplate key label\n default:\n return englishStringTranslator(stringToTranslate, params); // Fallback to the default english\n }\n}\n```\n\n## uiSchema\n\nForm uiSchema. See [uiSchema Reference](uiSchema.md) for more information.\n\n## useFallbackUiForUnsupportedType\n\nIf set to true, when an unsupported schema type is encountered, the form will render a fallback UI instead of displaying an error. The fallback UI will display a widget that allows the user to select a JSON Schema primitive type, and a field containing the form data that matches the selected type. Set to false by default.\n\n## validator\n\n**Required**! An implementation of the `ValidatorType` interface that is needed for form validation to work.\n`@rjsf/validator-ajv8` exports the implementation of this interface from RJSF version 4.\n\n## widgets\n\nDictionary of registered widgets in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n","packages/docs/docs/api-reference/themes/antd/uiSchema.md":"# AntD Customization\n\n## formContext\n\nYou can customize the look of the form by passing options to Ant-Design theme fields.\n\nThe formContext antd object accepts `descriptionLocation`, `readonlyAsDisabled` properties.\n\n`descriptionLocation` can be `'below' | 'tooltip'`, the default is `'below'` which places the description below the form item.\nYou can set it to `tooltip` that put the description inside the tooltip.\nNote that you should have antd 4.7+ to use `'tooltip'`.\n\nSetting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as disabled.\n\n```tsx\n\n```\n\nThese are the `formContext` properties that you can modify to adjust the `antd` presentation:\n\n- `descriptionLocation`: Where to display the description, either 'below' or 'tooltip', defaults to 'below'\n- `readonlyAsDisabled`: Whether to make the antd theme treat readOnly fields as disabled, defaults to true\n\n## Using Antd v5 theme\n\nYou can use AntD v5 styling by wrapping your application with `StyleProvider` from `@ant-design/cssinjs`.\n\nBy default, `@rjsf/antd` components are using the v4 styling.\n\n```tsx\nimport { StyleProvider } from '@ant-design/cssinjs';\n\nconst Component = () => {\n return (\n \n \n \n );\n};\n```\n","packages/docs/docs/api-reference/themes/chakra-ui/uiSchema.md":"# Chakra-UI Customization\n\nWhen using `@rjsf/chakra-ui` there are a couple of ways to customize the feel of the form.\n\n## Styling\n\nYou can use `ChakraProvider`, where you can customize the field components at a theme level.\nAnd, `uiSchema` allows for the use of a `\"chakra\"` `\"ui:option\"` to customize the styling of the form widgets.\n\n```json\n{\n \"yourField\": {\n \"ui:options\": {\n \"chakra\": {\n \"p\": \"1rem\",\n \"color\": \"blue.200\",\n \"sx\": {\n \"margin\": \"0 auto\"\n }\n }\n }\n }\n}\n```\n\nIt accepts the theme accessible [style props](https://chakra-ui.com/docs/features/style-props) provided by [Chakra](https://chakra-ui.com/docs/getting-started) and [Emotion](https://emotion.sh/docs/introduction).\n\n### Limitations\n\n- The `chakra` option is only available for the Chakra-UI theme.\n- The props are given to the parent component in the individual widget. To pass styles to the inner components, use the [`sx` prop](https://chakra-ui.com/docs/features/the-sx-prop).\n","packages/docs/docs/api-reference/themes/mui/uiSchema.md":"# MUI Customization\n\nYou can customize the underlying Material UI (MUI) components used by `@rjsf/mui` by passing props directly through the `uiSchema`. This is extremely useful for applying simple customizations (like adding an `endAdornment` to an input field, tweaking margins, or changing variants) without having to build a completely custom Widget or Template.\n\n## Basic Usage\n\nThe `@rjsf/mui` package looks for a `mui` key inside the `ui:options` of your `uiSchema`. Any top-level properties defined here will be applied to the primary MUI wrapper component for that field (e.g. `TextField` for inputs, `FormGroup` for checkboxes, `Paper`/`Grid` for object/array wrappers).\n\n```json\n{\n \"myField\": {\n \"ui:options\": {\n \"mui\": {\n \"variant\": \"filled\",\n \"fullWidth\": false,\n \"sx\": {\n \"backgroundColor\": \"background.paper\",\n \"padding\": 2\n }\n }\n }\n }\n}\n```\n\n## `slotProps` vs `rjsfSlotProps`\n\n`@rjsf/mui` distinguishes between two kinds of slot customization:\n\n- **`slotProps`**: Passed directly to MUI's native `slotProps` API on a component (e.g., `TextField`'s `htmlInput`, `input`, `inputLabel` targets). These are standard MUI customization points.\n- **`rjsfSlotProps`**: Used by RJSF template components (e.g., `ArrayFieldTemplate`, `ObjectFieldTemplate`) to target their specific sub-components (e.g., `paper`, `grid`, `box`). This key is explicitly extracted before spreading, which **prevents prop bleeding** — ensuring configuration is not accidentally passed to unintended child components.\n\n### Using `slotProps` (for MUI widgets like `BaseInputTemplate`)\n\n```json\n{\n \"myPriceField\": {\n \"ui:options\": {\n \"mui\": {\n \"slotProps\": {\n \"input\": {\n \"startAdornment\": \"$\"\n }\n }\n }\n }\n }\n}\n```\n\n### Using `rjsfSlotProps` (for structural templates)\n\n```json\n{\n \"myArrayField\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayPaper\": {\n \"elevation\": 10\n }\n }\n }\n }\n }\n}\n```\n\n## Customizing Templates (e.g. Object and Array wrappers)\n\nMUI theme customizations are natively passed down into both your standard fields and their wrapping structural templates (like `ArrayFieldTemplate` or `ObjectFieldTemplate`) (see [table below](#components-and-their-rjsfslotprops-targets)).\n\nIf you wish to specifically target the _individual array items_ handled by `ArrayFieldItemTemplate` instead of the whole array container, you nest these overrides by targeting the `items` inside the schema:\n\n```json\n{\n \"myArrayField\": {\n \"items\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayItemGridContainer\": {\n \"spacing\": 2\n }\n }\n }\n }\n }\n }\n}\n```\n\n### Components and their `rjsfSlotProps` targets\n\nDifferent templates and widgets expose different `rjsfSlotProps` targets based on their underlying MUI composition.\n\n| RJSF Component | `rjsfSlotProps` targets available | Description |\n| ---------------------------- | --------------------------------- | ------------------------------------------------------------------------------------- |\n| **BaseInputTemplate** | _(uses native `slotProps`)_ | Uses MUI's `slotProps.htmlInput`, `slotProps.input`, `slotProps.inputLabel` directly. |\n| **FieldTemplate** | `fieldFormControl` | Props passed to the outer `FormControl` wrapper. |\n| | `fieldTypography` | Props passed to the `Typography` component used for the description. |\n| **ObjectFieldTemplate** | `objectGridContainer` | Props passed to the outer `Grid` container. |\n| | `objectGridItem` | Props passed to each property's `Grid` item. |\n| | `objectAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `objectAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| **ArrayFieldTemplate** | `arrayBox` | Props passed to the inner `Box` container holding the array items. |\n| | `arrayPaper` | Props passed to the outer `Paper` wrapper. |\n| | `arrayAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `arrayAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| | `arrayAddButtonBox` | Props passed to the `Box` wrapping the Add button. |\n| **ArrayFieldItemTemplate** | `arrayItemGridContainer` | Props passed to the outer `Grid` container for the item row. |\n| | `arrayItemGridItem` | Props passed to the content `Grid` item. |\n| | `arrayItemOuterBox` | Props passed to the outer `Box`. |\n| | `arrayItemPaper` | Props passed to the `Paper` elevation component. |\n| | `arrayItemInnerBox` | Props passed to the inner `Box` holding the children. |\n| | `arrayItemToolbarGrid` | Props passed to the `Grid` holding the toolbar buttons. |\n| **CheckboxesWidget** | `formGroup` | Props passed to the `FormGroup` container. |\n| | `checkbox` | Props passed to individual `Checkbox` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each checkbox. |\n| **CheckboxWidget** | `checkbox` | Props passed to the single `Checkbox` component. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` component wrapping the checkbox. |\n| **RadioWidget** | `radioGroup` | Props passed to the `RadioGroup` component. |\n| | `radio` | Props passed to the individual `Radio` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each radio. |\n| **SelectWidget** | `inputLabel` | Props passed to the native MUI `InputLabel` component. |\n| | `select` | Props passed to the native MUI `Select` component. |\n| **ErrorList** | `errorBox` | Props passed to the inner `Box`. |\n| | `errorList` | Props passed to the `List` container. |\n| | `errorListItem` | Props passed to individual `ListItem` components wrapping each error. |\n| | `errorListItemIcon` | Props passed to the `ListItemIcon` next to each error. |\n| | `errorListItemText` | Props passed to the `ListItemText` displaying the error. |\n| | `errorPaper` | Props passed to the outer `Paper` wrapper. |\n| | `errorTypography` | Props passed to the `Typography` displaying the \"Errors\" title. |\n| **FieldErrorTemplate** | `fieldErrorList` | Props passed to the `List` container. |\n| | `fieldErrorListItem` | Props passed to individual `ListItem` components. |\n| | `fieldErrorFormHelperText` | Props passed to the `FormHelperText` displaying the error text. |\n| **FieldHelpTemplate** | `helpFormHelperText` | Props passed to the `FormHelperText` used for help text. |\n| **DescriptionField** | `descTypography` | Props passed to the `Typography` component. |\n| **TitleField** | `titleBox` | Props passed to the outer `Box` wrapper. |\n| | `titleDivider` | Props passed to the `Divider` element. |\n| | `titleTypography` | Props passed to the `Typography` component used for the title. |\n| | `titleGridContainer` | Props passed to `Grid` container when title has optional data controls. |\n| | `titleGridItem` | Props passed to the `Grid` item containing the title. |\n| | `titleOptionalDataGridItem` | Props passed to the `Grid` item containing the optional data control. |\n| **MultiSchemaFieldTemplate** | `multiBox` | Props passed to the wrapper `Box`. |\n| | `multiFormControl` | Props passed to the wrapper `FormControl`. |\n| **SubmitButton** | `submitBox` | Props passed to the `Box` wrapping the submit button. |\n| | `submitButton` | Props passed to the `Button` element. |\n| **WrapIfAdditionalTemplate** | `wrapGridContainer` | Props passed to the outer `Grid` container. |\n| | `wrapKeyGridItem` | Props passed to the `Grid` item containing the key `TextField`. |\n| | `wrapChildrenGridItem` | Props passed to the `Grid` item containing the field children. |\n| | `wrapRemoveButtonGridItem` | Props passed to the `Grid` item containing the remove button. |\n","packages/docs/docs/api-reference/themes/primereact/uiSchema.md":"# PrimeReact Customization\n\nYou may set PrimeReact-specific options in the `uiSchema` object using the `\"prime\"` `\"ui:option\"`.\n\n```json\n{\n \"password\": {\n \"ui:options\": {\n \"prime\": {\n \"feedback\": true,\n \"weakLabel\": \"Too weak\",\n \"mediumLabel\": \"Could be stronger\",\n \"strongLabel\": \"Strong password\",\n \"toggleMask\": true\n }\n }\n }\n}\n```\n\n## Components\n\nThe `@rjsf/primereact` theme renders to the following PrimeReact components:\n\n- [`InputText`](https://primereact.org/inputtext/) as the default widget\n- [`AutoComplete`](https://primereact.org/autocomplete/) as the default with `examples`\n- [`Checkbox`](https://primereact.org/checkbox/) for boolean fields and `checkboxes` widget\n- [`ColorPicker`](https://primereact.org/colorpicker/) as `color` widget\n- [`Password`](https://primereact.org/password/) as `password` widget\n- [`RadioButton`](https://primereact.org/radiobutton/) as `radio` widget\n- [`Slider`](https://primereact.org/slider/) as `range` widget\n- [`Dropdown`](https://primereact.org/dropdown/) as `select` widget\n- [`MultiSelect`](https://primereact.org/multiselect/) as `select` widget with `multiple` option\n- [`InputTextarea`](https://primereact.org/inputtextarea/) as `textarea` widget\n- [`InputNumber`](https://primereact.org/inputnumber/) as `updown` widget\n\nPlease refer to the [PrimeReact documentation](https://primereact.org/) for the available PrimeReact-specific options\nof each component.\n","packages/docs/docs/api-reference/themes/semantic-ui/uiSchema.md":"# Semantic-UI Customization\n\nThere are various options to pass to semantic theme fields.\n\nNote that every semantic property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {semantic:{[property]: [value]}}}`\n\nIn other words, the following uiSchema is equivalent:\n\n> Note: All fields have the following settings below as their default\n\n```\nfluid: Take on the size of its container.\ninverted: Format to appear on dark backgrounds.\n```\n\n```json\n{\n \"ui:options\": {\n \"semantic\": {\n \"fluid\": true,\n \"inverted\": false,\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\"\n }\n }\n }\n}\n```\n\n#### Semantic Widget Optional Properties\n\n- [Semantic props for TextWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for CheckboxWidget](https://react.semantic-ui.com/modules/checkbox/)\n- [Semantic props for SelectWidget](https://react.semantic-ui.com/modules/dropdown/)\n- [Semantic props for RangeWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for RadioWidget](https://react.semantic-ui.com/addons/radio/)\n- [Semantic props for PasswordWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for UpDownWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for TextAreaWidget](https://react.semantic-ui.com/addons/text-area/)\n\n## errorOptions\n\nThe uiSchema semantic object accepts an `errorOptions` property for each field of the schema:\n\n```\nsize: determines the size of the error message dialog\npointing: determines the direction of the arrow on the error message dialog\n```\n\nBelow are the current defaults\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n errorOptions: {\n size: 'small',\n pointing: 'above',\n },\n },\n },\n};\n```\n\n## semantic options uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the semantic uiSchema value within the `ui:options` property:\n\n```\nwrapItem: wrap each array item in a Segment\nhorizontalButtons: vertical buttons instead of the default horizontal\n```\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n wrapItem: true,\n horizontalButtons: false,\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nThe formContext semantic object accepts `wrapContent` ,`wrapLabel` properties.\n\n```\nwrapContent: wrap all inputs field content in a div, for custom styling\nwrapLabel: wrap all labels in a div, for custom styling via CSS\n```\n\n```tsx\n\n```\n","packages/docs/docs/api-reference/uiSchema.md":"# uiSchema\n\nJSON Schema is limited for describing how a given data type should be rendered as a form input component. That's why this library introduces the concept of uiSchema.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.\n\nNote that almost every property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {[property]: [value]}}`, or `{\"ui:[property]\": value}`.\n\nIn other words, the following `uiSchema`s are equivalent:\n\n```json\n{\n \"ui:title\": \"Title\",\n \"ui:description\": \"Description\",\n \"ui:classNames\": \"my-class\",\n \"ui:submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n}\n```\n\n```json\n{\n \"ui:options\": {\n \"title\": \"Title\",\n \"description\": \"Description\",\n \"classNames\": \"my-class\",\n \"submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n }\n}\n```\n\nFor a full list of what is supported in the `uiSchema` see the `UiSchema` type in [@rjsf/utils/types.ts](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\nBe sure to pay attention to the hierarchical intersection to these other types: `UIOptionsBaseType` and `TemplatesType`.\n\n## Exceptions to the equivalence\n\nThere are 4 properties that exist in a `UiSchema` that will not be found in an inner `ui:options` object.\n\n### `ui:globalOptions`\n\nThe set of globally relevant `UiSchema` options that are read from the root-level `UiSchema` and stored in the `registry` for use everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': { copyable: true },\n};\n```\n\n### `ui:definitions`\n\nThe `ui:definitions` property allows you to define reusable UI customizations for schema `$ref` references. This is particularly useful for:\n\n- **Recursive schemas** - Define uiSchema once for a self-referencing schema node\n- **Reused definitions** - Apply consistent UI to schemas used in multiple places\n- **oneOf/anyOf branches** - Provide different uiSchema for branches that reference different definitions\n\nThe keys in `ui:definitions` must match the exact `$ref` path used in the schema (e.g., `#/definitions/address` or `#/$defs/node`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n },\n },\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' }, // Recursive reference\n },\n },\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/address': {\n street_address: { 'ui:placeholder': 'Street and number' },\n city: { 'ui:placeholder': 'City name' },\n },\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Enter node name' },\n children: { 'ui:options': { orderable: false } },\n },\n },\n // Local overrides take precedence over ui:definitions\n shipping_address: {\n street_address: { 'ui:placeholder': 'Shipping street (overrides definition)' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n#### Local Overrides\n\nYou can override specific properties from `ui:definitions` by providing values at the field path. Local values are merged with definitions, with local values taking precedence.\n\n#### oneOf/anyOf with Same Property Names\n\nWhen using `oneOf` or `anyOf` with branches that have properties with the same name, each branch's `$ref` maps to its own entry in `ui:definitions`, ensuring correct UI is applied:\n\n```tsx\nconst schema: RJSFSchema = {\n definitions: {\n person: { type: 'object', properties: { name: { type: 'string' } } },\n company: { type: 'object', properties: { name: { type: 'string' } } },\n },\n type: 'object',\n properties: {\n contact: {\n oneOf: [\n { title: 'Person', $ref: '#/definitions/person' },\n { title: 'Company', $ref: '#/definitions/company' },\n ],\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/person': {\n name: { 'ui:placeholder': 'Full name (e.g., John Doe)' },\n },\n '#/definitions/company': {\n name: { 'ui:placeholder': 'Company name (e.g., Acme Inc.)' },\n },\n },\n};\n```\n\n### `ui:rootFieldId` (deprecated)\n\n> DEPRECATED: Use `Form.idPrefix` instead, will be removed in a future major version\n\nBy default, this library will generate ids unique to the form for all rendered widgets.\nIf you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:rootFieldId': 'myform',\n};\n```\n\nThis will make all widgets have an id prefixed with `myform`.\n\n### `ui:field`\n\nThe `ui:field` property overrides the `Field` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a field that is used to look up an implementation from the `fields` list or an actual one-off `Field` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md#custom-field-components) for more information about how to use this property.\n\n### `ui:fieldReplacesAnyOrOneOf`\n\nBy default, any field that is rendered for an `anyOf`/`oneOf` schema will be wrapped inside the `AnyOfField` or `OneOfField` component.\nThis default behavior may be undesirable if your custom field already handles behavior related to choosing one or more subschemas contained in the `anyOf`/`oneOf` schema.\nBy providing a `true` value for this flag in association with a custom `ui:field`, the wrapped components will be omitted, so just one instance of the custom field will be rendered.\nIf the flag is omitted or set to `false`, your custom field will be wrapped by `AnyOfField`/`OneOfField`.\n\n### `ui:options`\n\nThe `ui:options` property cannot be nested inside itself and thus is the last exception.\n\n## `ui:XXX` or `ui:options.XXX`\n\nAll the properties that follow can be specified in the `uiSchema` in either of the two equivalent ways.\n\n> NOTE: The properties specific to array items can be found [here](../json-schema/arrays.md#array-item-uiSchema-options). For advanced dynamic UI schema capabilities for array items, see the [Dynamic UI Schema Examples](./dynamic-ui-schema-examples.md).\n\n### widget\n\nThe `ui:widget` property overrides the `Widget` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a widget that is used to look up an implementation from the `widgets` list or an actual one-off `Widget` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information about how to use this property.\n\n### classNames\n\nThe uiSchema object accepts a `ui:classNames` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:classNames': 'task-title foo-bar',\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### style\n\nThe uiSchema object accepts a `ui:style` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:style': { color: 'red' },\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### allowClearTextInputs\n\nThe optional `ui:allowClearTextInputs` uiSchema directive enables a clear/reset button for text-based input widgets.\nWhen set to true, a clear button will be displayed when the input field has a value and is not readonly or disabled.\nWhen omitted, no clear button will be displayed for text input fields.\n\nWhen clicked, the property value will be set to the `ui:emptyValue`, if defined.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:allowClearTextInputs': true,\n};\n```\n\nIt can also be enabled globally by setting the `allowClearTextInputs` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n allowClearTextInputs: true,\n },\n};\n```\n\n### autocomplete\n\nIf you want to mark a text input, select or textarea input to use the HTML autocomplete feature, set the `ui:autocomplete` uiSchema directive to a valid [HTML autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autocomplete': 'on',\n};\n```\n\n### autocapitalize\n\nTo control automatic capitalization on virtual keyboards for a text input, set the `ui:autocapitalize` uiSchema\ndirective to a valid [HTML autocapitalize value](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize#value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:autocapitalize': 'words',\n};\n```\n\n### autofocus\n\nIf you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autofocus': true,\n};\n```\n\n### description\n\nSometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:description': 'The best password',\n};\n```\n\n### deprecatedHandling\n\nThe `ui:deprecatedHandling` uiSchema directive controls how a field marked as `deprecated` in the JSON Schema is rendered.\n\nAccepts one of three values:\n\n- `'label'` (default): The field is rendered normally with `\"(deprecated)\"` appended to its label.\n- `'disable'`: The field is rendered but all its child widgets are disabled.\n- `'hide'`: The field is completely hidden from the form.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n legacyField: {\n 'ui:options': {\n deprecatedHandling: 'disable',\n },\n },\n};\n```\n\nIt can also be set globally by specifying the `deprecatedHandling` option in the `ui:globalOptions` uiSchema directive, which applies the chosen behavior to every deprecated field in the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n anotherOldField: { type: 'number', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n deprecatedHandling: 'hide',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### disabled\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### enableMarkdownInDescription\n\nThe `ui:enableMarkdownInDescription` uiSchema directive enables the support of Markdown syntax within the description of\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInDescription': true,\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInDescription` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInDescription: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableMarkdownInHelp\n\nThe `ui:enableMarkdownInHelp` uiSchema directive enables the support of Markdown syntax within the help displayed for\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInHelp': true,\n 'ui:help': '**bolded** text in the help',\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInHelp` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInHelp: true,\n },\n 'ui:help': '**bolded** text in the help',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableOptionalDataFieldForType\n\nThe `ui:enableOptionalDataFieldForType` uiSchema directive enables support for displaying the `Optional Data Controls` feature.\nThe intention of this feature is to allow developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields (see [examples](#add-optional-data-controls) below).\n\nThis directive takes, as its value, an array in one of four forms:\n\n1. `[]` - Disables the feature at a global or field level\n2. `['array']` - Enables the feature only for optional arrays at a global or field level\n3. `['object']` - Enables the feature only for optional object at a global or field level\n4. `['array', 'object']`- Enables the feature for both optional object and arrays at a global or field level\n\nIt can be specified in either the `ui:globalOptions` to turn the feature on for everything or in a specific field's `uiSchema`\nTo work properly this option must be coupled with the [emptyObjectFields](./form-props.md#emptyobjectfields) experimental feature on `Form` using the `populateRequiredDefaults` or `skipDefaults` options.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"undefined\" value in `formData` will NOT render any of the container's UI elements.\nInstead the object/array container's field title will have an \"Add optional data\" icon button that, when clicked will cause an empty container data element to be added to `formData`.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"defined\" value in `formData` will render all of the container's UI elements as normal AND the object/array container's field title will have a \"Remove optional data\" icon button that, when clicked will set the data for field in the `formData` to \"undefined\".\n\nHere is an example of what the UI will look like when enabled using the following `Form` configuration:\n\n```tsx\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n#### Add Optional Data Controls\n\n![add optional data controls](./OptionalDataControlsAdd.png)\n\n#### Remove Optional Data Controls\n\n![remove optional data controls](./OptionalDataControlsRemove.png)\n\n### emptyValue\n\nThe `ui:emptyValue` uiSchema directive provides the value to store when the input for a field is emptied, whether by typing or by clicking the `ui:allowClearTextInputs` clear button. It defaults to `undefined`, which omits the field from the form data entirely.\n\n### enumDisabled\n\nTo disable an option, use the `enumDisabled` property in uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': ['two'],\n};\n```\n\n### enumNames\n\nAllows a user to provide labels for enum values in the schema. Can be an array (matched by index) or a map (matched by value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchemaArray: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchemaMap: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n```\n\n### enumOrder\n\nControls the display order of enum options. Use `'*'` to represent remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n```\n\n### filePreview\n\nThe `FileWidget` can be configured to show a preview of an image or a download link for non-images using this flag.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\nconst uiSchema: UiSchema = {\n 'ui:options': {\n filePreview: true,\n },\n};\n```\n\n### help\n\nSometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:help': 'Hint: Make it strong!',\n};\n```\n\n![](https://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s) (after contextualized errors, if any).\n\n### hideError\n\nThe `ui:hideError` uiSchema directive will, if set to `true`, hide the default error display for the given field AND all of its child fields in the hierarchy.\n\nIf you need to enable the default error display of a child in the hierarchy after setting `hideError: true` on the parent field, simply set `hideError: false` on the child.\n\nThis is useful when you have a custom field or widget that utilizes either the `rawErrors` or the `errorSchema` to manipulate and/or show the error(s) for the field/widget itself.\n\n### inputType\n\nTo change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n inputType: 'tel',\n },\n};\n```\n\n### label\n\nField labels are rendered by default.\nLabels may be omitted on a per-field by setting the `label` option to `false` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThey can also be omitted globally by setting the `label` option to `false` in the `ui:globalOptions` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### optionValueFormat\n\nControls how enum-backed widgets (`select`, `radio`, `checkboxes`) encode option values in their DOM `value` attributes. Accepts `'indexed'` (default) or `'realValue'`.\n\n- `'indexed'`: options are encoded as their array index (e.g. `value=\"0\"`, `value=\"1\"`). This is the historical behavior and keeps non-primitive enum values (objects, arrays) addressable without stringifying them.\n- `'realValue'`: primitive option values are stringified directly (e.g. `value=\"admin\"`, `value=\"42\"`, `value=\"true\"`). This enables native HTML form submission and browser autocomplete since the submitted value matches the enum value. Non-primitive values (objects, arrays) still fall back to their index because `String(obj)` would produce `\"[object Object]\"`.\n\nThe form data passed to `onChange` is always the typed enum value; this option only affects the DOM-level encoding. Can be specified in `ui:globalOptions` to apply to all enum-backed fields, or per-field in `ui:options`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n role: { type: 'string', enum: ['admin', 'editor', 'viewer'] },\n },\n};\n\n// Form-wide\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n optionValueFormat: 'realValue',\n },\n};\n\n// Or per-field\nconst fieldUiSchema: UiSchema = {\n role: {\n 'ui:options': {\n optionValueFormat: 'realValue',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### order\n\nThis property allows you to reorder the properties that are shown for a particular object. See [Objects](../json-schema/objects.md) for more information.\n\n### placeholder\n\nYou can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', format: 'uri' };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'http://',\n};\n\nrender(, document.getElementById('app'));\n```\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', enum: ['First', 'Second'] };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'Choose an option',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### readonly\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only. This is equivalent to setting the `readOnly` property in the schema.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### rows\n\nYou can set the initial height of a textarea widget by specifying `rows` option.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n widget: 'textarea',\n rows: 15,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### title\n\nSometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:title': 'Your password',\n};\n```\n\n### submitButtonOptions\n\nSometimes it's convenient to change the behavior of the submit button for the form. This is the purpose of the `ui:submitButtonOptions` uiSchema directive:\n\nYou can pass any other prop to the submit button if you want, by default, this library will set the following options / props mentioned below for all submit buttons:\n\n#### `norender` option\n\nYou can set this property to `true` to remove the submit button completely from the form. Nice option, if the form is just for viewing purposes.\n\n#### `submitText` option\n\nYou can use this option to change the text of the submit button. Set to \"Submit\" by default.\n\n#### `props` section\n\nYou can pass any other prop to the submit button if you want, via this section.\n\n##### `disabled` prop\n\nYou can use this option to disable the submit button.\n\n##### `className` prop\n\nYou can use this option to specify a class name for the submit button.\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:submitButtonOptions': {\n props: {\n disabled: false,\n className: 'btn btn-info',\n },\n norender: false,\n submitText: 'Submit',\n },\n};\n```\n\n## `duplicateKeySuffixSeparator` option\n\nWhen using `additionalProperties`, key collision is prevented by appending a unique integer suffix to the duplicate key.\nFor example, when you add a key named `myKey` to a form where `myKey` is already defined, then your new key will become `myKey-1`.\nYou can use `ui:duplicateKeySuffixSeparator` to override the default separator, `\"-\"` with a string of your choice on a per-field basis.\n\nYou can also set this in the `ui:globalOptions` to have the same separator used everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n 'ui:globalOptions': {\n duplicateKeySuffixSeparator: '_',\n },\n};\n```\n\n## Using uiSchema with oneOf, anyOf\n\n### anyOf\n\nThe uiSchema will work with elements inside an `anyOf` as long as the uiSchema defines the `anyOf` key at the same level as the `anyOf` within the `schema`.\nBecause the `anyOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `anyOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n anyOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n### oneOf\n\nThe uiSchema will work with elements inside an `oneOf` as long as the uiSchema defines the `oneOf` key at the same level as the `oneOf` within the `schema`.\nBecause the `oneOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `oneOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n oneOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n## Theme Options\n\n- [AntD Customization](themes/antd/uiSchema.md)\n- [Chakra-UI Customization](themes/chakra-ui/uiSchema.md)\n- [MUI Customization](themes/mui/uiSchema.md)\n- [PrimeReact Customization](themes/primereact/uiSchema.md)\n- [Semantic-UI Customization](themes/semantic-ui/uiSchema.md)\n","packages/docs/docs/api-reference/utility-functions.md":"# RJSF utility functions, constants and types\n\nIn version 5, the utility functions from `@rjsf/core/utils` were refactored into their own library called `@rjsf/utils`.\nThese utility functions are separated into two distinct groups.\nThe first, larger, group are the [functions](#non-validator-utility-functions) that do NOT require a `ValidatorType` interface be provided as one of their parameters.\nThe second, smaller, group are the [functions](#validator-based-utility-functions) that DO require a `ValidatorType` interface be provided as a parameter.\nThere is also a helper [function](#schema-utils-creation-function) used to create a `SchemaUtilsType` implementation from a `ValidatorType` implementation and `rootSchema` object.\n\n## Constants\n\nThe `@rjsf/utils` package exports a set of constants that represent all the keys into various elements of a RJSFSchema or UiSchema that are used by the various utility functions.\nIn addition to those keys, there is the special `ADDITIONAL_PROPERTY_FLAG` flag that is added to a schema under certain conditions by the `retrieveSchema()` utility.\n\nThese constants can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/constants.ts).\n\n## Types\n\nAdditionally, the Typescript types used by the utility functions represent nearly all the types used by RJSF.\nThose types are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\n\n**`ObjectPath`** — Used by the path utilities (`getByPath`, `setByPath`, `hasByPath`, `unsetByPath`) to address a value inside a plain object. It is `string | number | FieldPathList`. A bare **string is always a single literal key**: `'a.b'` means the key `'a.b'`, never the nested path `a` → `b`. To walk a dotted path string, split it explicitly with [toPath()](#topath) first, or pass a `FieldPathList` (`(string | number)[]`) of segments. Reads and existence checks resolve **own** properties only, so inherited members never appear as form data.\n\n**`SchemaFieldPath`** — Used when navigating a JSON Schema subtree (for example with `getFromSchema` and `findFieldInSchema` on `SchemaUtilsType`, documented under [Validator-based utility functions](#validator-based-utility-functions)). It is `string | FieldPathList`: either a dotted path or an array of segments with the same rules as `FieldPathList` (`(string | number)[]`). A numeric segment denotes an array index or an object key that is numeric. Navigation skips only `undefined` or empty-string segments, so segment **`0`** is always honored (this avoids the bug from treating `0` as a falsy path unit).\n\n## Enums\n\nThere are enumerations in `@rjsf/utils` that are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese enums can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts).\n\n## Non-Validator utility functions\n\n### allowAdditionalItems()\n\nChecks the schema to see if it is allowing additional items, by verifying that `schema.additionalItems` is an object.\nThe user is warned in the console if `schema.additionalItems` has the value `true`.\n\n#### Parameters\n\n- schema: S - The schema object to check\n\n#### Returns\n\n- boolean: True if additional items is allowed, otherwise false\n\n### ariaDescribedByIds()\n\nReturn a list of element ids that contain additional information about the field that can be used to as the aria description of the field.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n- [includeExamples=false]: boolean - Optional flag, if true, will add the `examplesId` into the list\n\n#### Returns\n\n- string: The string containing the list of ids for use in an `aria-describedBy` attribute\n\n### asNumber()\n\nAttempts to convert the string into a number. If an empty string is provided, then `undefined` is returned.\nIf a `null` is provided, it is returned.\nIf the string ends in a `.` then the string is returned because the user may be in the middle of typing a float number.\nIf a number ends in a pattern like `.0`, `.20`, `.030`, string is returned because the user may be typing number that will end in a non-zero digit.\nOtherwise, the string is wrapped by `Number()` and if that result is not `NaN`, that number will be returned, otherwise the string `value` will be.\n\n#### Parameters\n\n- value: string | null - The string or null value to convert to a number\n\n#### Returns\n\n- undefined | null | string | number: The `value` converted to a number when appropriate, otherwise the `value`\n\n### bracketNameGenerator()\n\nGenerates bracketed names for form fields.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [isMultiValue]: boolean | undefined - Optional flag, if true, will append `[]` to the end of the name for multi-value fields (e.g., checkboxes, multi-select)\n\n#### Returns\n\n- string: The generated bracketed name (e.g., `root[tasks][0][title]`, or `root[hobbies][]` for multi-value fields)\n\n### buttonId()\n\nReturn a consistent `id` for the `btn` button element\n\n#### Parameters\n\n- id: FieldPathId | string - The id of the parent component for the option\n- btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove' - The button type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the button from the given `id` and `btn` type\n\n### canExpand<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks whether the field described by `schema`, having the `uiSchema` and `formData` supports expanding.\nThe UI for the field can expand if it has additional properties, is not forced as non-expandable by the `uiSchema` and the `formData` object doesn't already have `schema.maxProperties` elements.\n\n#### Parameters\n\n- schema: S - The schema for the field that is being checked\n- [uiSchema=\\{}]: UiSchema<T, S, F> - The uiSchema for the field\n- [formData]: T | undefined - The formData for the field\n\n#### Returns\n\n- boolean: True if the schema element has additionalProperties or patternProperties keywords, is expandable, and not at the maxProperties limit\n\n### createErrorHandler<T = any>()\n\nGiven a `formData` object, recursively creates a `FormValidation` error handling structure around it\n\n#### Parameters\n\n- formData: T - The form data around which the error handler is created\n\n#### Returns\n\n- FormValidation<T>: A `FormValidation` object based on the `formData` structure\n\n### dataURItoBlob()\n\nGiven the `FileReader.readAsDataURL()` based `dataURI` extracts that data into an actual Blob along with the name\nof that Blob if provided in the URL. If no name is provided, then the name falls back to `unknown`.\n\n#### Parameters\n\n- dataURI: string - The `DataUrl` potentially containing name and raw data to be converted to a Blob\n\n#### Returns\n\n- \\{ blob: Blob, name: string }: An object containing a Blob and its name, extracted from the URI\n\n### dateRangeOptions<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns a list of options for a date range between `start` and `stop`.\nIf the start date is greater than the end date, then the date range is reversed.\nIf `start` and `stop` are negative numbers (or zero), then they will be treated as relative to the current year.\n\n#### Parameters\n\n- start: number - The starting point of the date range\n- stop: number - The ending point of the date range\n\n#### Returns\n\n- EnumOptionsType<S>[]: The list of EnumOptionsType for the date range between `start` and `stop`\n\n#### Throws\n\n- Error when `start` and `stop` aren't both %lt;= 0 or > 0\n\n### deepEquals()\n\nImplements a deep equals that treats all functions as equivalent and tracks circular references, so self-referential inputs do not recurse infinitely.\n\n#### Parameters\n\n- a: any - The first element to compare\n- b: any - The second element to compare\n\n#### Returns\n\n- boolean: True if the `a` and `b` are deeply equal, false otherwise\n\n### descriptionId()\n\nReturn a consistent `id` for the field description element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field description element from the given `id`\n\n### dotNotationNameGenerator()\n\nGenerates dot-notation names for form fields. Multi-value fields are handled the same as single-value fields in dot notation.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [_isMultiValue]: boolean | undefined - Optional flag (unused in dot notation)\n\n#### Returns\n\n- string: The generated dot-notation name (e.g., `root.tasks.0.title`)\n\n### englishStringTranslator()\n\nTranslates a `TranslatableString` value `stringToTranslate` into english.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `stringToTranslate` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\nstringToTranslate: TranslatableString - The `TranslatableString` value to convert to english\n[params]: string[] - The optional list of replaceable parameter values to substitute to the english string\n\n#### Returns\n\n- string: The `stringToTranslate` itself with any replaceable parameter values substituted\n\n### enumOptionsDeselectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nRemoves the enum option value at the `valueIndex` from the currently `selected` (list of) value(s).\nIf `selected` is a list, then that list is updated to remove the enum option value with the `valueIndex` in `allEnumOptions`.\nIf it is a single value, then if the enum option value with the `valueIndex` in `allEnumOptions` matches `selected`, undefined is returned, otherwise the `selected` value is returned.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value to be removed from the selected list or single value\n- [selected]: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined - The current (list of) selected value(s)\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated `selected` list with the `value` removed from it\n\n### enumOptionSelectedValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nComputes the value to pass to a select element's `value` attribute.\nWhen `format` is `'realValue'`, converts form data values to strings.\nWhen `format` is `'indexed'` (the default), resolves to index-based values via `enumOptionsIndexForValue`.\nReturns `emptyValue` when the current value is empty.\n\n#### Parameters\n\n- value: any - The current form data value\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- multiple: boolean - Whether the select allows multiple selections\n- [format='indexed']: OptionValueFormat - How option values are encoded on the DOM\n- emptyValue: any - The value to return when the selection is empty\n\n#### Returns\n\n- any: The value to use for the select element's `value` attribute\n\n### enumOptionsIndexForValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the index(es) of the options in `allEnumOptions` whose value(s) match the ones in `value`.\nAll the `enumOptions` are filtered based on whether they are a \"selected\" `value` and the index of each selected one is then stored in an array.\nIf `multiple` is true, that array is returned, otherwise the first element in the array is returned.\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The single value or list of values for which indexes are desired\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [multiple=false]: boolean - Optional flag, if true will return a list of index, otherwise a single one\n\n#### Returns\n\n- string | string[] | undefined: A single string index for the first `value` in `allEnumOptions`, if not `multiple`. Otherwise, the list of indexes for (each of) the value(s) in `value`.\n\n### enumOptionsIsSelected<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetermines whether the given `value` is (one of) the `selected` value(s).\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] - The value being checked to see if it is selected\n- selected: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The current selected value or list of values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- boolean: true if the `value` is one of the `selected` ones, false otherwise\n\n### enumOptionsSelectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nAdd the `value` to the list of `selected` values in the proper order as defined by `allEnumOptions`.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value that should be selected\n- selected: EnumOptionsType<S>[\"value\"][] - The current list of selected values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated list of selected enum values with `value` added to it in the proper location\n\n### enumOptionsValueForIndex<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the value(s) from `allEnumOptions` at the index(es) provided by `valueIndex`.\nIf `valueIndex` is not an array AND the index is not valid for `allEnumOptions`, `emptyValue` is returned.\nIf `valueIndex` is an array, AND it contains an invalid index, the returned array will have the resulting undefined values filtered out, leaving only valid values or in the worst case, an empty array.\n\n#### Parameters\n\n- valueIndex: string | number | Array<string | number> - The index(es) of the value(s) that should be returned\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [emptyValue]: EnumOptionsType<S>[\"value\"] | undefined - The value to return when the non-array `valueIndex` does not refer to a real option\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined: The single or list of values specified by the single or list of indexes if they are valid. Otherwise, `emptyValue` or an empty list.\n\n### enumOptionValueDecoder<S extends StrictRJSFSchema = RJSFSchema>()\n\nDecodes a string from a DOM value attribute back to a typed enum value.\nWhen `format` is `'realValue'`, does a reverse lookup: finds the enum option whose `String(value)` matches the input string and returns the original typed value.\nFor object/array values that were encoded as indices, falls back to index resolution.\nWhen `format` is `'indexed'` (the default), uses index-based resolution via `enumOptionsValueForIndex`.\n\n#### Parameters\n\n- value: string | string[] - The string value(s) from the DOM\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- [format='indexed']: OptionValueFormat - How the values were encoded on the DOM\n- emptyValue: unknown - The value to return for empty/missing selections\n\n#### Returns\n\n- unknown: The original typed enum value(s)\n\n### enumOptionValueEncoder()\n\nEncodes an enum option value into a string for a DOM value attribute.\nWhen `format` is `'realValue'`, primitive values are converted via `String()`.\nNon-primitive values (objects, arrays) fall back to the index since `String()` would produce `\"[object Object]\"`.\nWhen `format` is `'indexed'` (the default), returns the index as a string.\n\n#### Parameters\n\n- value: unknown - The typed enum value\n- index: number - The option's position in the enumOptions array\n- [format='indexed']: OptionValueFormat - How to encode the value for the DOM attribute\n\n#### Returns\n\n- string: The string to use as the DOM value attribute\n\n### logUnsupportedDefaultForEnum<S extends StrictRJSFSchema = RJSFSchema>()\n\nLogs a warning when a single-select enum widget has a schema default that is not one of its enum options.\nMulti-select widgets are ignored because they do not use the same single-value default handling.\n\n#### Parameters\n\n- id: string - The field id used in the warning message\n- schema: S - The schema whose default value is checked\n- [enumOptions]: EnumOptionsType<S>[] - The enum options available to the widget\n- [multiple=false]: boolean - Whether the widget allows multiple selections\n\n### errorId()\n\nReturn a consistent `id` for the field error element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field error element from the given `id`\n\n### examplesId()\n\nReturn a consistent `id` for the field examples element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field examples element from the given `id`\n\n### findSchemaDefinition<S extends StrictRJSFSchema = RJSFSchema>()\n\nGiven the name of a `$ref` from within a schema, using the `rootSchema`, look up and return the sub-schema using the path provided by that reference.\nIf `#` is not the first character of the reference, or the path does not exist in the schema, then throw an Error.\nOtherwise, return the sub-schema. Also deals with nested `$ref`s in the sub-schema.\n\n#### Parameters\n\n- $ref: string - The ref string for which the schema definition is desired\n- [rootSchema={}]: S - The root schema in which to search for the definition\n\n#### Returns\n\n- S: The sub-schema within the `rootSchema` which matches the `$ref` if it exists\n\n#### Throws\n\n- Error indicating that no schema for that reference exists\n\n### getByPath<R = unknown>()\n\nGets the value at `path` of `obj`, returning `defaultValue` when the resolved value is `undefined`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment must be an **own** property, matching [hasByPath()](#hasbypath), so the two can be used as a guard/read pair.\nInherited members are never resolved: `getByPath({}, 'toString')` returns `defaultValue` rather than `Function.prototype.toString`. For the plain form data and schemas RJSF navigates, an inherited member is never data, and the own-property rule also makes prototype internals such as `__proto__` unreachable unless they are genuine own data keys.\n\nAn empty segment list resolves to nothing, so `defaultValue` is returned rather than `obj` itself; this matches [hasByPath()](#hasbypath), which is `false` for an empty path.\n\nThe value at a runtime-computed path cannot be known statically, so `R` is the caller's declaration of the expected type (like `Map.get()`); it defaults to `unknown`, which forces narrowing when no type is given.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments at which to get the value\n- [defaultValue]: R - The value returned when the resolved value is `undefined`\n\n#### Returns\n\n- R: The resolved value, otherwise `defaultValue`\n\n#### Example\n\n```typescript\ngetByPath({ a: { b: 1 } }, ['a', 'b']); // 1\ngetByPath({ 'a.b': 1 }, 'a.b'); // 1, a bare string is one literal key\ngetByPath({ a: { b: 1 } }, toPath('a.b')); // 1\ngetByPath({ a: {} }, ['a', 'missing'], 'fallback'); // 'fallback'\ngetByPath({}, 'toString', 'fallback'); // 'fallback', inherited members are not read\ngetByPath({ a: 1 }, [], 'fallback'); // 'fallback', an empty path resolves to nothing\n```\n\n### getChangedFields(a: unknown, b: unknown, deep?: boolean)\n\nCompares two objects and returns the names of the fields that have changed.\nThis function iterates over each field of object `a`, using `_.isEqual` to compare the field value with the corresponding field value in object `b`.\nIf the values are different, the field name will be included in the returned array.\n\nWhen `deep` is true, a field holding a nested object or a same-length array is descended into and the dotted path of the deepest field that changed is returned instead of the name of the top-level field holding it.\nA key that contains a `.` or a `[` is descended into like any other: the path it produces cannot be told apart from a path through nested keys, and neither can the entry an `ErrorSchema` keeps for it, since [toErrorSchema()](#toerrorschema) spells such a name out as a path in the same way.\n\n#### Parameters\n\n- a: unknown - The first object, representing the original data to compare.\n- b: unknown - The second object, representing the updated data to compare.\n- [deep=false]: boolean - Optional flag that, when true, returns the dotted path of the deepest field that changed.\n\n#### Returns\n\n- string[] : An array of field names that have changed.\n\n#### Example\n\n```typescript\nconst a = { name: 'John', age: 30 };\nconst b = { name: 'John', age: 31 };\nconst changedFields = getChangedFields(a, b);\nconsole.log(changedFields); // Output: ['age']\n```\n\n#### Example (deep)\n\n```typescript\nconst a = { items: [{ qux: '', corge: '' }] };\nconst b = { items: [{ qux: 'a', corge: '' }] };\nconsole.log(getChangedFields(a, b)); // Output: ['items']\nconsole.log(getChangedFields(a, b, true)); // Output: ['items.0.qux']\n```\n\n### getDecimalSeparator(languages?: string | string[])\n\nDetermines the locale-specific decimal separator.\nIt uses the provided locale or the first locale in navigator.languages (if available) and falls back to \"en\".\n\n#### Parameters\n\n- languages?: string | string[] - Optional array of locales or a single locale string.\n\n#### Returns\n\n- string : The decimal separator character (typically '.' or ',').\n\n#### Example\n\n```typescript\nconst separator = getDecimalSeparator('fr');\nconsole.log(separator); // Output: ','\n```\n\n### getDiscriminatorFieldFromSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the `discriminator.propertyName` when defined in the `schema` if it is a string. A warning is generated when it is not a string.\nReturns `undefined` when a valid discriminator is not present.\n\n#### Parameters\n\n- schema: S - The schema from which the discriminator is potentially obtained\n\n#### Returns\n\n- string | undefined: The `discriminator.propertyName` if it exists in the schema, otherwise `undefined`\n\n### getDateElementProps()\n\nGiven date & time information with optional yearRange & format, returns props for DateElement\n\n#### Parameters\n\n- date: DateObject - Object containing date with optional time information\n- time: boolean - Determines whether to include time or not\n- [yearRange=[1900, new Date().getFullYear() + 2]]: [number, number] - Controls the list of years to be displayed\n- [format='YMD']: DateElementFormat - Controls the order in which day, month and year input element will be displayed\n\n#### Returns\n\n- Array of props for DateElement\n\n### getInputProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nUsing the `schema`, `defaultType` and `options`, extract out the props for the `` element that make sense.\n\n#### Parameters\n\n- schema: S - The schema for the field provided by the widget\n- [defaultType]: string | undefined - The default type, if any, for the field provided by the widget\n- [options={}]: UIOptionsType<T, S, F> - The UI Options for the field provided by the widget\n- [autoDefaultStepAny=true]: boolean - Determines whether to auto-default step=any when the type is number and no step\n\n#### Returns\n\n- InputPropsType: The extracted `InputPropsType` object\n\n### getOptionMatchingSimpleDiscriminator()\n\nCompares the value of `discriminatorField` within `formData` against the value of `discriminatorField` within schema for each `option`. Returns index of first `option` whose discriminator matches formData. Returns `undefined` if there is no match.\n\nThis function does not work with discriminators of `\"type\": \"object\"` and `\"type\": \"array\"`\n\n#### Parameters\n\n- [formData]: T | undefined - The current formData, if any, used to figure out a match\n- options: S[] - The list of options to find a matching options from\n- [discriminatorField]: string | undefined - The optional name of the field within the options object whose value is used to determine which option is selected\n\n#### Returns\n\n- number | undefined: index of the matched option\n\n### getOptionValueFormat()\n\nResolves the effective `optionValueFormat` for enum-backed widgets.\nProvides a single source of truth for the default DOM encoding format (`'indexed'`) used by `SelectWidget`, `RadioWidget`, and `CheckboxesWidget`.\nWidgets should call this helper once and pass the result to `enumOptionValueEncoder`, `enumOptionValueDecoder`, and `enumOptionSelectedValue` rather than reading `options.optionValueFormat` directly.\n\n#### Parameters\n\n- [options]: \\{ optionValueFormat?: OptionValueFormat } | undefined - The widget options (typically from the `options` prop, already resolved from `ui:options` and `ui:globalOptions`)\n\n#### Returns\n\n- OptionValueFormat: The resolved `OptionValueFormat`, defaulting to `'indexed'` when not set\n\n### getPropertySchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the sub-schema declared for `property` in the `properties` of `schema`, falling back to an empty schema when the schema has no such property.\nCallers treat the properties of a schema as schemas of the same type `S`, which the `JSONSchema7` typing of `properties` cannot express, so this function owns that single assertion rather than repeating it at every lookup.\n\n#### Parameters\n\n- schema: S | undefined - The schema, if any, from which to read the property sub-schema\n- property: string - The name of the property whose sub-schema is desired\n\n#### Returns\n\n- S: The sub-schema for `property`, or an empty schema when it is not declared\n\n### getSchemaType()\n\nGets the type of a given `schema`.\nIf the type is not explicitly defined, then an attempt is made to infer it from other elements of the schema as follows:\n\n- schema.const: Returns the `guessType()` of that value\n- schema.enum: Returns `string`\n- schema.properties: Returns `object`\n- schema.additionalProperties: Returns `object`\n- schema.patternProperties: Returns `object`\n- type is an array with a length of 2 and one type is 'null': Returns the other type\n\n#### Parameters\n\n- schema: S - The schema for which to get the type\n\n#### Returns\n\n- string | string[] | undefined: The type of the schema\n\n### getSubmitButtonOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nExtracts any `ui:submitButtonOptions` from the `uiSchema` and merges them onto the `DEFAULT_OPTIONS`\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - the UI Schema from which to extract submit button props\n\n#### Returns\n\n- UISchemaSubmitButtonOptions: The merging of the `DEFAULT_OPTIONS` with any custom ones\n\n### getTemplate<Name extends keyof TemplatesType<T, S, F>, T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nReturns the template with the given `name` from either the `uiSchema` if it is defined or from the `registry`\notherwise. NOTE, since `ButtonTemplates` are not overridden in `uiSchema` only those in the `registry` are returned.\n\n#### Parameters\n\n- name: Name - The name of the template to fetch, restricted to the keys of `TemplatesType`\n- registry: Registry<T, S, F> - The `Registry` from which to read the template\n- [uiOptions=\\{}]: UIOptionsType<T, S, F> - The `UIOptionsType` from which to read an alternate template\n\n#### Returns\n\n- TemplatesType<T, S, F>[Name] - The template from either the `uiSchema` or `registry` for the `name`\n\n### getTestIds()\n\nReturns an object of test IDs that can only be used in test mode.\nIf the function is called in a test environment (`NODE_ENV === 'test'`, this is set by jest) then a Proxy object will be returned.\nIf a key within the returned object is accessed, if the value already exists the object will return that value, otherwise it will create that key\nwith a generated `uuid` value and return the generated ID.\nIf it is called outside of a test environment, the function will return an empty object, therefore returning `undefined` for any property within the object and excluding the prop from the rendered output of the component in which it is used.\nTo use this helper, you will want to generate a separate object for each component to avoid potential overlapping of ID names.\nYou will also want to export the object for use in tests, because the keys will be generated in the component file, and used in the test file.\nWithin the component file, add: `export const TEST_IDS = getTestIds();`\nThen pass `TEST_IDS.examplePropertyName` as the value of the test ID attribute of the intended component.\nThis will allow you to use `TEST_IDS.examplePropertyName` within your tests, while keeping the test IDs out of your rendered output.\n\n#### Returns\n\n- TestIdShape: An object that auto-generates test ids upon request the first time and then returns the same value on subsequent calls\n\n### getUiOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGet all passed options from ui:options, and ui:<optionName>, returning them in an object with the `ui:` stripped off.\nAny `globalOptions` will always be returned, unless they are overridden by options in the `uiSchema`.\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - The UI Schema from which to get any `ui:xxx` options\n- [globalOptions={}]: GlobalUISchemaOptions - The optional Global UI Schema from which to get any fallback `xxx` options\n\n#### Returns\n\n- UIOptionsType<T, S, F> An object containing all of the `ui:xxx` options with the `ui:` stripped off along with all `globalOptions`\n\n### getWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGiven a schema representing a field to render and either the name or actual `Widget` implementation, returns the\nReact component that is used to render the widget. If the `widget` is already a React component, then it is wrapped\nwith a `MergedWidget`. Otherwise an attempt is made to look up the widget inside of the `registeredWidgets` map based\non the schema type and `widget` name. If no widget component can be found an `Error` is thrown.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- Widget<T, S, F>: The `Widget` component to use\n\n#### Throws\n\n- An error if there is no `Widget` component that can be returned\n\n### hasByPath()\n\nDetermines whether `obj` has an **own** property at `path`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment is checked with `Object.hasOwn()`, so inherited properties report `false` — `hasByPath({}, 'toString')` is `false`. [getByPath()](#getbypath) applies the same own-property rule, so the two can be used as a guard/read pair.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments to check for\n\n#### Returns\n\n- boolean: True if the own property exists at `path`, otherwise false\n\n#### Example\n\n```typescript\nhasByPath({ a: { b: undefined } }, ['a', 'b']); // true, the key exists\nhasByPath({ a: { b: 1 } }, 'a.b'); // false, there is no key named 'a.b'\nhasByPath({}, 'toString'); // false, inherited properties are not own properties\n```\n\n### hashObject()\n\nStringifies an `object` and returns the hash of the resulting string.\nSorts object fields in consistent order before stringify to prevent different hash ids for the same object.\n\n#### Parameters\n\n- object: object - The object for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified object\n\n### hashString()\n\nHashes a string using the algorithm based on Java's hashing function.\n\n#### Parameters\n\n- string: string - The string for which to get the hash\n\n#### Returns\n\n- string: The resulting hash of the string in hex format\n\n### guessType()\n\nGiven a specific `value` attempts to guess the type of a schema element. In the case where we have to implicitly\ncreate a schema, it is useful to know what type to use based on the data we are defining.\n\n#### Parameters\n\n- value: any - The value from which to guess the type\n\n#### Returns\n\n- string: The best guess for the object type\n\n### hashForSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nStringifies the schema and returns the hash of the resulting string.\n\n#### Parameters\n\n- schema: S - The schema for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified schema\n\n### hasWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nDetects whether the `widget` exists for the `schema` with the associated `registryWidgets` and returns true if it does, or false if it doesn't.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- boolean: True if the widget exists, false otherwise\n\n### helpId()\n\nReturn a consistent `id` for the field help element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field help element from the given `id`\n\n### isConstant<S extends StrictRJSFSchema = RJSFSchema>()\n\nThis function checks if the given `schema` matches a single constant value.\nThis happens when either the schema has an `enum` array with a single value or there is a `const` defined.\n\n#### Parameters\n\n- schema: S - The schema for a field\n\n#### Returns\n\n- boolean: True if the `schema` has a single constant value, false otherwise\n\n### isCustomWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks to see if the `uiSchema` contains the `widget` field and that the widget is not `hidden`\n\n#### Parameters\n\n- uiSchema: UiSchema<T, S, F> - The UI Schema from which to detect if it is customized\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isFixedItems<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetects whether the given `schema` contains fixed items.\nThis is the case when `schema.items` is a non-empty array that only contains objects.\n\n#### Parameters\n\n- schema: S - The schema in which to check for fixed items\n\n#### Returns\n\n- boolean: True if there are fixed items in the schema, false otherwise\n\n### isFormDataAvailable<T = any>()\n\nDetermines whether the given `formData` represents valid form data, such as a primitive type, an array, or a non-empty object.\n\n#### Parameters\n\n- formData: T - The data to check\n\n#### Returns\n\n- boolean: True if `formData` is not undefined, null, a primitive type or an array or an empty object\n\n### isObject()\n\nDetermines whether a `thing` is an object for the purposes of RSJF.\nIn this case, `thing` is an object if it has the type `object` but is NOT null, an array or a File.\n\n#### Parameters\n\n- thing: any - The thing to check to see whether it is an object\n\n#### Returns\n\n- boolean: True if it is a non-null, non-array, non-File object\n\n### isPlainObject()\n\nDetermines whether `thing` is a plain object, i.e. one created by the `Object` constructor or with a `null` prototype.\nUnlike [isObject()](#isobject), class instances such as `Error` are not plain objects, which matters when recursively walking a structure whose nested values are expected to be plain data.\n\n#### Parameters\n\n- thing: unknown - The thing to check to see whether it is a plain object\n\n#### Returns\n\n- boolean: True if it is a plain object, otherwise false. When true, `thing` is narrowed to `Record`\n\n### isRootSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nHelper to check whether a JSON schema object is the root schema. The schema is a root schema with root `properties`\nkey or a root `$ref` key. If the `schemaToCompare` has a root `oneOf` property, the function will\nreturn false. Else if `schemaToCompare` and `rootSchema` are the same object or equal, the function will return\n`true`. Else if the `rootSchema` has a $ref, it will be resolved using `schemaUtils.resolveSchema` utility. If the\nresolved schema matches the `schemaToCompare` the function will return `true`. Otherwise, it will return false.\n\n#### Parameters\n\n- registry: Registry<T, S, F> - The `Registry` used to get the `rootSchema` and `schemaUtils`\n- schemaToCompare: S - The JSON schema object to check. If `schemaToCompare` is an root schema, the function will return true.\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isValueEmpty()\n\nReturns true when a form value is considered empty: `null`, `undefined`, or `''` (empty string), an empty array (`[]`), or a plain object whose every own value is itself empty (checked recursively). Scalar values such as `0` and `false` are not considered empty.\n\n#### Parameters\n\n- value: unknown - The value to check\n\n#### Returns\n\n- boolean: True if the value is considered empty, false otherwise\n\n### labelValue()\n\nHelper function that will return the value to use for a widget `label` based on `hideLabel`.\nThe `fallback` is used as the return value from the function when `hideLabel` is true.\nDue to the implementation of theme components, it may be necessary to return something other than `undefined` to cause the theme component to not render a label.\nSome themes require may `false` and others may require an empty string.\n\n#### Parameters\n\n- [label]: string | ReactElement | undefined - The label string or component to render when not hidden\n- [hideLabel]: boolean| undefined - Flag, if true, will cause the label to be hidden\n- [fallback]: undefined | false | '' - One of 3 values, `undefined` (the default), `false` or an empty string\n\n- #### Returns\n\n- string | boolean | undefined: `fallback` if `hideLabel` is true, otherwise `label`\n\n### localToUTC()\n\nConverts a local Date string into a UTC date string\n\n#### Parameters\n\n- dateString: string - The string representation of a date as accepted by the `Date()` constructor\n\n#### Returns\n\n- string | undefined: A UTC date string if `dateString` is truthy, otherwise undefined\n\n### lookupFromFormContext<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, R = unknown>()\n\nGiven a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`.\nThis might be contained within the lookup map in the formContext.\nIf no such value exists, return the `fallback` value.\n\n#### Parameters\n\n- regOrFc: Registry<T, S, F> | Registry<T, S, F>['formContext'] - The @rjsf registry or form context in which the lookup will occur\n- toLookup: string - The name of the field in the lookup map in the form context to get the value for\n- [fallback]: R - The fallback value to use if the form context does not contain a value for `toLookup`\n\n#### Returns\n\n- R: The value associated with `toLookup` in the form context or `fallback`\n\n### mergeDefaultsWithFormData<T = any>()\n\nMerges the `defaults` object of type `T` into the `formData` of type `T`\n\nWhen merging defaults and form data, we want to merge in this specific way:\n\n- objects are deeply merged\n- arrays are merged in such a way that:\n - when the array is set in form data, only array entries set in form data are deeply merged; additional entries from the defaults are ignored unless `mergeExtraArrayDefaults` is true, in which case the extras are appended onto the end of the form data\n - when the array is not set in form data, the default is copied over\n- scalars are overwritten/set by form data\n\n#### Parameters\n\n- [defaults]: T | undefined - The defaults to merge\n- [formData]: T | undefined - The form data into which the defaults will be merged\n- [mergeExtraArrayDefaults=false]: boolean - If true, any additional default array entries are appended onto the formData\n- [defaultSupercedesUndefined=false]: boolean - If true, an explicit undefined value will be overwritten by the default value\n\n#### Returns\n\n- T | undefined: The resulting merged form data with defaults\n\n### mergeObjects()\n\nRecursively merge deeply nested objects.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n- [concatArrays=false]: boolean | \"preventDuplicates\" - Optional flag that, when true, will cause arrays to be concatenated. Use \"preventDuplicates\" to merge arrays in a manner that prevents any duplicate entries from being merged.\n\n#### Returns\n\n@returns - A new object that is the merge of the two given objects\n\n### mergeSchemas()\n\nRecursively merge deeply nested schemas.\nThe difference between mergeSchemas and mergeObjects is that mergeSchemas only concats arrays for values under the 'required' keyword, and when it does, it doesn't include duplicate values. NOTE: Uses shallow comparison for the duplicate checking.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n\n#### Returns\n\n- GenericObjectType: The merged schema object\n\n### optionalControlsId()\n\nReturn a consistent `id` for the optional data controls `element`\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- element: 'Add' | 'Msg' | 'Remove' - The element type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the optional data controls element from the given `id` and `element` type\n\n### optionId()\n\nReturn a consistent `id` for the `optionIndex`s of a `Radio` or `Checkboxes` widget\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- optionIndex: number - The index of the option for which the id is desired\n\n#### Returns\n\n- string: An id for the option index based on the parent `id`\n\n### noop()\n\nA function that does nothing and returns `undefined`, useful as a placeholder for an optional callback or as the implementation of a mocked function.\n\n#### Returns\n\n- void\n\n### optionsList<T = any, S extends StrictRJSFSchema = RJSFSchema,F extends FormContextType = any>()\n\nGets the list of options from the `schema`. If the schema has an enum list, then those enum values are returned.\nThe labels for the options will be extracted from `ui:enumNames` in the `uiSchema` if provided, otherwise the label will be the same as the `value`. If `ui:enumOrder` is provided, the options will be reordered accordingly.\n\nIf the schema has a `oneOf` or `anyOf`, then the value is the list of either:\n\n-\n- The `const` values from the schema if present\n- If the schema has a discriminator and the label using either the `schema.title` or the value. If a `uiSchema` is\n provided, and it has the `ui:enumNames` matched with `enum` or it has an associated `oneOf` or `anyOf` with a list of\n objects containing `ui:title` then the UI schema values will replace the values from the schema.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the options list\n- [uiSchema]: UiSchema<T, S, F> - The optional uiSchema from which to get alternate labels for the options\n\n#### Returns\n\n- \\{ schema?: S, label: string, value: any }: The list of options from the schema\n\n### orderProperties()\n\nGiven a list of `properties` and an `order` list, returns a list that contains the `properties` ordered correctly.\nIf `order` is not an array, then the untouched `properties` list is returned.\nOtherwise `properties` is ordered per the `order` list.\nIf `order` contains a '_' then any `properties` that are not mentioned explicity in `order` will be places in the location of the `_`.\n\n#### Parameters\n\n- properties: string[] - The list of property keys to be ordered\n- order: string[] - An array of property keys to be ordered first, with an optional '\\*' property\n\n#### Returns\n\n- string[]: A list with the `properties` ordered\n\n#### Throws\n\n- Error when the properties cannot be ordered correctly\n\n### pad()\n\nReturns a string representation of the `num` that is padded with leading \"0\"s if necessary\n\n#### Parameters\n\n- num: number - The number to pad\n- width: number - The width of the string at which no lead padding is necessary\n\n#### Returns\n\n- string: The number converted to a string with leading zero padding if the number of digits is less than `width`\n\n### parseDateString()\n\nParses the `dateString` into a `DateObject`, including the time information when `includeTime` is true\n\n#### Parameters\n\n- dateString: string - The date string to parse into a DateObject\n- [includeTime=true]: boolean - Optional flag, if false, will not include the time data into the object\n\n#### Returns\n\n- DateObject: The date string converted to a `DateObject`\n\n#### Throws\n\n- Error when the date cannot be parsed from the string\n\n### rangeSpec<S extends StrictRJSFSchema = RJSFSchema>()\n\nExtracts the range spec information `{ step?: number, min?: number, max?: number }` that can be spread onto an HTML input from the range analog in the schema `{ multipleOf?: number, minimum?: number, maximum?: number }`.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the range spec\n\n#### Returns\n\n- RangeSpecType: A range specification from the schema\n\n### replaceStringParameters()\n\nPotentially substitutes all replaceable parameters with the associated value(s) from the `params` if available.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `inputString` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\n- inputString: string - The string which will be potentially updated with replacement parameters\n- [params]: string[] - The optional list of replaceable parameter values to substitute into the english string\n\n#### Returns\n\n- string: The updated string with any replacement specifiers replaced\n\n### resolveDefaultWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nComputes the widget name a field falls back to when no `ui:widget` is specified, along with the `enumOptions` (if any) that back a `select`-like fallback.\nThe default is `select` when `schema` has enumerable options, the schema's `format` when a widget is registered for it, or `text` otherwise.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- uiSchema: UiSchema<T, S, F> | undefined - The uiSchema for the field\n- schemaUtils: SchemaUtilsType<T, S, F> - The `SchemaUtilsType` used to detect whether `schema` has enumerable options\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- \\{ defaultWidget: string, enumOptions: EnumOptionsType<S>[] | undefined }: The default widget name and the `enumOptions`, if any, computed along the way\n\n### resolveUiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nResolves the uiSchema for a given schema, considering `ui:definitions` stored in the registry.\nCalled at runtime for each field. When the schema contains a `$ref`, looks up the corresponding uiSchema definition from `registry.uiSchemaDefinitions` and merges it with local overrides.\nFor schemas with `oneOf`/`anyOf` branches, also populates `uiSchema[keyword][i]` for branches whose `$ref` matches a definition, so `MultiSchemaField` can read dropdown option titles.\n\nResolution order (later sources override earlier):\n\n1. `ui:definitions[$ref]` - base definition from registry\n2. `localUiSchema` - local overrides at current path\n\n#### Parameters\n\n- schema: S - The JSON schema (may contain `$ref` or `RJSF_REF_KEY`)\n- localUiSchema: UiSchema<T, S, F> | undefined - The uiSchema at the current path (local overrides)\n- registry: Registry<T, S, F> - The registry containing `uiSchemaDefinitions`\n\n#### Returns\n\n- UiSchema<T, S, F>: The resolved uiSchema with definitions merged in\n\n### schemaHasNestedConditional<S extends StrictRJSFSchema = RJSFSchema>()\n\nRecursively checks whether the given raw `schema` contains a `dependencies` or `if` keyword anywhere below its top level, e.g. inside a nested object's `properties`, a `$ref`, an array's tuple `items`, or a `patternProperties` entry.\n`retrieveSchema()` only resolves the `dependencies`/`if` declared directly on the schema it is given, so a root-level retrieved schema never reflects a conditional branch switch that happens deeper in the tree.\n`Form` uses this to detect when a comparison of root-level retrieved schemas can't be trusted to decide whether sanitization is needed.\n\n#### Parameters\n\n- schema: S | boolean | undefined - The raw schema node to search\n- rootSchema: S - The root schema, used to resolve any `$ref`s encountered while searching\n- atRoot: boolean = true - Whether `schema` is the root of the search, whose own `dependencies`/`if` don't count\n- seenRefs: string[] = [] - The `$ref`s already resolved along this branch of the search, to guard against cycles\n\n#### Returns\n\n- boolean: True if a `dependencies` or `if` keyword exists below the root of the schema\n\n### schemaRequiresTrueValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nCheck to see if a `schema` specifies that a value must be true. This h\n\n","packages/docs/docs/api-reference/validator-ajv8.md":"# @rjsf/validator-ajv8 APIs\n\nIn RJSF version 6, the original, embedded AJV 6 validator implementation from earlier versions was removed in favor of the `@rjsf/validator-ajv8` package.\n`@rjsf/validator-ajv8` uses the AJV 8 package, including adding support for using precompiled validators.\nBelow are the exported API functions that are provided by this package.\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Types\n\nThere are a few Typescript types that are exported by `@rjsf/validator-ajv8` in support of the APIs.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ajv8/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional meta schemas the validator can access\n - `customFormats`: Additional custom format validators\n - `ajvOptionsOverrides`: Config overrides passed to the AJV constructor\n - `ajvFormatOptions`: Options for `ajv-formats`; pass `false` to disable format support entirely\n - `AjvClass`: The AJV class to construct (e.g. `Ajv2019`, `Ajv2020`)\n - `extenderFn`: A function called to extend the AJV instance (e.g. `ajvErrors()`)\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n\n#### Returns\n\n- AJV8Validator<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nThe function used to compile a schema into an output file in the form that allows it to be used as a precompiled validator.\nThe main reasons for using a precompiled validator is reducing code size, improving validation speed and, most importantly, avoiding dynamic code compilation when prohibited by a browser's Content Security Policy.\nFor more information about AJV code compilation see: https://ajv.js.org/standalone.html\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validators functions\n- output: string - The name of the file into which the precompiled validator functions will be generated\n- [options={}]: CustomValidatorOptionsType - The set of `CustomValidatorOptionsType` information used to alter the AJV validator used for compiling the schema. They are the same options that are passed to the `customizeValidator()` function in order to modify the behavior of the regular AJV-based validator.\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n","packages/docs/docs/api-reference/validator-ata.md":"# @rjsf/validator-ata APIs\n\n`@rjsf/validator-ata` is an alternative to `@rjsf/validator-ajv8`, backed by [`ata-validator`](https://www.npmjs.com/package/ata-validator) instead of AJV.\nThe public surface mirrors the AJV package, so swapping the import is enough for the form to keep working: `customizeValidator()`, `ValidatorType`, custom formats, `transformErrors`, `customValidate`, and `suppressDuplicateFiltering` all behave the same.\n\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options (`AjvClass`, `ajvFormatOptions`, `ajvOptionsOverrides`) are not accepted. The closest equivalent is `ataOptionsOverrides`, which is spread on top of the default `ata-validator` options.\n- The `ata-validator` format set is always installed, so there is no opt-in flag for formats.\n- `ata-validator`'s error params are frozen, so the pre-quote pass that `validator-ajv8` runs for `ajv-i18n` is unnecessary. Localizers that mutate `message` in place still work as-is.\n- Precompiled validators (`compileSchemaValidators` / `createPrecompiledValidator`) are supported. `ata-validator`'s `bundleStandalone` output is adapted into the validator function map the precompiled consumer expects. Error output matches the non-precompiled validator, including per-field errors for schema-valued `additionalProperties` (with `ata-validator` `>= 0.17.4`); an invalid `anyOf` reports a single error on the field, the same as the runtime path. One constraint carries over from the standalone (AOT) path: custom formats must be a RegExp or pre-anchored string pattern, since a function checker cannot be serialized into the bundle and is rejected at compile time.\n\n## Types\n\nThere are a few TypeScript types that are exported by `@rjsf/validator-ata` in support of the APIs. These types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ata/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional schemas registered for cross-schema `$ref` resolution\n - `customFormats`: Custom format checkers; values can be functions, RegExps, or pre-anchored regex source strings\n - `ataOptionsOverrides`: Overrides spread on top of the default `ata-validator` options (e.g. `coerceTypes`, `removeAdditional`, `verbose`, `abortEarly`)\n - `extenderFn`: A function called against the constructed `Validator` instance for additional setup; returning a different instance is supported\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of `ata-validator` `ValidationError`s after running the form validation\n\n#### Returns\n\n- ValidatorType<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nCompiles a schema into an output file that can be loaded later as a precompiled validator.\nThe main reasons for using a precompiled validator are reducing code size, improving startup time by skipping schema compilation, and avoiding dynamic code generation when a browser's Content Security Policy forbids it.\nUnder the hood this calls `ata-validator`'s `bundleStandalone` and wraps the result in the map the precompiled consumer expects.\n\n> NOTE: Custom formats passed through `options.customFormats` must be a RegExp or a pre-anchored string pattern. A function checker cannot be serialized into the standalone bundle and is rejected at compile time.\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validator functions\n- output: string - The name of the file into which the precompiled validator functions are generated\n- [options={}]: CustomValidatorOptionsType - The `CustomValidatorOptionsType` options accepted by `customizeValidator()`, with limits: `extenderFn`, extra schemas without an `$id` and the `ataOptionsOverrides` keys `coerceTypes`, `removeAdditional` and `keywords` cannot be carried into the generated file and are ignored with a warning, the generated file never fills in `default` values, and `suppressDuplicateFiltering` belongs to `createPrecompiledValidator()`. See the precompiled section of `usage/validation.md`\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize the list of `ata-validator` `ValidationError`s after running the form validation\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for the full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n","packages/docs/docs/api-reference/validator-cfworker.md":"# @rjsf/validator-cfworker APIs\n\n`@rjsf/validator-cfworker` is an additional, eval-free validator option for CSP-constrained applications. It is backed by [`@cfworker/json-schema`](https://github.com/cfworker/cfworker/tree/main/packages/json-schema), interprets schemas without `eval` or `new Function`, and defaults to JSON Schema draft 2020-12.\n\nIt is not an AJV replacement. See the package [README](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/validator-cfworker) for the unsupported-keyword matrix and current upstream-state notes.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options and extensions such as `AjvClass`, `$data`, `discriminator`, and `ajv-errors`'s `errorMessage` are not supported.\n- `$dynamicRef` and `$dynamicAnchor` are not currently supported by the underlying engine.\n- Error messages differ from AJV, and there is no `ajv-i18n` localizer equivalent. Use `transformErrors` to customize messages.\n- Precompiled-validator mode is not part of this initial package.\n- The wrapper normalizes `undefined` form-data values before validation and caches validators by schema id to make repeated RJSF `isValid()` calls safe.\n\n## Types\n\nThe package exports `CustomValidatorOptionsType`, `CFWorkerValidationError`, `CFWorkerFormatChecker`, and `SuppressDuplicateFilteringType` from [`src/types.ts`](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-cfworker/src/types.ts).\n\n## APIs\n\n### `customizeValidator()`\n\nCreates a `ValidatorType` backed by `@cfworker/json-schema`.\n\n#### Parameters\n\n- `options.additionalMetaSchemas`: additional schemas registered for cross-schema `$ref` resolution\n- `options.customFormats`: format checkers expressed as functions, regular expressions, or regular-expression source strings\n- `options.draft`: `'4'`, `'7'`, `'2019-09'`, or `'2020-12'`; defaults to `'2020-12'`\n- `options.extenderFn`: hook called with every newly constructed engine validator\n- `options.shortCircuit`: stop at the first error; defaults to `false`\n- `options.suppressDuplicateFiltering`: `'none'`, `'anyOf'`, `'oneOf'`, or `'all'`\n\n#### Returns\n\n- `ValidatorType`: the customized validator implementation\n\n```ts\nimport { customizeValidator } from '@rjsf/validator-cfworker';\n\nconst validator = customizeValidator({\n draft: '2020-12',\n customFormats: { slug: /^[a-z0-9-]+$/ },\n});\n```\n","packages/docs/docs/contributing.md":"# Contributing\n\n## Development server\n\nWe are using `Vite` to power our `playground`, which caches all the built `@rjsf/*` distributions.\nIn order to test the `playground` locally after a new clone or fresh pull from `main`, run the following from the root directory of the monorepo:\n\n```bash\npnpm install\npnpm run build\ncd packages/playground\npnpm start\n```\n\nThis will start the live development server showcasing components at [localhost:8080](http://localhost:8080).\n\nWhenever you make changes to source code, stop the running playground and return to the root directory and rerun `pnpm run build`.\nThanks to `nx` caching, this should only rebuild what is necessary.\nAfter the build is complete, return to the root of the `playground` and restart the server via `pnpm start`.\n\n### First time step\n\nIf this is the first time you have cloned the repo, run the `pnpm run prepare` script that will set up `husky` to provide a git precommit hook that will format and lint any code you have added to a PR.\n\n### Optional development process\n\nWith the large number of packages, sometimes running `pnpm run build` or `pnpm start` from the root directory will overwhelm an underpowered computer.\nIf that is the situation for you, you can instead use `pnpm run build-serial` to build the packages one at a time instead of all at once.\nAlso, if you are only working on one package, you can `pnpm run build` and `pnpm run test` from within the subdirectory.\nFinally, you can simply `pnpm start` inside of the `playground` directory to test changes if you have already built all of your packages, without needing to watch all of the packages via the root directory `pnpm start`.\n\n### Troubleshooting build failures\n\nSometimes your local builds fail and you can't figure out why. This is most likely to happen after rebase to `main` due\nto `package.json` changes upstream. There are two commands you can use to (hopefully) get your environment back to a\nworking state. Try running the following two commands:\n\n```bash\npnpm run refresh-node-modules\npnpm run clean-build\n```\n\nThe first command will delete all of the `node_modules` directories in the environment and then rerun `pnpm install`.\nThe second command cleans up the typescript build cache files before retrying the build.\n\nWorst case scenario when neither of those commands work, try running `pnpm run nuke-build-env` and then rerun the two commands.\n\n## Cloud builds\n\nWhen building in environments with limited memory, such as Netlify, it's recommended to use `pnpm run build-serial` that builds the packages serially.\n\n## Coding style\n\nAll the JavaScript/Typescript code in this project conforms to the [prettier](https://github.com/prettier/prettier) coding style.\nCode is automatically prettified upon commit using precommit hooks, assuming you followed the `First time step` above.\n\nYou can also run `pnpm cs-format` within any package directory you are changing.\n\n## Documentation\n\nWe use [Docusaurus](https://docusaurus.io/) to build our documentation. To run documentation locally, run:\n\n```bash\ncd packages/docs\npnpm start\n```\n\nDocumentation will be served on [localhost:3000](http://localhost:3000).\n\n## Tests\n\nYou can run all tests from the root directory OR from `packages` subdirectory using the following command:\n\n```bash\npnpm run test\n```\n\n### Snapshot testing\n\nAll the themes, including `core` use snapshot testing (NOTE: `core` also has extensive non-snapshot tests).\nThe source-code of these snapshot tests reside in the `core` package in the `testSnap` directory and are shared with all the themes.\nIn order to support the various themes, the code for the tests are actually functions that take two parameters:\n\n- `Form`: ComponentType<FormProps> - The component from the theme implementation\n- `[customOptions]`: \\{ [key: string]: TestRendererOptions } - an optional map of `react-test-renderer` `TestRendererOptions` implementations that some themes need to be able properly run\n\nThere are functions in the `testSnap` directory: `arrayTests`, `formTests` and `objectTests`, each with its own definition of `customOptions`\n\nEach theme will basically run these functions by creating a `Xxx.test.tsx` file (where `Xxx` is `Array`, `Form` or `Object`) that looks like the following:\n\n```tsx\nimport { arrayTests } from '@rjsf/snapshot-tests'; // OR\n// import { formTests } from '@rjsf/snapshot-tests';\n// import { objectTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\narrayTests(Form); // OR\n// formTests(Form);\n// objectTests(Form);\n```\n\nAnytime you add a new feature, be sure to update the appropriate `xxxTests()` function in the `testSnap` directory and do `pnpm run test` from the root directory to update all the snapshots.\nIf you add a theme-only feature, it is ok to update the appropriate `Xxx.test.tsx` file to add (or update) the theme-specific `describe()` block.\nFor example:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { arrayTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\nformTests(Form);\n\ndescribe('Theme specific tests', () => {\n it('test a theme-specific option', () => {\n const schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n };\n const uiSchema: UiSchema = {\n // Enable the theme specific feature\n };\n const tree = renderer.create().toJSON();\n expect(tree).toMatchSnapshot();\n });\n});\n```\n\nSee the `antd` `Form.test.tsx` for a specific example of this.\n\n### Code coverage\n\nCode coverage reports are currently available only for the `@rjsf/core` theme package.\nThey are generated using [nyc](https://github.com/istanbuljs/nyc) each time the `pnpm test-coverage` script is run.\nThe full report can be seen by opening `./coverage/lcov-report/index.html`.\n\n#### Utils and validator-ajv8 code coverage\n\n100% code coverage is required by the `@rjsf/utils` and `@rjsf/validator-ajv8` tests.\nIf you make changes to those libraries, you will have to maintain that coverage, otherwise the tests will fail.\n\n> NOTE: All three of these directories share the same tests for verifying `validator` based APIs. See the documentation in the `getTestValidator()` functions for more information.\n\n## Releasing\n\nTo release, go to the main branch (NOT a fork) and then create a new branch with the version number (with an `rc` prefix instead of `v`).\nFor instance if you are about to create the new `6.100.10` branch, then you would run the following commands:\n\n```bash\ngit checkout -b rc6.100.10\npnpm exec nx release version --git-tag\ngit commit -m \"Releasing 6.100.10\"\ngit push\npnpm run update-version-tags\n```\n\nMake sure you use [semver](https://semver.org/) for version numbering when selecting the version.\nThe `pnpm exec nx release version --git-tag` command will update the `package*.json` files and create a new version tag.\nCommitting and pushing the branch will allow you to create the PR on GitHub.\nThe `pnpm run update-version-tags` will push the tags up to GitHub.\n\nThen, make a PR to main. Merge the PR into main -- make sure you use \"merge commit\", not squash and merge, so that\nthe original commit where the tag was based on is still present in the main branch.\n\nThen, create a release in the GitHub \"Releases\" tab, select the new tag that you have added,\nand add a description of the changes in the new release. You can copy\nthe latest changelog entry in `CHANGELOG.md` to make the release notes, and update as necessary.\n\nThis will trigger a GitHub Actions pipeline that will build and publish all packages to npm.\n\nThe package is published through an automation token belonging to the\n[rjsf-bot](https://www.npmjs.com/~rjsf-bot) user on npm. This token\nis stored as the `NPM_TOKEN` secret on GitHub Actions.\n\n### Releasing docs\n\nDocs are automatically published to GitHub Pages when the `main` branch is updated.\n\nWe are currently in the process of automatically configuring versionable documentation on our new docs site.\n\n### Releasing the playground\n\nThe playground automatically gets deployed from GitHub Pages.\n\nIf you need to manually publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/), though, run:\n\n```bash\ncd packages/playground\npnpm run publish-to-gh-pages\n```\n\n### Releasing a new package\n\nPublishing a new `@rjsf/*` package requires additional setup. The package must first be published locally, then in the NPM web app, you must set up \"Trusted Publishing\" so future releases can be published via GitHub Actions. The steps to accomplish this are:\n\n1. Create the new release as described above. Existing packages will be published, but the jobs to publish new package(s) will fail.\n2. Locally, check out the release tag (e.g. `git checkout v6.8.0`). You may need to `git fetch --tags`. Make sure your `git status` is clean.\n3. `cd packages/new-package`\n4. `pnpm login` (login to an account with RJSF publishing privileges)\n5. `pnpm publish --no-git-checks`.\n\nThe new package will be released. Then, set up Trusted Publishing:\n\n1. Navigate to the new package in NPM (e.g. `https://www.npmjs.com/package/@rjsf/new-package`)\n2. Go to Settings -> Trusted Publisher -> GitHub Actions\n3. Set up the fields to match an existing package (e.g. look at `@rjsf/core`).\n 1. Organization or user: `rjsf-team`\n 2. Repository: `react-jsonschema-form`\n 3. Workflow filename: `release.yml`\n 4. Allow `npm publish`\n","packages/docs/docs/json-schema/arrays.md":"# Arrays\n\nArrays are defined with a type equal to `array`, and array items' schemas are specified in the `items` keyword.\n\n## Arrays of a single field\n\nArrays of a single field type can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Arrays of objects\n\nArrays of objects can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema = {\n items: {\n 'ui:widget': 'textarea',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n> NOTE: The `items` property in `uiSchema` can also accept a function for dynamic UI schema generation based on array item data. See [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) for advanced use cases.\n\n## The `additionalItems` keyword\n\nThe `additionalItems` keyword allows the user to add additional items of a given schema. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n additionalItems: {\n type: 'boolean',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Array item uiSchema options\n\nAny of these options can be set globally if they are contained within the `ui:globalOptions` block.\nThey can also be overridden on a per-field basis inside a `ui:options` block as shown below.\n\n### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n orderable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n addable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `copyable` option\n\nA copy button is **NOT** shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance.\nYou can turn this **ON** with the `copyable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n copyable: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n removable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Multiple-choice list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. There are two alternative widgets for picking multiple elements from a list of choices. Typically, this applies when a schema has an `enum` list for the `items` property of an `array` field, and the `uniqueItems` property set to `true`.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Custom widgets\n\nIn addition to [ArrayFieldTemplate](../advanced-customization/custom-templates.md#arrayfieldtemplate) you use your own widget by providing it to the uiSchema with the property of `ui:widget`.\n\nExample:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSelectComponent = (props) => {\n return (\n \n );\n};\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'CustomSelect',\n};\n\nconst widgets = {\n CustomSelect: CustomSelectComponent,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## Specifying the minimum or maximum number of items\n\nNote that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also specify the maximum number of items in an array using the `maxItems` property.\n\n## Inline checkboxes\n\nBy default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n 'ui:options': {\n inline: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/json-schema/definitions.md":"# Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which allows you to re-use parts of your schema:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n state: { type: 'string' },\n },\n required: ['street_address', 'city', 'state'],\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nNote that this library only supports local definition referencing. The value in the `$ref` keyword should be a [JSON Pointer](https://tools.ietf.org/html/rfc6901) in URI fragment identifier format.\n\n## uiSchema for Schema Definitions\n\nTo customize the UI for schemas referenced via `$ref`, use the `ui:definitions` property in your uiSchema. This works for both reused and recursive schemas.\n\nSee [ui:definitions](../api-reference/uiSchema.md#uidefinitions) for full details and more examples.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' },\n },\n },\n },\n },\n type: 'object',\n properties: {\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Node name' },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/json-schema/dependencies.md":"# Dependencies\n\nreact-jsonschema-form supports the `dependencies` keyword from an earlier draft of JSON Schema (note that this is not part of the latest JSON Schema spec, though). Dependencies can be used to create dynamic schemas that change fields based on what data is entered.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined, making them both required if either is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n billing_address: ['credit_card'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))_\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: {\n properties: {\n billing_address: { type: 'string' },\n },\n required: ['billing_address'],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))_\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Person',\n type: 'object',\n properties: {\n 'Do you have any pets?': {\n type: 'string',\n enum: ['No', 'Yes: One', 'Yes: More than one'],\n default: 'No',\n },\n },\n required: ['Do you have any pets?'],\n dependencies: {\n 'Do you have any pets?': {\n oneOf: [\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['No'],\n },\n },\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: One'],\n },\n 'How old is your pet?': {\n type: 'number',\n },\n },\n required: ['How old is your pet?'],\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: More than one'],\n },\n 'Do you want to get rid of any?': {\n type: 'boolean',\n },\n },\n required: ['Do you want to get rid of any?'],\n },\n ],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.\n","packages/docs/docs/json-schema/objects.md":"# Objects\n\n## Object properties\n\nObjects are defined with a type equal to `object` and properties specified in the `properties` keyword.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Required properties\n\nYou can specify which properties are required using the `required` attribute:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n required: ['name'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Specifying property order\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'string' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', 'foo'],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', '*'],\n};\n```\n\n## Additional and pattern properties\n\nThe `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n additionalProperties: {\n type: 'number',\n enum: [1, 2, 3],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this way, an add button for new properties is shown by default.\n\nYou can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.\n\nThe `patternProperties` keyword allows the user to add properties with names that match one or more of the specified regular expressions\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n patternProperties: {\n '^foo+$': {\n type: 'number',\n enum: [1, 2, 3],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nAlso in this case, an add button for new properties is shown by default.\n\n### `expandable` option\n\nYou can turn support for `additionalProperties` and `patternProperties` off with the `expandable` option in `uiSchema`:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n expandable: false,\n },\n};\n```\n","packages/docs/docs/json-schema/oneof.md":"# oneOf, anyOf, and allOf\n\nreact-jsonschema-form supports custom widgets for oneOf, anyOf, and allOf.\n\n- A schema with `oneOf` is valid if _exactly one_ of the subschemas is valid.\n- A schema with `anyOf` is valid if _at least one_ of the subschemas is valid.\n- A schema with `allOf` is valid if _all_ of the subschemas are valid.\n\n## oneOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n ipsum: {\n type: 'string',\n },\n },\n required: ['ipsum'],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## anyOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n lorem: {\n type: 'string',\n },\n ipsum: {\n type: 'string',\n },\n },\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## allOf\n\nWhen `allOf` is specified in a schema, react-jsonschema-form uses the [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) library to merge the specified subschemas to create a combined subschema that is valid. For example, the below schema evaluates to a combined subschema of `{type: \"boolean\"}`:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Field',\n allOf: [\n {\n type: ['string', 'boolean'],\n },\n {\n type: 'boolean',\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/json-schema/single.md":"# Single fields\n\nThe simplest example of a JSON Schema contains only a single field. The field type is determined by the `type` parameter.\n\n## Field types\n\nThe base field types in JSON Schema include:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `null`\n\nHere is an example of a string field:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Titles and descriptions\n\nFields can have titles and descriptions specified by the `title` keyword in the schema and the `description` keyword in the schema, respectively. These two can also be overridden by the `ui:title` and `ui:description` keywords in the uiSchema.\n\nDescription can render markdown. This feature is disabled by default. It needs to be enabled by the `ui:enableMarkdownInDescription` keyword and setting to `true`. Read more about markdown options in the `markdown-to-jsx` official [docs](https://markdown-to-jsx.quantizor.dev/).\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My form',\n description: 'My description',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Deprecated fields\n\nThe JSON Schema `deprecated` keyword can be used to indicate that a field is no longer supported.\n\nThe `deprecated` keyword is a JSON Schema Draft 2019-09 feature. You may need to configure your schema validator to properly recognize it. See the [Validation](../usage/validation.md#ajvclass) documentation for more details.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n deprecated: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, RJSF will append ` (deprecated)` to the field label. You can customize this behavior using the `deprecatedHandling` option in the uiSchema. See [deprecatedHandling](../api-reference/uiSchema.md#deprecatedhandling) for more details.\n\n## Enumerated values\n\nAll base schema types support the `enum` attribute, which restricts the user to select among a list of options. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom labels for `enum` fields\n\nJSON Schema supports the following approaches to enumerations using `oneOf`/`anyOf`; react-jsonschema-form supports it as well.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n anyOf: [\n {\n type: 'number',\n title: 'one',\n enum: [1],\n },\n {\n type: 'number',\n title: 'two',\n enum: [2],\n },\n {\n type: 'number',\n title: 'three',\n enum: [3],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n oneOf: [\n { const: 1, title: 'one' },\n { const: 2, title: 'two' },\n { const: 3, title: 'three' },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you use `enum` in your JSON Schema, you may instead specify `ui:enumNames` in your `uiSchema`, which RJSF can use to label an enumeration. `ui:enumNames` can be an array (matched by index) or a map (matched by value):\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Ordering `enum` fields\n\nTo control the display order of enum options, use `ui:enumOrder`. Use `'*'` to represent all remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Disabled attribute for `enum` fields\n\nTo disable an option, use the `ui:enumDisabled` property in the uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n enum: [true, false],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': [true],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Nullable types\n\nJSON Schema supports specifying multiple types in an array; however, react-jsonschema-form only supports a restricted subset of this -- nullable types, in which an element is either a given type or equal to null.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: ['string', 'null'],\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/migration-guides/v2.x upgrade guide.md":"# 2.x Upgrade Guide\n\n## Changes from v1 -> v2\n\n### Breaking changes\n\n- We now officially support the @rjsf/material-ui theme. We use a monorepo with Lerna and have published two packages (@rjsf/core and @rjsf/material-ui) with this version number. Note that react-jsonschema-form has been renamed to @rjsf/core ([#1642](https://github.com/rjsf-team/react-jsonschema-form/pull/1642))\n- Combine all themes into a single playground ([#1539](https://github.com/rjsf-team/react-jsonschema-form/pull/1539), [#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607), [#1623](https://github.com/rjsf-team/react-jsonschema-form/pull/1623))\n- Remove ui:order console warning about extraneous properties ([#1508](https://github.com/rjsf-team/react-jsonschema-form/pull/1508))\n- Capitalized Yes and No defaults ([#1395](https://github.com/rjsf-team/react-jsonschema-form/pull/1395))\n- Fix id of oneof and anyof select ([#1212](https://github.com/rjsf-team/react-jsonschema-form/pull/1212)). The oneof select id is now suffixed by \\_\\_oneof_select and the anyof select by \\_\\_anyof_select.\n- React 16+ is now a peer dependency ([#1408](https://github.com/rjsf-team/react-jsonschema-form/pull/1408))\n- We no longer actively support Node version < 8 ([#1462](https://github.com/rjsf-team/react-jsonschema-form/pull/1462))\n- Removed setState, setImmediate, safeRenderCompletion helpers/hacks ([#1454](https://github.com/rjsf-team/react-jsonschema-form/pull/1454), [#1720](https://github.com/rjsf-team/react-jsonschema-form/pull/1720))\n- Inject defaults in arrays ([#1499](https://github.com/rjsf-team/react-jsonschema-form/pull/1499))\n\n### Features\n\n- Add material-ui theme in the main repo ([#1420](https://github.com/rjsf-team/react-jsonschema-form/pull/1420)) (note: has not been fully integrated yet -- this will be fully integrated when we publish multiple packages with lerna - [#1501](https://github.com/rjsf-team/react-jsonschema-form/pull/1501))\n- Add extraErrors prop for async validation ([#1444](https://github.com/rjsf-team/react-jsonschema-form/pull/1444))\n- Add support for overriding UnsupportedField ([#1660](https://github.com/rjsf-team/react-jsonschema-form/pull/1660))\n\n### Fixes\n\n- Fix issue with false as formData on radio components ([#1438](https://github.com/rjsf-team/react-jsonschema-form/pull/1438))\n- Security patches ([#1458](https://github.com/rjsf-team/react-jsonschema-form/pull/1458), [#1459](https://github.com/rjsf-team/react-jsonschema-form/pull/1459))\n- Memo components in custom widgets and fields. ([#1447](https://github.com/rjsf-team/react-jsonschema-form/pull/1447))\n- Introduce Form autoComplete attribute and deprecate autocomplete ([#1483](https://github.com/rjsf-team/react-jsonschema-form/pull/1483))\n- Rewrite mergeSchemas to fix schema dependencies merging ([#1476](https://github.com/rjsf-team/react-jsonschema-form/pull/1476))\n- Update arrays correctly when changing index ([#1485](https://github.com/rjsf-team/react-jsonschema-form/pull/1485))\n- Update anyOf schema to correctly update items in an array ([#1491](https://github.com/rjsf-team/react-jsonschema-form/pull/1491))\n- Update schema to re-render when idschema changes ([#1493](https://github.com/rjsf-team/react-jsonschema-form/pull/1493))\n- Make sure BooleanField supports an overridable DescriptionField ([#1594](https://github.com/rjsf-team/react-jsonschema-form/pull/1594))\n- Export typings ([#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607))\n","packages/docs/docs/migration-guides/v3.x upgrade guide.md":"# 3.x Upgrade Guide\n\n## Breaking changes\n\n### Node support\n\nDropped support for Node 8, 9, 10. Minimum supported version of Node.js is now 12.\n\n### Dereferenced schemas for `anyOf`/`allOf` options\n\n`MultiSchemaField`'s `options` interface is different. Before, an option could include a `$ref`. Now, any option with a reference will be resolved/dereferenced when given as props for `MultiSchemaField`.\n\n### Help field IDs\n\nIDs for [Help fields](../api-reference/uiSchema.md#help) are now suffixed by `__help` so that the IDs are unique. Previously, their IDs would be nonexistent or the same as the fields that they were describing.\n\n### Bring your own polyfills\n\ncore-js@2 has been removed from @rjsf/core. See more about [the rationale here](https://github.com/rjsf-team/react-jsonschema-form/pull/2211#issue-563700810).\n\nIf you're using a framework like [Create React App](https://create-react-app.dev/docs/supported-browsers-features#supported-browsers), [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/browser-support/), [Next.js](https://nextjs.org/docs/basic-features/supported-browsers-features), or transpiling code through something like `@babel/preset-env`, polyfills are already included there and you won't have to do anything.\n\nIf you were directly depending on @rjsf/core's @babel/runtime pulling in core-js@2, just `npm install core-js` and using a side effectful import at the top of your entry point (`import 'core-js'`) might be enough.\n\nFor a slightly more elaborate setup, [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#how-does-it-work) is probably a good second choice.\n\nFrom `@babel/preset-env`'s docs\n\n> We leverage [`browserslist`, `compat-table`, and `electron-to-chromium`] to maintain mappings of which version of our supported target environments gained support of a JavaScript syntax or browser feature, as well as a mapping of those syntaxes and features to Babel transform plugins and core-js polyfills.\n","packages/docs/docs/migration-guides/v4.x upgrade guide.md":"# 4.x Upgrade Guide\n\n## Breaking changes\n\n### React version\n\nNo longer actively supporting React version < 16.3. The minimum supported version of React is now 16.3. [Discussion can be found here](https://github.com/rjsf-team/react-jsonschema-form/pull/2605#discussion_r792685354)\n\n### @rjsf/material-ui package - Minimum version of material-ui 4\n\nIf you are using the material-ui 4 theme, @material-ui/core and @material-ui/icons packages should be updated to the latest versions. The minimum versions supported for @material-ui/core and @material-ui/icons are 4.12.0 and 4.11.1 respectively. This change is required for [support for the material-ui version 5 theme](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/material-ui)\n","packages/docs/docs/migration-guides/v5.x upgrade guide.md":"# 5.x Upgrade Guide\n\n## Breaking changes\n\nThere were several significant **breaking changes** in RJSF version 5 that were necessary in order to support the following new features:\n\n- Schema validation was decoupled from `@rjsf/core` to resolve issue [#2693](https://github.com/rjsf-team/react-jsonschema-form/issues/2693). Additionally, in order to break a circular dependency in the validation refactor, the `@rjsf/core/utils.js` file was split out into its own `@rjsf/utils` package as was suggested in [#1655](https://github.com/rjsf-team/react-jsonschema-form/issues/1655).\n- The theme for Material UI version 5 (i.e. `@rjsf/mui`) was split out of the theme for version 4 (i.e. `@rjsf/material-ui`) to resolve the following issues: [#2762](https://github.com/rjsf-team/react-jsonschema-form/issues/2762), [#2858](https://github.com/rjsf-team/react-jsonschema-form/issues/2858), [#2905](https://github.com/rjsf-team/react-jsonschema-form/issues/2905), [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945)\n- As part of the fix for [#2526](https://github.com/rjsf-team/react-jsonschema-form/issues/2526) all the existing templates in the previous version were moved into a new `templates` dictionary, similar to how `widgets` and `fields` work. This `templates` dictionary was added to the `Registry` and also the `Form` props, replacing the `ArrayFieldTemplate`, `FieldTemplate`, `ObjectFieldTemplate` and `ErrorList` props. In addition, several of the `fields` and `widgets` based components were moved into the `templates` dictionary as they were more like templates than true `Field`s or `Widget`s. Also fixes [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945)\n- Fixed `anyOf` and `oneOf` getting incorrect, potentially duplicate ids when combined with array [#2197](https://github.com/rjsf-team/react-jsonschema-form/issues/2197)\n- `CheckboxesWidget`, `RadioWidget` and `SelectWidget` in all themes now use indexes into `enumOptions[]` rather than `option.value` to allow for objects in `enumOptions` - [#1494](https://github.com/rjsf-team/react-jsonschema-form/issues/1494)\n\n### Node support\n\nVersion 5 is dropping official support for Node 12 as it is no longer a [maintained version](https://nodejs.org/en/about/releases/).\nPlease use Node 18 when making any changes to `package.json` and `package-lock.json` files.\nAll PR and branch builds are running against Node 14, 16 and 18.\n\n### React version\n\nRJSF is no longer actively supporting React version < 16.14.x.\nReact 17 is officially supported on all the themes where the underlying theme library also supports React 17.\n\nUnfortunately, there is required work pending to properly support React 18, so use it at your own risk.\n\n### New packages\n\nThere are four new packages added in RJSF version 5:\n\n- `@rjsf/utils`: All of the [utility functions](../api-reference/utility-functions.md) previously imported from `@rjsf/core/utils` as well as the Typescript types for RJSF version 5.\n - The following new utility functions were added: `ariaDescribedByIds()`, `createSchemaUtils()`, `descriptionId()`, `enumOptionsDeselectValue()`, `enumOptionsIndexForValue()`, `enumOptionsIsSelected()`, `enumOptionsSelectValue()`, `enumOptionsValueForIndex()`, `errorId()`, `examplesId()`, `getClosestMatchingOption()`, `getFirstMatchingOption()`, `getInputProps()`, `helpId()`, `mergeValidationData()`, `optionId()`, `sanitizeDataForNewSchema()` and `titleId()`\n- `@rjsf/validator-ajv6`: The [ajv](https://github.com/ajv-validator/ajv)-v6-based validator refactored out of `@rjsf/core@4.x`, that implements the `ValidatorType` interface defined in `@rjsf/utils`.\n- `@rjsf/validator-ajv8`: The [ajv](https://github.com/ajv-validator/ajv)-v8-based validator that is an upgrade of the `@rjsf/validator-ajv6`, that implements the `ValidatorType` interface defined in `@rjsf/utils`. See the ajv 6 to 8 [migration guide](https://ajv.js.org/v6-to-v8-migration.html) for more information.\n- `@rjsf/mui`: Previously `@rjsf/material-ui/v5`, now provided as its own theme.\n\n### `id` BREAKING CHANGES\n\nIn many of the themes the `id`s for the `Title`, `Description` and `Examples` blocks were update to all have a consistent value of `xxx__title`, `xxx__description` and `xxx__examples`, respectively, where `xxx` is the id of the field.\nIn addition, some of the `id`s for various input values were updated to be consistent across themes or to fix small bugs.\nFor instance, the values for radio buttons in the `RadioWidget` and checkboxes in the `CheckboxesWidget` are of the form `xxx-${option.value}`, where `xxx` is the id of the field.\n\n### `enumOptions[]` widgets BREAKING CHANGES\n\nSchemas may have `enumOptions[]` where values are objects rather than primitive types. Examples of such schemas have been added to the playground. These schemas did not work in RJSF prior to v5.\nIn every theme, the `enumOptions[]` rendering widgets `CheckboxesWidget`, `RadioWidget` and `SelectWidget` previously used the `enumOptions[].value` to as the value used for the underlying `checkbox`, `radio` and `select.option` elements.\nNow, these `CheckboxesWidget`, `RadioWidget` and `SelectWidget` components use the index of the `enumOptions[]` in the list as the value for the underlying elements.\nIf you need to build a custom widget for this kind of `enumOptions`, there are a set of `enumOptionsXXX` functions in `@rjsf/utils` to support your implementation.\n\n### `@rjsf/core` BREAKING CHANGES\n\n#### Types\n\nIn version 4, RJSF exported all its types directly from `@rjsf/core`.\nIn version 5, only the types for the `Form` component and the `withTheme()` HOC are exported directly from `@rjsf/core`.\nAll the rest of the types for RJSF are now exported from the new `@rjsf/utils` package.\n\nNOTE: The types in `@rjsf/utils` have been improved significantly from those in version 4 and as a result may require you to fix your Typescript typings and add some casts.\n\nSome of the most notable changes are:\n\n- `RJSFSchema` has replaced the use of `JSON7Schema` for future compatibility reasons.\n - Currently `RJSFSchema` is simply an alias to `JSON7Schema` so this change is purely a naming one.\n - It is highly recommended to update your use of `JSON7Schema` with `RJSFSchema` so that when the RJSF begins supporting a newer JSON Schema version out-of-the-box, your code won't be affected.\n- `RJSFSchemaDefinition` has replaced the use of `JSONSchema7Definition` for the same reasons.\n\n- The use of the generic `T` (defaulting to `any`) for the `formData` type has been expanded to cover all type hierarchies that use `formData`.\n- `StrictRJSFSchema` and `RJSFSchema` have replaced the use of `JSON7Schema` for future compatibility reasons.\n - `RJSFSchema` is `StrictRJSFSchema` joined with the `GenericObjectType` (i.e. `{ [key: string]: any }`) to allow for additional syntax related to newer draft versions\n - All definitions of `schema` and `rootSchema` elements have been replaced with a generic that is defined as `S extends StrictRJSFSchema = RJSFSchema`\n - It is highly recommended to update your use of `JSON7Schema` with `RJSFSchema` since that is the default for the new generic used for `schema` and `rootSchema`\n- A new generic `F` (extending `FormContextType` defaulting to `any`) was added for the `formContext` type, and all types in the hierarchy that use `formContext` have had that generic added to them.\n- The new `CustomValidator`, `ErrorTransformer`, `ValidationData`, `ValidatorType` and `SchemaUtilsType` types were added to support the decoupling of the validation implementation.\n- The new `TemplatesType`, `ArrayFieldDescriptionProps`, `ArrayFieldTitleProps`, `UnsupportedFieldProps`, `IconButtonProps`, `SubmitButtonProps` and `UIOptionsBaseType` were added to support the consolidation (and expansion) of `templates` in the `Registry` and `Form`.\n- **BREAKING CHANGE** The `DescriptionField` and `TitleField` props were removed from the `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps` as they can now be derived from the `templates` or `uiSchema` via the new `getTemplate()` utility function.\n- **BREAKING CHANGE** The `fields` prop was removed from the `FieldTemplateProps` as you can simply use `registry.fields` instead.\n- **BREAKING CHANGE** The `showErrorList` prop was changed to accept `false`, `\"top\"` or `\"bottom\"`. `true` is no longer a valid value. The default value is `\"top\"`, which has identical behavior to the default value/`true` in v4.\n You can view all these [types](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts) on GitHub.\n\n#### Form props\n\nIn version 5, the `Form` component's two optional props `additionalMetaSchemas` and `customFormats` were replaced with the new, required `validator` prop, in order to support the decoupling of the validation implementation.\nThis new `validator` prop is expected to be an implementation of the `ValidatorType` interface.\nThe new `@rjsf/validator-ajv6` package contains the refactored implementation of the version 4 validator; It was provided for backwards compatibility with RJSF v4, and it is deprecated. \nThe new `@rjsf/validator-ajv8` package contains the refactored implementation of the version 4 validator, that has been converted to use the `Ajv 8` validator and has more capabilities than the `Ajv 6` one. See the [Ajv migration guide](https://ajv.js.org/v6-to-v8-migration.html) for more information.\n\nThere are two ways to use this new package to provide a `validator` for a `Form`.\nFirst, you can simply import the default validator from the package and pass it to a `Form`.\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nSecond, if you were actually providing one (or both) of the removed optional props to your `Form`, you can continue using them by creating a customized validator.\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport { customizeValidator, CustomValidatorOptionsType } from \"@rjsf/validator-ajv8\";\n\n// Your schema, additionalMetaSchemas and/or customFormats\nconst schema: RJSFSchema = { ... };\nconst additionalMetaSchemas: CustomValidatorOptionsType['additionalMetaSchemas'] = [{ ... }];\nconst customFormats: CustomValidatorOptionsType['customFormats'] = { ... };\n\nconst validator = customizeValidator({ additionalMetaSchemas, customFormats });\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n##### `formElement` converted to RefObject\n\nThe `formElement` variable that stored the ref to the inner `` was converted from a simple variable assigned via a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) (ala React < 16.3) to a React.RefObject created using the `React.createRef()` API.\nAs a result, if you were using the `formElement` ref, you will need to update it to use `formElement.current`:\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\nconst formRef = React.createRef();\n\nrender((\n \n), document.getElementById(\"app\"));\n\n...\n// Previously, to reset the form one would have called:\n// formRef.current.formElement.reset();\n// Now one calls:\nformRef.current.formElement.current.reset();\n```\n\n##### `validate` prop renamed\n\nAdditionally, in version 5, the `validate` prop on `Form` was renamed to `customValidate` to avoid confusion with the new `validator` prop.\n\n##### `fields` prop changes\n\nIn previous versions, it was possible to provide an override to the `DescriptionField`, `TitleField` and/or `UnsupportedField` components by providing a custom implementation in the `fields` prop on the `Form`.\nSince these components do not actually support the `FieldProps` interface, they were moved into the `templates` dictionary instead.\nIf you were previously overriding any (or all) of these components, you can override them now via the `templates` prop on `Form` instead:\n\n```tsx\nimport { DescriptionFieldProps, RJSFSchema, TitleFieldProps } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom fields\nconst CustomDescriptionField = (props: DescriptionFieldProps) => { ... };\nconst CustomTitleField = (props: TitleFieldProps) => { ... };\nconst CustomUnsupportedField = (props: ObjectFieldTemplateProps) => { ...\n};\n\nconst templates: Partial = {\n DescriptionFieldTemplate: CustomDescriptionField,\n TitleFieldTemplate: CustomTitleField,\n UnsupportedFieldTemplate: CustomUnsupportedField,\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n##### new `templates` prop\n\nAdditionally, in version 5, the `ArrayFieldTemplate`, `FieldTemplate`, `ObjectFieldTemplate` and `ErrorList` props were replaced with the `templates` prop as part of the `TemplatesType` consolidation.\nIf you were previously overriding any (or all) of these templates, you can simply consolidate them into the new `templates` prop on `Form` instead:\n\n```tsx\nimport { ArrayFieldTemplateProps, ErrorListProps, FieldTemplateProps, ObjectFieldTemplateProps, RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom templates\nconst CustomArrayFieldTemplate = (props: ArrayFieldTemplateProps) => { ... };\nconst CustomFieldTemplate = (props: FieldTemplateProps) => { ... };\nconst CustomObjectFieldTemplate = (props: ObjectFieldTemplateProps) => { ... };\nconst CustomErrorField = (props: ErrorListProps) => { ... };\n\nconst templates: Partial = {\n ArrayFieldTemplate: CustomArrayFieldTemplate,\n FieldTemplate: CustomFieldTemplate,\n ObjectFieldTemplate: CustomObjectFieldTemplate,\n ErrorFieldTemplate: CustomErrorField,\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nNOTE: In version 5, the `ArrayField` implementation was refactored to add 3 additional templates for presenting arrays along with the `ArrayFieldTemplate`.\nIf you were updating the `ArrayFieldTemplate` to modify just a subset of the UI, it may be easier for you to implement one of the other new templates instead.\nSee the [Custom Templates](../advanced-customization/custom-templates.md) documentation for more details.\n\n##### `widgets` prop change\n\nIn the previous version, it was possible to provide an override to the `SubmitButton` component by providing a custom implementation in the `widgets` prop on the `Form`.\nSince this component only requires a tiny fraction of the `WidgetProps` interface, it was moved into the `templates.ButtonTemplates` dictionary instead with its own, reduced set of props.\nIf you were previously overriding this component, you can override it now via the `templates` prop on `Form` instead:\n\n```tsx\nimport { RJSFSchema, SubmitButtonProps } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom button\nconst CustomSubmitButton = (props: SubmitButtonProps) => { ...\n};\n\nconst templates: Partial = {\n ButtonTemplates: {\n SubmitButton: CustomSubmitButton,\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n#### utils.js\n\nIn version 5, all the utility functions that were previously accessed via `import { utils } from '@rjsf/core';` are now available via `import utils from '@rjsf/utils';`.\nBecause of the decoupling of validation from `@rjsf/core` there is a breaking change for all the [validator-based utility functions](../api-reference/utility-functions.md#validator-based-utility-functions), since they now require an additional `ValidatorType` parameter.\nMore over, one previously exported function `resolveSchema()` is no longer exposed in the `@rjsf/utils`, so use `retrieveSchema()` instead.\nFinally, the function `getMatchingOption()` has been deprecated in favor of `getFirstMatchingOption()`.\n\nIf you have built custom fields or widgets that utilized any of these breaking-change functions, don't worry, there is a quick and easy solution for you.\nThe `registry` has a breaking-change which removes the previously deprecated `definitions` property while adding the new `schemaUtils` property.\nThis new `registry.schemaUtils` property implements the `SchemaUtilsType` interface, which allows you to call a version of each of these breaking-change functions without the need for passing either a `validator` or `rootSchema`.\nBecause all fields and widgets are guaranteed to be passed the `registry` as a prop, if your custom field/widget happens to use either the `registry.definitions` object or a breaking-change validator-based utility function you make the following changes:\n\n```tsx\nimport { RJSFSchema, FieldProps } from '@rjsf/utils';\n\nfunction YourField(props: FieldProps) {\n const { registry } = props;\n// Change `registry.definitions` to `registry.rootSchema.definitions`\n// const { definitions } = registry; <- version 4\n const { rootSchema } = registry;\n const { definitions } = rootSchema;\n...\n}\n```\n\n```tsx\n// Change breaking-change function to schemaUtils instead, otherwise import from @rjsf/utils\n// import { utils } from '@rjsf/core'; <- version 4\n// const { isMultiSelect, resolveSchema, getUiOptions } = utils; <- version 4\nimport { RJSFSchema, WidgetProps, getUiOptions } from '@rjsf/utils';\n\nfunction YourWidget(props: WidgetProps) {\n const { registry, uiSchema } = props;\n const { schemaUtils } = registry;\n// const matchingOption = getMatchingOption({}, options, rootSchema); <- version 4\n// const isMultiSelect = isMultiSelect(schema, rootSchema); <- version 4\n// const newSchema = resolveSchema(schema, formData, rootSchema); <- version 4\n const matchingOption = schemaUtils.getFirstMatchingOption({}, options);\n const isMultiSelect = schemaUtils.isMultiSelect(schema);\n const newSchema: RJSFSchema = schemaUtils.retrieveSchema(schema, formData);\n const options = getUiOptions(uiSchema);\n\n...\n}\n```\n\n#### validator.js\n\nBecause of the decoupling of validation from `@rjsf/core` this file was refactored into its own `@rjsf/validator-ajv8` package.\nDuring that refactor a few **breaking changes** were made to how it works related to custom validation and `ErrorSchema` conversion.\n\n##### toErrorList param changed\n\nIn previous versions, the `toErrorList()` function used to take a `fieldName` string defaulted to `root`, and used it to format the `stack` message.\nIn version 5, `fieldName` was changed to `fieldPath` string array defaulted to an empty array, and is used to recursively add the field name to the errors as the `property` object along with the raw `message`.\nThe result is that if you had an `ErrorSchema` that looks like:\n\n```tsx\nconst errorSchema: ErrorSchema = {\n __errors: ['error message 1'],\n password: { __errors: 'passwords do not match' },\n};\n```\n\nThe returned result from calling `toErrorList(errorSchema)` has changed as follows:\n\n```tsx\n// version 4 result\n[{ stack: 'root: error message 1' }, { stack: 'password: passwords do not match' }][\n // version 5 result\n ({ property: '.', message: 'error message 1', stack: '. error message 1' },\n {\n property: '.password',\n message: 'passwords do not match',\n stack: '.password passwords do not match',\n })\n];\n```\n\n##### Custom validation and extraErrors\n\nIn previous versions, when using a custom validator on the `Form`, any errors that were generated were inconsistently inserted into the validations `errors` list.\nIn addition, there was an [issue](https://github.com/rjsf-team/react-jsonschema-form/issues/1596) where the non-`stack` AJV error information was lost when custom validation generated errors.\nThis issue has been fixed.\nAlso, when `extraErrors` were provided, they were being inconsistently inserted into the `errors` list and the non-`stack` AJV error information was lost.\nIn version 5, all of these errors will be consistently appended onto the end of the validation `errors` list, and the additional AJV error information is maintained.\n\nIn other words, if custom validation or `extraErrors` produced the following `ErrorSchema`:\n\n```tsx\n{\n __errors: [ \"Please correct your password\"],\n password2: { __errors: \"passwords do not match\" }\n}\n```\n\nAnd the AJV validation produced the following `ErrorSchema`:\n\n```tsx\n{\n __errors: [\n {\n message: 'should NOT be shorter than 3 characters',\n name: 'minLength',\n params: { limit: 3 },\n property: '.password2',\n schemaPath: '#/properties/password2/minLength',\n stack: '.password2 should NOT be shorter than 3 characters',\n },\n ];\n}\n```\n\nThe resulting `errors` list has changed as follows:\n\n```tsx\n// version 4\n[\n { stack: 'root: Please correct your password' },\n { stack: 'password2: passwords do not match' },\n { stack: 'password2: should NOT be shorter than 3 characters' },\n][\n // version 5\n ({\n message: 'should NOT be shorter than 3 characters',\n name: 'minLength',\n params: { limit: 3 },\n property: '.password2',\n schemaPath: '#/properties/password2/minLength',\n stack: '.password2 should NOT be shorter than 3 characters',\n },\n {\n property: '.',\n message: 'Please correct your password',\n stack: '. Please correct your password',\n },\n {\n property: '.',\n message: 'passwords do not match',\n stack: '.password2 passwords do not match',\n })\n];\n```\n\n#### Generate correct ids when arrays are combined with `anyOf`/`oneOf`\n\nIn v4, with arrays inside `anyOf` or `oneOf`, the parent name was not used to generate ids.\nFor example, given a schema such as:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"items\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"anyOf\": [\n {\n \"properties\": {\n \"foo\": {\n \"type\": \"string\"\n }\n }\n },\n {\n \"properties\": {\n \"bar\": {\n \"type\": \"string\"\n }\n }\n }\n ]\n }\n }\n }\n}\n```\n\nWe would get fields with id `root_foo` and `root_bar`.\nAs you can imagine, we could end up with duplicated ids if there's actually a `foo` or a `bar` in the root of the schema.\n\nFrom v5, the child fields will correctly use the parent id when generating its own id, generating ids such as `root_items_0_foo`.\n\n#### Deprecations added in v5\n\n##### getMatchingOption()\n\nThe utility function `getMatchingOption()` was deprecated in favor of the more aptly named `getFirstMatchingOption()` which has the exact same implementation.\n\n##### Non-standard `enumNames` property\n\n`enumNames` is a non-standard JSON Schema field that was deprecated in version 5.\n`enumNames` could be included in the schema to apply labels that differed from an enumeration value.\nThis behavior can still be accomplished with `oneOf` or `anyOf` containing `const` values, so `enumNames` support will be removed from a future major version of RJSF.\nFor more information, see [#532](https://github.com/rjsf-team/react-jsonschema-form/issues/532).\n\n##### uiSchema.classNames\n\nIn versions previous to 5, `uiSchema.classNames` was the only property that did not require the `ui:` prefix.\nAdditionally, it did not support being added into the `ui:options` object.\nThis was fixed in version 5 to be consistent with all the other properties in the `uiSchema`, so the `uiSchema.classNames` support may be removed from a future major version of RJSF.\n\nIf you are using `classNames` as follows, simply add the `ui:` prefix to it to remove the deprecation warning that will be displayed for each `uiSchema.classNames` you have:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\n// This uiSchema will log a deprecation warning to the console\nconst uiSchemaLog: UiSchema = {\n title: {\n classNames: 'myClass',\n },\n};\n// This uiSchema will not\nconst uiSchemaNoLog: UiSchema = {\n title: {\n 'ui:classNames': 'myClass',\n },\n};\n```\n\n### `@rjsf/material-ui` BREAKING CHANGES\n\nThis theme was simplified back to working only with Material UI version 4 after an unsuccessful attempt to have it fully support both versions 4 and 5 simultaneously.\nAs a result, the `MuiComponentContext`, `MuiForm5`, `Theme5` components and the `useMuiComponent` hook were removed from the export.\nIn addition, the `/v4` and `/v5` sub-packages were also removed.\n\n#### Migrating for Material UI version 4\n\nIf you were using this theme for Material UI version 4 AND you were using the sub-package, simply remove the `/v4` from your imports.\n\nIf you modified your Typescript configuration for the `/v4` sub-package, remove the following from your `tsconfig.json`:\n\n```\n{\n ...\n \"compilerOptions\": {\n ...\n \"baseUrl\": \".\",\n \"paths\": {\n \"@rjsf/material-ui/*\": [\"node_modules/@rjsf/material-ui/dist/*\"]\n }\n }\n}\n```\n\nIf you modified your Jest configuration for the `/v4` sub-package, remove the following from your `jest.config.json`:\n\n```\n \"moduleNameMapper\": {\n \"@rjsf/material-ui/v4\": \"/node_modules/@rjsf/material-ui/dist/v4.js\"\n },\n```\n\n#### Migrating for Material UI version 5\n\nIf you were using this theme for Material UI version 5, you will want to use `@rjsf/mui` instead.\nSee below for some before and after examples.\n\nIf you modified your Typescript configuration for the `/v5` sub-package, remove the following from your `tsconfig.json`:\n\n```\n{\n ...\n \"compilerOptions\": {\n ...\n \"baseUrl\": \".\",\n \"paths\": {\n \"@rjsf/material-ui/*\": [\"node_modules/@rjsf/material-ui/dist/*\"]\n }\n }\n}\n```\n\nIf you modified your Jest configuration for the `/v5` sub-package, remove the following from your `jest.config.json`:\n\n```\n \"moduleNameMapper\": {\n \"@rjsf/material-ui/v5\": \"/node_modules/@rjsf/material-ui/dist/v5.js\"\n },\n```\n\n##### Before\n\n```tsx\nimport Form5 from '@rjsf/material-ui';\n```\n\nor\n\n```tsx\nimport Form from '@rjsf/material-ui/v5';\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme } from '@rjsf/material-ui/v5';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme);\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme as Theme5 } from '@rjsf/material-ui';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme5);\n```\n\n##### After\n\n```tsx\nimport Form from '@rjsf/mui';\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme } from '@rjsf/mui';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme);\n```\n","packages/docs/docs/migration-guides/v6.x upgrade guide.md":"# 6.x Upgrade Guide\n\n## New packages\n\nThere are 5 new packages added in RJSF version 6:\n\n- `@rjsf/daisyui`: This is new theme based on the `daisyui` toolkit\n- `@rjsf/mantine`: This is new theme based on the `mantine` toolkit\n- `@rjsf/primereact`: This is a new theme based on the `PrimeReact` toolkit\n- `@rjsf/react-bootstrap`: This is rename of the `bootstrap-4` theme with an upgrade to the latest version of `react-bootstrap`\n- `@rjsf/shadcn`: This is new theme based on the `shadcn` toolkit\n\n## New deprecations\n\n### UiSchema.rootFieldId\n\nThe `ui:rootFieldId` notation on `UiSchema` was deprecated in favor of `Form.idPrefix`.\nThis notation will be removed in a future major version release\n\n### @rjsf/semantic-ui\n\nThe `semantic-ui` theme is deprecated and will be removed in a future major version release unless `sematic-ui-react` version 3 is released with React 19 support.\nAlthough that seems unlikely as no changes have been made to version 3 since December 2023.\n\n## Breaking changes\n\n### CJS build changes\n\nDue to making all of the `package.json` files for the `@rjsf/*` libraries include `\"type\": \"module\"` to better support modern `ESM` builds, the generation of the Common JS distributions were updated to produce `.cjs` files rather than `.js` files.\nHopefully this will not cause any issues with existing uses of the libraries. If so, one may need to switch from doing an `import` of the CJS build to doing a `require()`.\n\n### Theme removals\n\nThe following themes were removed due to duplication of a framework with a newer theme\n\n#### bootstrap-4\n\nThe older `bootstrap-4` theme has been removed in favor of the `react-bootstrap` theme\n\n#### fluent-ui\n\nThe older `fluent-ui` theme has been removed in favor of the `fluentui-rc` theme\n\n#### material-ui\n\nThe older `material-ui` theme has been removed in favor of the `mui` theme\n\n### validator-ajv6\n\nThis deprecated validator has been removed. Use the `validator-ajv8`.\n\n### Theme version support changes\n\n#### @rjsf/antd\n\nVersion 6 is dropping official support for `antd` version 4. You must upgrade to version 5.\n\n#### @rjsf/chakra-ui\n\nVersion 6 is dropping official support for `@chakra-ui` version 2. You must upgrade to version 3. We are also requiring\n`chakra-react-select` version >=6 as a result.\n\n#### @mui version 5 and 6\n\nVersion 6 is dropping official support for `@mui/material` and `@mui/icons-material` versions 5 and 6 due to the adoption\nof breaking changes in version 7. You must upgrade to version 7.\n\n#### @rjsf/semantic-ui\n\nVersion 6 is dropping official support for `semantic-ui-react` version 1. You must upgrade to version 2.\n\n### Node support\n\nVersion 6 is dropping official support for Node 14, 16, and 18 as they are no longer [maintained versions](https://nodejs.org/en/about/releases/).\nPlease use Node 22 when making any changes to `package.json` and `package-lock.json` files.\nAll PR and branch builds are running against Node 20 and 22.\n\n### React version\n\nRJSF is no longer actively supporting React version < 18.x.\nReact 18 is officially supported on all the themes.\n\nReact 19 support is expected before the end of beta (although several developers have already upgraded with no problems).\n\n### Form POTENTIAL BREAKING CHANGES\n\nThe `onChange()` and `onSubmit()` callbacks were accidentally returning extra data along with what was listed in the `IChangeEvent` interface.\nIn v6, this was fixed so that only the data described by the `IChangeEvent` interface is returned.\nIf you were relying on that extra data in the callbacks, we are sorry for the inconvenience.\n\nA bug was fixed such that live validation will no longer be triggered on the data provided during the initial rendering of the `Form`.\nIf you require that your initial data have errors shown, then you can [programmatically validate](../usage/validation/#validate-form-programmatically) it after the initial render.\n\n### IdSchema replacement BREAKING CHANGE\n\nThe recursive `IdSchema` type and all its usages was replaced with a much simpler `FieldPathId` type.\nThis was done to remove a performance headache associated with having to recursively generate the `IdSchema` for every change made to `formData`.\nMoreover, after some evaluation, 99% of the use cases for the `IdSchema` were simply to get the `id` for a field.\n\n`FieldPathId` is defined as:\n\n```typescript\n/** The list of path elements that represents where in the schema a field is located. When the item in the field list is\n * a string, then it represents the name of the property within an object. When it is a number, then it represents the\n * index within an array.\n *\n * For example:\n * `[]` represents the root object of the schema\n * `['foo', 'bar']` represents the `bar` element contained within the `foo` element of the schema\n * `['baz', 1]` represents the second element in the list `baz` of the schema\n */\nexport type FieldPathList = (string | number)[];\n\n/** Type describing an id and path used for a field */\nexport type FieldPathId = {\n /** The id for a field */\n $id: string;\n /** The path for a field */\n path: FieldPathList;\n};\n```\n\n#### idSchema props\n\nIn addition, everywhere the `idSchema: IdSchema` prop was part of a RJSF type, it was replaced with `fieldPathId: FieldPathId`.\n\nThe affected types are:\n\n- FieldErrorProps\n- FieldHelpProps\n- FieldProps\n- UnsupportedFieldProps\n- ArrayFieldTitleProps\n- ArrayFieldDescriptionProps\n- ArrayFieldItemButtonsTemplateProps\n- ArrayFieldTemplateProps\n- ObjectFieldTemplateProps\n\nIf you have built a custom component using one of those types that used `idSchema: IdSchema`, simply replace that type and property name with `fieldPathId: FieldPathId`.\n\nFor example, if you had a custom field:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\n\n// Version 5-based custom widget\nfunction CustomField(props: FieldProps) {\n const {\n idSchema: { $id },\n formData,\n value,\n } = props;\n\n return
// Your field implementation
;\n}\n\n// Version 6-based custom widget\nfunction CustomField(props: FieldProps) {\n const {\n fieldPathId: { $id },\n formData,\n value,\n } = props;\n\n return
// Your field implementation
;\n}\n```\n\n#### toIdSchema() removed\n\nFinally, the `toIdSchema()` utility function was deleted and replaced with a new `toFieldPathId()` function documented [here](../api-reference/utility-functions.md#tofieldpathid)\n\n### formContext BREAKING CHANGES\n\nRemoved the unnecessary `formContext` property from the following interfaces since it is readily available in the `registry`.\nIf you were using the `formContext` in your custom `template`, `field` or `widget`, simply get it from the `registry` instead.\n\nInterfaces with `formContext` removed:\n\n- `ErrorListProps` - The properties that are passed to an `ErrorListTemplate` implementation\n- `FieldProps` - The properties that are passed to a `Field` implementation\n- `FieldTemplateProps` - The properties that are passed to a `FieldTemplate` implementation\n- `ArrayFieldTemplateProps` - The properties that are passed to an `ArrayFieldTemplate` implementation\n- `WidgetProps` - The properties that are passed to a `Widget` implementation\n\n### Fields BREAKING CHANGES\n\n#### FieldProps.onChange\n\nThe `onChange` handling for fields has been changed to fix a serious bug related to nearly simultaneous updates losing data.\nPreviously in 5.x, data change handling worked by passing a complete `newFormData` object up to the `Form` from the underlying `Field`s.\nIn 6.x, data change handling now works by passing just the changed `newValue` for a `Field` and the `path` array of the `Field` within the `formData`, with the `Form` itself being responsible for injecting the changed data into the `formData`.\n\nAs a result, the `FieldProps` interface was updated with the following breaking change so that custom `Field` authors are forced to respond to this update:\n\n```typescript\n// Version 5's `onChange` handler:\n\n/** The field change event handler; called with the updated form data and an optional `ErrorSchema` */\nonChange: (newFormData: T | undefined, es?: ErrorSchema, id?: string) => any;\n\n// Version 6's `onChange` handler:\n/** The field change event handler; called with the updated field value, the optional change path for the value\n * (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed\n */\nonChange: (newValue: T | undefined, path: FieldPathList, es?: ErrorSchema, id?: string) => void;\n```\n\nIn order to support letting the `Form` know what the path of the change was, a new `path: FieldPathList` parameter was injected into the handler before the `es?: ErrorSchema` parameter.\nIf you have written a custom `Field` that implements merging the new value into the `newFormData`, now you just need to pass that value and provide the `fieldPathId.path` to the `onChange` function.\n\nHere is an example of a custom `Field` that was updated due to this change:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nconst { ArrayField } = getDefaultRegistry().fields;\n\n// Version 5-based custom field\nfunction CustomField(props: FieldProps) {\n const {\n idSchema: { $id },\n formData,\n onChange,\n } = props;\n const changeHandlerFactory = (fieldName: string) => (event: any) => {\n onChange({ ...formData, [fieldName]: event.target.value });\n };\n return (\n <>\n

Location

\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n );\n}\n\n// Version 6-based custom field\nfunction CustomField(props: FieldProps) {\n const {\n fieldPathId: { $id, path },\n formData,\n onChange,\n } = props;\n const changeHandlerFactory = (fieldName: string) => (event: any) => {\n onChange(event.target.value, [...path, fieldName]);\n };\n return (\n <>\n

Location

\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n );\n}\n```\n\nThe same change also applies to the `ErrorSchema` object being passed to the `Form`.\nTherefore, if your custom `Field` also updated the `ErrorSchema` to add a new error, now you just need to pass that error as well.\nFinally, the errors are preserved across validations, so if you want to clear an error you passed via `onChange`, you will have to pass `undefined`\n\nHere is an example of a custom `Field` that was updated due to this change:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nconst { StringField } = getDefaultRegistry().fields;\n\n// Version 5-based custom field\nfunction StringFieldError(props: FieldProps) {\n const onChange = (newFormData: any | undefined, es?: ErrorSchema, id?: string) => {\n let raiseError = es;\n if (newFormData === 'test') {\n raiseError = {\n ...es,\n __errors: ['Value cannot be \"test\"'],\n };\n }\n props.onChange(newFormData, raiseError, id);\n };\n return ;\n}\n\n// Version 6-based custom field\nfunction StringFieldError(props: FieldProps) {\n const onChange = (newValue: any | undefined, path: FieldPathList, es?: ErrorSchema, id?: string) => {\n let raiseError = es;\n if (newValue === 'test') {\n raiseError = {\n __errors: ['Value cannot be \"test\"'],\n };\n }\n props.onChange(newValue, path, raiseError, id);\n };\n return ;\n}\n```\n\n#### FieldProps.idPrefix and FieldProps.idSeparator refactor\n\nThe `idPrefix` and `idSeparator` props were refactored from the `FieldProps` interface to the new `GlobalFormOptions` interface,\nIf your custom implementation required either of those props, you can simply obtain them from the `registry.globalFormOptions` variable instead.\n\n### FieldTemplateProps and WrapIfAdditionalTemplateProps BREAKING CHANGES\n\nDuring the conversion of `ObjectField` to a stateless functional component, the `additionalProperties`-based props in these two interfaces were simplified by replacing two callback-generators with memoized callbacks.\n\nIf you have your own implementation of the `FieldTemplate` and/or `WrapIfAdditionalTemplate` template(s), you will have to rename the props mentioned below with their replacements.\n\n#### onKeyChange replacement\n\nThe `onKeyChange: (value: string) => () => void` callback-generator function was replaced with the following 2 memoized callbacks, (one is a helper callback, since most of the key renames were triggered off of an input blur):\n\n```typescript\n/** Callback used to handle the changing of an additional property key's name with the new value\n */\nonKeyRename: (newKey: string) => void;\n/** Callback used to handle the changing of an additional property key's name when the input is blurred. The event's\n * target's value will be used as the new value. Its a wrapper callback around `onKeyRename`\n */\nonKeyRenameBlur: (event: FocusEvent) => void;\n```\n\n#### onDropPropertyClick replacement\n\nThe `onDropPropertyClick: (value: string) => () => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback used to handle the removal of the additionalProperty */\nonRemoveProperty: () => void;\n```\n\n### ObjectFieldTemplateProps BREAKING CHANGES\n\nDuring the conversion of `ObjectField` to a stateless functional component, the `additionalProperties`-based prop in this interface was simplified by replacing a callback-generator with a memoized callback.\n\nIf you have your own implementation of the `ObjectFieldTemplate` template, you will have to rename the prop mentioned below with its replacement.\n\n#### onAddClick replacement\n\nThe `onAddClick: (schema: S) => () => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback to use in order to add an new additionalProperty to the object field (to be used with\n * additionalProperties and patternProperties)\n */\nonAddProperty: () => void;\n```\n\n### Registry BREAKING CHANGES\n\nA new required prop, `globalFormOptions: GlobalFormOptions`, was added to the `Registry` interface.\nThis could affect your tests if you have your own way of creating `registry` objects to test your custom widgets, fields and/or templates.\nIf you are creating `Registry` objects, you simply need to add an empty object to the `globalFormOptions` prop.\nYou may also, provide values for any of the optional props contained within the `GlobalFormOptions` type.\n\nThe definition of the `GlobalFormOptions` object is:\n\n```typescript\n/** The set of options from the `Form` that will be available on the `Registry` for use in everywhere the `registry` is\n * available.\n */\nexport type GlobalFormOptions = {\n /** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;\n * Default is `root`. This prop is passed to the `toFieldPathId()` function within the RJSF field implementations.\n */\n readonly idPrefix?: string;\n /** To avoid using a path separator that is present in field names, it is possible to change the separator used for\n * ids; Default is `_`. This prop is passed to the `toFieldPathId()` function within the RJSF field implementations.\n */\n readonly idSeparator?: string;\n /** The component update strategy used by the Form and its fields for performance optimization */\n readonly experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';\n /** Optional function to generate custom HTML name attributes for form elements. Receives the field path segments\n * and element type (object or array), and returns a custom name string. This allows backends like PHP/Rails\n * (`root[tasks][0][title]`) or Django (`root__tasks-0__title`) to receive form data in their expected format.\n */\n readonly nameGenerator?: NameGeneratorFunction;\n};\n```\n\nTo help support this change for test writers, a new `getTestRegistry()` function has been provided in `@rjsf/core`.\n\n### Templates BREAKING CHANGES\n\n#### ArrayFieldTemplateItemType renamed\n\nThe type `ArrayFieldTemplateItemType` was renamed to `ArrayFieldItemTemplateProps` type, which matches the template properties naming pattern.\n\nAlso changed the `key: string` prop to `itemKey: string` to avoid a name collision with React\n\n#### ArrayFieldItemTemplate BREAKING CHANGES\n\nThe `ArrayFieldItemTemplateProps` was refactored to extract the following props into out a new `ArrayFieldItemButtonsTemplateProps`:\n\n- `canAdd`: A boolean value stating whether new items can be added to the array.\n- `hasCopy`: A boolean value stating whether the array item can be copied.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- ~~`onAddIndexClick: (index) => (event?) => void`: Returns a function that adds a new item at `index`.~~\n- ~~`onCopyIndexClick: (index: number) => (event?: any) => void;`: Returns a function that copies the item at `index` into the position at `index + 1`.~~\n- ~~`onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.~~\n- ~~`onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.~~\n\nIn addition to this refactor, the conversion of the `ArrayField` template to functional components caused the replacement of the 4 callback-generator functions with 5 memoizable functions.\n\n##### onAddIndexClick replacement\n\nThe `onAddIndexClick: (index) => (event?) => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback function that adds a new item below this item */\nonAddItem: (event?: any) => void;\n```\n\n##### onCopyIndexClick replacement\n\nThe `onCopyIndexClick: (index: number) => (event?: any) => void;` callback-generator function was replaced with a simpler, memoized callback:\n\n```typescript\n/** Callback function that copies this item below itself */\nonCopyItem: (event?: any) => void;\n```\n\n##### onDropIndexClick replacement\n\nThe `onDropIndexClick: (index) => (event?) => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback function that removes the item from the list */\nonRemoveItem: (event?: any) => void;\n```\n\n##### onReorderClick replacement\n\nThe `onReorderClick: (index, newIndex) => (event?) => void` callback-generator function was replaced with the following 2 memoized callbacks:\n\n```typescript\n/** Callback function that moves the item up one spot in the list */\nonMoveUpItem: (event?: any) => void;\n/** Callback function that moves the item down one spot in the list */\nonMoveDownItem: (event?: any) => void;\n```\n\nA new `buttonsProps` prop was added of the type `ArrayFieldItemButtonsTemplateProps`\n\nThis new type was then used to create a new `ArrayFieldItemButtonsTemplate` in the `Registry.templates`.\nSee [ArrayFieldItemButtonTemplate](../advanced-customization/custom-templates.md#arrayfielditembuttontemplate)\n\nIf you have implemented your own `ArrayFieldItemTemplate` or `ArrayField` then you will have to account for these changes.\n\n#### ArrayFieldTemplate BREAKING CHANGE\n\nIn order to support the conversion of `ArrayField` to functional components, the `items` property was changed from an\narray of `ArrayFieldItemTemplateProps` information to an array of React elements. These elements are result of the `ArrayField`\nactually rendering the `ArrayFieldItemTemplate` directly, rather than deferring it the `ArrayFieldTemplate`.\n\nIf you previously provided a custom `ArrayFieldTemplate` to do the full rendering of your arrays, now you will have to\nseparate the logic of generating the items into your own custom `ArrayFieldItemTemplate`. For example:\n\n```tsx\n// v5 ArrayFieldTemplate\n\nimport { ArrayFieldTemplateItemType, ArrayFieldTemplateProps } from '@rjsf/utils';\n\nfunction CustomArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n const { items, canAdd, onAddClick } = props;\n return (\n
\n {items &&\n items.map((element: ArrayFieldTemplateItemType) => (\n
\n
{element.children}
\n {(element.hasMoveUp || element.hasMoveDown) && (\n \n Down\n \n )}\n {(element.hasMoveUp || element.hasMoveDown) && (\n \n )}\n {element.hasCopy && (\n \n )}\n {element.hasRemove && (\n \n )}\n
\n
\n ))}\n {canAdd && (\n
\n \n
\n )}\n
\n );\n}\n```\n\n```tsx\n// v6 ArrayFieldTemplate and ArrayFieldItemTemplate (including other v6 changes mentioned in other sections)\n\nimport { ArrayFieldItemTemplateProps, ArrayFieldTemplateProps } from '@rjsf/utils';\n\nfunction CustomArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {\n const { children, buttonProps, itemKey } = props;\n return (\n
\n
{children}
\n {(buttonsProps.hasMoveUp || buttonsProps.hasMoveDown) && (\n \n )}\n {(buttonsProps.hasMoveUp || buttonsProps.hasMoveDown) && (\n \n )}\n {buttonsProps.hasCopy && (\n \n )}\n {buttonsProps.hasRemove && (\n \n )}\n
\n
\n );\n}\n\nfunction CustomArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n const { items, canAdd, onAddClick } = props;\n return (\n
\n {items}\n {canAdd && (\n
\n \n
\n )}\n
\n );\n}\n```\n\n> NOTE: the example above could also have implemented an `ArrayFieldItemButtonsTemplate` for the `buttonProps` related code.\n\n##### Potential BREAKING CHANGE\n\nThis template was also updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ArrayFieldTemplateProps` interface.\n\nIf you have your own implementation of `ArrayFieldTemplate` and want to support this new feature, please refer to any of the `ArrayFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### ArrayFieldTitleTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ArrayFieldTitleProps` interface.\n\nIf you have your own implementation of `ArrayFieldTitleTemplate` and want to support this new feature, please refer to the `ArrayFieldTitleTemplate` implementation for `@rjsf/core` or whatever theme you are using and pick up the changes.\n\n#### GridTemplate\n\nA new, theme-dependent template `GridTemplate` was added to support the new layout feature and must be provided if you are building your own `registry.templates` rather than overloading them via the `templates` props.\n\n#### MultiSchemaFieldTemplate\n\nThis new template was created to extract styling applied to the `MultiSchemaField` component in the `@rjsf/core` package.\n\nIf you have styled your form using the following classNames and you do NOT use the `@rjsf/core` theme, you may need to adjust your styles, as they may have been removed from your theme: `panel`, `panel-default`, `panel-body`, `form-group`.\n\n#### ObjectFieldTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ObjectFieldTemplateProps` interface.\n\nIf you have your own implementation of `ObjectFieldTemplate` and want to support this new feature, please refer to the `ObjectFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### OptionalDataControlsTemplate POTENTIAL BREAKING CHANGE\n\nThis new template was created to support the new [Optional Data Controls](#optional-data-controls) feature.\n\nIf you are implementing your own theme you may need to add this new template if you anticipate supporting this new feature.\n\n#### TitleFieldTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `TitleFieldProps` interface.\n\nIf you have your own implementation of `TitleFieldTemplate` and want to support this new feature, please refer to the `TitleFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### SchemaField - Addition of FallbackField POTENTIAL BREAKING CHANGE\n\nThe `SchemaField` was updated to use the new `FallbackField`, which adds opt-in support to replace the `UnsupportedField` with an interactive UI instead of an error message.\nIf you have your own implementation of `SchemaField` and want to support this new feature, please refer to the `SchemaField` implementation in `@rjsf/core` and pick up the changes.\n\nThe `UnsupportedField` component is unaffected by these changes, and is still used by the new `FallbackField`.\n\n#### SchemaUtilsType\n\nFive new functions were added to this type, so if you have your own implementation of this type, you will need to add them to yours.\nThe following new functions match the 5 new validator-based utility API functions mentioned below:\n\n- `findFieldInSchema(path: string | string[], schema: S, formData?: T): FoundFieldType`\n- `findSelectedOptionInXxxOf(schema: S, fallbackField: string, xxx: 'anyOf' | `oneOf`, formData?: T): S | undefined;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: T): T;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: S): S;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: T | S): S | T;`\n\nIn addition the `toIdSchema()` function was removed on this type in concert with the `toIdSchema()` function removal, so update your implementation to remove this as well.\n\n### Removed deprecations\n\nThe following deprecations were removed from the code base in v6\n\n#### FormProps.acceptcharset\n\nThe `acceptcharset` prop on `Form` was removed. Use the `acceptCharset` prop instead. I.e.:\n\n```tsx\n\n```\n\n#### getMatchingOption()\n\nThe `getMatchingOption()` function in `@rjsf/utils` was removed. Use the `getFirstMatchingOption()` function instead.\nI.e.:\n\n```ts\nimport { getFirstMatchingOption, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n // your schema goes here\n};\n\nconst formData = {\n /* your form data goes here */\n};\nconst options: RJSFSchema[] = [\n /* your options extracted from the schema go here */\n];\n\nconst option = getFirstMatchingOption(validator, formData, options, schema);\n```\n\n#### SchemaUtilsType.getMatchingOption()\n\nThe `getMatchingOption()` function in the `SchemaUtilsType` was removed. Use the `getFirstMatchingOption()` funciton on\nthe type instead. I.e.:\n\n```ts\nimport { createSchemaUtils, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n // your schema goes here\n};\n\nconst formData = {\n /* your form data goes here */\n};\nconst options: RJSFSchema[] = [\n /* your options extracted from the schema go here */\n];\nconst schemaUtils = createSchemaUtils(validator, schema);\n\nconst option = schemaUtils.getFirstMatchingOption(formData, options);\n```\n\n#### mergeValidationData()\n\nThe `mergeValidationData()` function from `@rjsf/utils` was removed. Use the `validationDataMerge()` function instead.\nI.e.:\n\n```ts\nimport { validationDataMerge, ValidationData, ErrorSchema } from '@rjsf/utils';\n\nconst validationData: ValidationData = {\n errors: [\n /* Your validation errors go here */\n ],\n errorSchema: {\n /* Your error schema goes here */\n },\n};\n\nconst additionalErrorSchema: ErrorSchema = {\n /* Your additional error schema goes here */\n};\n\nconst merged = validationDataMerge(validationData, additionalErrorSchema);\n```\n\n#### SchemaUtilsType.mergeValidationData()\n\nThe `mergeValidationData()` function in the `SchemaUtilsType` was removed. Use the standalone `validationDataMerge()`\nfunction instead. I.e.:\n\n```ts\nimport { toErrorList } from '@rjsf/utils';\n\nconst validationData: ValidationData = {\n errors: [\n /* Your validation errors go here */\n ],\n errorSchema: {\n /* Your error schema goes here */\n },\n};\n\nconst additionalErrorSchema: ErrorSchema = {\n /* Your additional error schema goes here */\n};\n\nconst merged = validationDataMerge(validationData, additionalErrorSchema);\n```\n\n#### ValidatorType.toErrorList()\n\nThe `toErrorList()` function on the `ValidatorType` interface was removed. Use the standalone `toErrorList()` function\nfrom `@rjsf/utils` instead. I.e.:\n\n```ts\nimport { validationDataMerge, ErrorSchema, RJSFValidationError, toErrorList } from '@rjsf/utils';\n\nconst errorSchema: ErrorSchema = {\n /* Your error schema goes here */\n};\n\nconst validationErrors: RJSFValidationError[] = toErrorList(errorSchema);\n```\n\n#### RJSF_ADDITONAL_PROPERTIES_FLAG\n\nThe constant `RJSF_ADDITONAL_PROPERTIES_FLAG` was removed from `@rjsf/utils`. Use the `RJSF_ADDITIONAL_PROPERTIES_FLAG`\nconstant instead. I.e.:\n\n```ts\nimport { RJSF_ADDITIONAL_PROPERTIES_FLAG } from '@rjsf/utils';\n```\n\n#### UiSchema.classNames\n\nThe `classNames` notation on `UiSchema` was removed. Use the `ui:classNames` notation instead. I.e.:\n\n```json\n{\n \"someField\": {\n \"ui:classNames\": \"someCustomClass\"\n }\n}\n```\n\n#### schema.enumNames\n\nThe custom `enumNames` property support on a JSON Schema that RJSF invented has been removed. Please use the `UiSchema`\nreplacement, `ui:enumNames` instead. I.e.:\n\n```ts\nimport { UiSchema, RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n attendance: {\n title: 'How did you attend the event?',\n enum: ['person', 'phone', 'video'],\n },\n rating: {\n title: 'How would you rate this event?',\n enum: ['0', '1', '2', '3', '4'],\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n attendance: {\n 'ui:enumNames': ['I joined in person', 'I called in using the phone number', 'I joined using the video link'],\n },\n rating: {\n 'ui:enumNames': [\"I did't like it\", 'It was meh', 'It was ok', 'I liked it', 'I loved it'],\n },\n};\n```\n\nUse the `ui:enumNames` in the `UiSchema` instead.\n\n### Other BREAKING CHANGES\n\n#### Primitive field handling in oneOf/anyOf schemas\n\nA bug fix was implemented that changes how primitive fields (boolean, string, number, etc.) are handled when switching between oneOf/anyOf schema options with `mergeDefaultsIntoFormData: \"useDefaultIfFormDataUndefined\"`.\n\n**Previous (buggy) behavior**: Undefined primitive fields were incorrectly set to empty objects `{}` when switching between schema variants.\n\n**New (correct) behavior**: Undefined primitive fields now remain `undefined` or receive proper default values according to their type when switching between schema variants.\n\nThis change fixes [#4709](https://github.com/rjsf-team/react-jsonschema-form/issues/4709) and was implemented in [#4710](https://github.com/rjsf-team/react-jsonschema-form/pull/4710).\n\n**Impact**: If your application was incorrectly relying on undefined primitive fields becoming `{}` objects, you may need to update your form validation or data processing logic to handle proper primitive values or `undefined` instead.\n\n#### Optional array defaulting (POTENTIAL)\n\nA bug fix was implemented that changes how optional arrays are initialized during the `formData` defaulting phase.\n\n**Previous (buggy) behavior**: Optional arrays were initialized to `[]`.\n\n**New (correct) behavior**: Optional arrays are no longer initialized.\n\n**Impact**: If your application was incorrectly relying on optional arrays being initialized this way, you may need to update it to handle the corrected behavior.\n\n#### SchemaField removed Bootstrap 3 classes\n\nIn fixing [#2280](https://github.com/rjsf-team/react-jsonschema-form/issues/2280), the following `Bootstrap 3` classes\n(`form-group`, `has-error` and `has-danger` error classes) were removed from the `classNames` prop passed down to the\n`FieldTemplate`. They were instead moved into the `core` theme's `WrapIfAdditionalTemplate` to ensure that theme was\nunchanged.\n\nAdditionally, the Bootstrap 3 classes `panel`, `panel-default`, `panel-body`, and `form-group` were removed from the\n`MultiSchemaField` component in the `@rjsf/core` package, and moved into the `core` theme's `MultiSchemaFieldTemplate`\nto ensure that the theme was unchanged.\n\nAs a result, the themes (other than `core`) will no longer render these classes.\n\nIf you use a non-`core` theme and were relying on them for in your application's styling or behavior (via css overrides\nperhaps), then you can still use the non-`Bootstrap 3` RJSF marker class (see below) or your specific theme's error classes.\n\n#### Prefixed RJSF template and field marker classes\n\nMany of the `core` RJSF templates and field implementations that are shared across all themes were updated to add the\n`rjsf-` prefix to the marker classes that are being added to the rendered HTML. The following table highlights the old\nand new marker classes. If you were relying on any of these classes, simply do a rename:\n\n| old marker class | new marker class |\n| ------------------------------ | ----------------------------------- |\n| `field` | `rjsf-field` |\n| `field-` | `rjsf-field-` |\n| `field-array` | `rjsf-field-array` |\n| `field-array-of-` | `rjsf-field-array-of-` |\n| `field-array-fixed-items` | `rjsf-field-array-fixed-items` |\n| `field-error` | `rjsf-field-error` |\n| `field-hidden` | `rjsf-field-hidden` |\n| `array-item` | `rjsf-array-item` |\n| `config-error` | `rjsf-config-error` |\n| `array-item-add` | `rjsf-array-item-add` |\n| `array-item-copy` | `rjsf-array-item-copy` |\n| `array-item-move-down` | `rjsf-array-item-move-down` |\n| `array-item-move-up` | `rjsf-array-item-move-up` |\n| `array-item-remove` | `rjsf-array-item-remove` |\n| `object-property-expand` | `rjsf-object-property-expand` |\n| `object-property-remove` | `rjsf-object-property-remove` |\n\n#### optionsList\n\nThe generics ordering on the `optionsList()` function was changed from `` to `` to be consistent with the rest of the APIs.\n\n## New Features\n\n### New types\n\nThe following new types were added to `@rjsf/utils`:\n\n- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array.\n- `ContainerFieldTemplateProps`: The common properties of the two container templates: `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps`\n- `FallbackFieldProps`: The properties passed to the new `FallbackField` component\n- `FallbackFieldTemplate`: The properties passed to the new `FallbackFieldTemplate` component\n- `FieldPathList` - The list of path elements that represents where in the schema a field is located\n- `FieldPathId` - Type describing an id and path used for a field\n- `FoundFieldType`: The interface for the return value of the `findFieldInSchema` function\n- `GlobalFormOptions`: The set of options from the `Form` that will be available on the `Registry` for use in everywhere the `registry` is available.\n- `GridTemplateProps`: The properties that are passed to a `GridTemplate`\n- `MultiSchemaFieldTemplateProps`: The properties that are passed to a `MultiSchemaFieldTemplate`\n- `OptionalDataControlsTemplateProps`: The properties that are passed to a OptionalDataControlsTemplate implementation\n- `TestIdShape`: The interface for the test ID proxy objects that are returned by the `getTestId` utility function\n\n### New non-validator utility functions\n\nMany new or formerly internally private utility functions are available in `@rjsf/utils`:\n\n- `buttonId(id: FieldPathId | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')`: Generates consistent ids for RJSF buttons\n- `getTestIds(): TestIdShape`: Returns an object of test IDs that can only be used in test mode, helpful for writing unit tests for React components\n- `hashObject(object: unknown): string`: Stringifies an `object` and returns the hash of the resulting string\n- `hashString(string: string): string`: Hashes a string into hex format\n- `isFormDataAvailable(formData?: T)(formData?: T): boolean`: Determines whether the given `formData` represents valid form data, such as a primitive type, an array, or a non-empty object\n- `isRootSchema(registry: Registry, schemaToCompare: S): boolean`: Helper to check whether a JSON schema object is the root schema\n- `lookupFromFormContext(regOrFc: Registry | Registry['formContext'], toLookup: string, fallback?: unknown)`: Given a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`\n- `optionalControlsId(id: FieldPathId | string, element: 'Add' | 'Msg' | 'Remove')`: Return a consistent `id` for the optional data controls `element`\n- `shouldRenderOptionalField(registry: Registry, schema: S, required: boolean, uiSchema?: UiSchema): boolean`: Determines if this field should be rendered with the Optional Data Controls UI\n- `sortedJSONStringify(object: unknown): string`: Stringifies an `object`, sorts object fields in consistent order before stringifying it\n- `toFieldPathId(fieldPath: string | number, globalFormOptions: GlobalFormOptions, parentPath?: FieldPathId | FieldPathList, isMultiValue?: boolean)`: Constructs the `FieldPathId` for `fieldPath` and the optional `parentPath`, using `globalFormOptions`\n- `useAltDateWidgetProps(props: WidgetProps): UseAltDateWidgetResult`: which encapsulates the logic needed to render an `AltDateWidget` with optional `time` elements\n- `useDeepCompareMemo(newValue: T): T`: Hook that stores and returns a `T` value. If `newValue` is the same as the stored one, then the stored one is returned, otherwise `newValue` is stored and returned\n- `useFileWidgetProps(value: string | string[] | undefined | null, onChange: (value?: string | null | (string | null)[]) => void, multiple?: boolean): UseFileWidgetPropsResult`: Hook which encapsulates the logic needed to read and convert a `value` of `File` or `File[]` into the props needed by a `FileWidget` implementation.\n\n### New validator-based utility functions\n\nThree new validator-based utility functions are available in `@rjsf/utils`:\n\n- `findFieldInSchema(validator: ValidatorType, rootSchema: S, path: string | string[], schema: S, formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): FoundFieldType`: Finds the field specified by the `path` within the root or recursed `schema`\n- `findSelectedOptionInXxxOf(validator: ValidatorType, rootSchema: S, schema: S, fallbackField: string,xxx: 'anyOf' | 'oneOf', formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): S | undefined`: Finds the option that matches the selector field in the `schema` or undefined if nothing is selected\n- `getFromSchema(validator: ValidatorType, rootSchema: S, schema: S, path: string | string[], defaultValue: T | S, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): T | S`: Reads the value at `path` within a schema, additionally retrieving `$ref`s as needed to resolve schemas\n\n### Changes to existing utility functions\n\n- `getDefaultFormState()`: Added an optional `initialDefaultsGenerated` boolean flag that indicates whether or not initial defaults have been generated\n- `retrieveSchema()`: Added an optional `resolveAnyOfOrOneOfRefs` boolean flag that causes the internal `resolveAllSchemas()` to resolve `$ref`s inside of the options of `anyOf`/`oneOf` schemas\n - This new optional flag was added to the `SchemaUtilsType` interface's version of `retrieveSchema()` as well.\n- `validationDataMerge()`: Added optional `preventDuplicates` boolean flag that causes the `mergeObjects()` call to receive `preventDuplicates` instead of `true`\n\n### initialFormData prop added to Form\n\nA new `initialFormData` prop was added to `Form` to support providing initial values for an **\"uncontrolled\"** React component.\nAs a result, a small change was made so that `formData` now causes the `Form` to behave as a **\"controlled\"** React component.\n\nThe programmatic `reset()` will ensure that an **\"uncontrolled\"** form is reset back to the `initialFormData` values when triggered.\n\n### setFieldValue() added to Form\n\nA new programmatic function, `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void` was added to the `Form`.\nIt allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a `FieldPathList`.\nTo set the root element, used either `''` or `[]` for the path. Passing undefined will clear the value in the field.\n\n### liveValidate and liveOmit performance improvement\n\nBecause `liveValidate` and `liveOmit` can have serious performance impacts in the `Form`, those flags were updated to add the following new options:\n\n- 'onChange' - Live validate and live omit will happen as part of the `onChange` processing (the same as setting the flag to `true`)\n- 'onBlur' - Live validate and live omit will happen as part of the `onBlur` processing, saving the computations until the user is done inputting data. If any changes to the state occur due to this processing, the `onChange()` event will be sent back to the client with the new data.\n\n> NOTE: Due to this new feature, the old `boolean` options on those two flag has been deprecated. In a future major release, you will only be able to pass `onChange`, `onBlur` to activate the feature or `undefined` to disable it\n\n### Optional Data Controls\n\nRJSF 6.x introduces a new feature that allows developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields.\n\nSee the documentation for [enableOptionalDataFieldForType](../api-reference/uiSchema.md#enableoptionaldatafieldfortype) for more information.\n\n### Dynamic UI Schema for Array Items\n\nRJSF 6.x introduces a new feature that allows dynamic UI schema generation for array items.\nThe `items` property in a `uiSchema` can now accept a function that returns a UI schema based on the array item's data, index, and form context.\n\n```typescript\nconst uiSchema: UiSchema = {\n myArrayField: {\n items: (itemData, index, formContext) => {\n // Return different UI schemas based on item data\n if (itemData?.type === 'special') {\n return { 'ui:widget': 'textarea' };\n }\n return { 'ui:widget': 'text' };\n },\n },\n};\n```\n\nThis feature is fully backward compatible - existing forms using object-based `uiSchema.items` will continue to work without changes.\nSee the [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) documentation for comprehensive examples and usage patterns.\n\n### Custom field `name` generation\n\nRJSF 6.x adds support for customizing how HTML `name` attributes are generated for form fields via the new [`nameGenerator`](../api-reference/form-props.md#namegenerator) prop. This enables proper form data submission to backend frameworks that expect specific naming conventions like bracket notation (`root[tasks][0][title]`) for PHP/Rails or dot notation (`root.tasks.0.title`) for other frameworks.\n\nThe default behavior is unchanged if the prop is not provided.\n\n### Opt-in Fallback UI for unsupported types\n\nRJSF 6.x introduces a new `FallbackField` component that provides a user-friendly UI for unsupported or unrecognized schema types. This new functionality displays a selection box used to choose a JSON primitive type, and a field for the formData that matches the selected type. To use this new feature, which takes the place of the existing `UnsupportedField` component, set the new `useFallbackUiForUnsupportedType` prop to `true` on the `Form` component.\n","packages/docs/docs/usage/layout-grid.md":"# Layout Grid\n\nVersion 6 of RJSF introduced a new way of generating forms using the `UiSchema`, via the Layout Grid.\nUnlike the original method of showing each field in the JSON Schema, in order, as they appear hierarchically within the\nnested object hierarchy, the Layout Grid lets you define where each field goes on a grid in any place/order you choose.\nIt even adds the ability to pass additional props to the rendering widget for each element being displayed.\n\nThe Layout Grid takes full advantage of the `UiSchema`'s ability to customize the `ui:field` that is used to render a field\nor collection of fields by providing a new out-of-the-box field implementation called `LayoutGridField` that you can\nassign to the whole of the `schema` or just a piece of it. It also comes with its own \"syntax\" that lets you define\na `row`, a `col`umn, and a set of `columns`. It also provides `condition`al logic that describes how a subset of the grid\ncan be hidden/shown based upon the value(s) of a field. It even supports the inclusion of custom render components that\nare not associated with a field. Finally, there is built-in support for doing a named look up of data within a special\nlocation in the `FormContext`.\n\nSince each theme that RJSF supports has its own unique grid system, the `uiSchema` that one creates for the\n`LayoutGridField` for one theme will most likely not work for any other theme unless two themes have the exact same\ngrid specification props. It also requires that one understand how to use the grid system of the theme and how it\ninterplays with the `LayoutGridField`'s \"syntax\". In other words, it will likely take some experimentation to get the\ngrid looking exactly the way you want it to.\n\nLet's break down how to use the `LayoutGridField` one step at a time.\n\n## Defining the LayoutGridField to reordering rows\n\nThe `LayoutGridField` is designed to be used within the `uiSchema` via the `ui:field` syntax. It must be accompanied by\nthe definition of the grid within the new `ui:layoutGrid` syntax. First let's start with a fairly simple `schema` that\nlooks like:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"person\": {\n \"title\": \"Person Info\",\n \"type\": \"object\",\n \"properties\": {\n \"first\": {\n \"title\": \"First Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n },\n \"middle\": {\n \"title\": \"Middle Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n },\n \"last\": {\n \"title\": \"Last Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n }\n },\n \"required\": [\"first\", \"last\"]\n }\n }\n}\n```\n\nIf you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII\ndrawing:\n\n```text\nPerson Info\n First Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Middle Name\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Last Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n```\n\nIf you wanted to switch the order of the fields or remove middle name entirely, you could change the JSON schema, which\nis usually not desirable for most users. You could also use the `ui:order` feature and/or `ui:widget: \"hidden\"` in the\n`uiSchema` to accomplish this without changing the schema. And now you can also use the very flexible and powerful\n`LayoutGridField` field in the`uiSchema`.\n\nNow let's add a `uiSchema` that will allow us to change the order of the fields to be `Last Name`, `Middle Name` and `First Name`.\nThis will highlight the first elements of the new \"syntax\"; `ui:layoutGrid` and `ui:row` :\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"children\": [\"person.last\", \"person.middle\", \"person.first\"]\n }\n }\n}\n```\n\nThis results in the following UI using the `core` theme via the `Bootstrap 3` grid system:\n\n```text\n Last Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Middle Name\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n First Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n```\n\nAs mentioned before, another theme's grid system may render the above example differently. Most likely as three fields\nlined up next to each other. Assume all examples from here on out will be shown using the `core` theme. You may have to\nadjust the `uiSchema` for your theme to achieve the same results.\n\n### `ui:layoutGrid`\n\nThe `LayoutGridField` will do nothing if used as a field without having the `ui:layoutGrid` object as its sibling.\nThis root \"syntax\" keyword defines the structure of how the grid should be laid out for the field. Due to the nature of\nJSON objects, it must contain a single `ui:row` \"syntax\" keyword inside of which the rest of the grid is defined. Providing\na second `ui:row` will create an invalid object.\n\n### `ui:row`, part 1\n\nThe `ui:row` \"syntax\" represents a row of data in the grid. It has, at minimum, a single `children` property that\ndescribes what that row will render. In this first example, the children are the ids of the fields to render in order,\nas single grid elements. There is a second version of this syntax which is identical to the first in behavior:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person.last\", \"person.middle\", \"person.first\"]\n }\n}\n```\n\nHere the array is implicitly assumed to be the `children` property. Let's take a look at another example that will generate\nthe exact same UI. The example below shows what happens when you use the `LayoutGridField` on a sub-object within the\nhierarchy:\n\n```json\n{\n \"person\": {\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"last\", \"middle\", \"first\"]\n }\n }\n}\n```\n\nHere you can see the `person.` prefix on the field ids is no longer necessary. This is because the scope of the field is\nnow the `person` object rather than the whole of the `schema`. You may have noticed from the example UI shown above that\nthe `Person Info` header for the object disappeared. This is because we are no longer iterating through the hierarchy to\nrender the object. Don't worry, there is another new field that was created to support just this use case (see next\nsection).\n\nAlso, if you wanted to entirely remove the `Middle Name` from your form because of a requirements change, you don't have\nto touch the JSON schema anymore. Instead you would just update the `uiSchema` as follows:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person.last\", \"person.first\"]\n }\n}\n```\n\n## LayoutHeaderField\n\nThe `LayoutHeaderField` is another new field built into RJSF v6. Its sole purpose is to render the `title` for a collection\nof grid elements. It will read the `title` using the exact same mechanism as does the regular `Form`; first as `ui:title`\nif specified, then as `schema.title` if specified, then as `name` of the field. In order to restore the `Person Info`\nheader to the example above, we have to make a few additions to the `uiSchema`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person\", \"person.last\", \"person.middle\", \"person.first\"]\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\n## Defining the LayoutGridField to put the fields in a single row\n\nNow let's say the requirements changed again, and you have to show the first, middle and last name fields in a single row.\nWell, in the past, that would require quite a lot of customizing of RJSF's `core` templates. Now with the `LayoutGridField`\nit's just a matter of updating the `uiSchema` again, this time using more of the new \"syntax\"; `ui:col` and `ui:columns`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n }\n ]\n },\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.first\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.middle\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.last\"\n }\n ]\n }\n }\n ]\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nPassing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:\n\n```text\nPerson Info\n First Name* Middle Name Last Name*\n +--------------------------+ +--------------------------+ +--------------------------+\n | | | | | |\n +--------------------------+ +--------------------------+ +--------------------------+\n```\n\nThe above example uses the `core` UI theme's `Bootstrap 3` grid classes to make the `Person Info` span 12 columns within\na row and each of the person name fields span 4 columns within a row. It also adds the \"row\" grid class to the outermost\n`ui:row` to make whole UI be part of a grid row.\n\nNow sometimes, depending on the grid system, you don't need to explicitly define both second-level rows, instead\ndepending on the column grid behavior. Luckily the `core` theme's grid system is one of those, so the following UI\nschema will also produce the exact same result.\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"person.first\", \"person.middle\", \"person.last\"]\n }\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nHere is how the `LayoutGridField` \"syntax\" above is used.\n\n### `ui:row`, part 2\n\nAs the above examples show, the `ui:row` object can be nested inside of the `children` of a `ui:row`. This signifies the\nnesting of one row inside another row. It also shows that any additional properties added to the `ui:row` object, in this\ncase the `\"className\": \"row\"` will be spread onto the underlying theme's grid implementation. You may also pass other\nproperties, such as `style` blocks or, in the case of other themes, properties that will affect the underlying grid system\ncomponents.\n\n### `ui:col`\n\nThe `ui:col` \"syntax\" represents a single column of data in the grid. Like `ui:row` this syntax will spread the\n`\"className\": \"col-xs-12\"` and `\"className\": \"col-xs-4\"` properties onto the underlying theme's grid implementation, as\nwell as any other properties, such as `style` blocks, etc. In its most compact form, the `ui:col` can be written as\n`{ \"ui:col\": [\"person\"] }`, in a manner similar to `ui:row` where the array is implicitly assumed to be the `children`\nproperty.\n\nIn its most expanded form, the `ui:col` contains an array of `children` in the form of objects with `\"name\": \"\"`\nas the minimum required property. Any additional properties added within the object will be passed along to the\nunderlying `Widget` implementation in the `ui:options` portion of the `uiSchema`. This allows for fine-tuning any\nout-of-the-box or custom widgets. Let's take a look at an example where the `Middle Name` column hides its label adding\na margin to take up the space once occupied by the label, and is reduced in size relative to the `First Name` and\n`Last Name`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n }\n ]\n },\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-5\",\n \"children\": [\"person.first\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"style\": {\n \"margin-top\": \"25px\"\n },\n \"children\": [\n {\n \"name\": \"person.middle\",\n \"label\": false\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-5\",\n \"children\": [\"person.last\"]\n }\n }\n ]\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nPassing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:\n\n```text\nPerson Info\n First Name* Last Name*\n +--------------------------------+ +---------+ +--------------------------------+\n | | | | | |\n +--------------------------------+ +---------+ +--------------------------------+\n```\n\n### `ui:columns`\n\nThe `ui:columns` \"syntax\" represents a group of columns in the grid. Like `ui:row` and `ui:col` this syntax will spread\nthe properties onto the underlying theme's grid implementation (in an earlier example `\"className\": \"col-xs-4\"` ), as\nwell as any other properties, such as `style` blocks, etc. It is short-hand notation for rendering a group of columns\nall with the same grid system properties. As shown in the above examples, the set of three `ui:col` definitions for\nfirst, middle and last names are the same as the single `ui:columns` definition with all three listed as children.\n\nIn its most compact form, the `ui:col` can be written as `{ \"ui:columns\": [\"person.first\", \"person.last\"] }`, in a\nmanner similar `ui:row` and `ui:col` where the array is implicitly assumed to be the `children` property. The\n`ui:columns` syntax also supports `children` in the form of objects with `\"name\": \"\"` as the minimum required\nproperty, passing along any additional properties to the underlying `Widget` as `ui:options`.\n\n## GridTemplate\n\nThe concept of a theme's grid system has been mentioned several times in the documentation so far. Remember that each\ntheme's grid system is unique to that theme. It is essential to understand how your theme's grid system works in order\nto know how to write the `uiSchema` to get the grid layout you want for your fields.\n\nIf you want to know how your theme implements its grid system, take a look at the `GridTemplate` source code. You may\nalso override your theme's `GridTemplate` with your own to fine tune how the properties you pass to the `ui:row`, `ui:col`,\nand `ui:columns` are handled. Each `ui:row` and `ui:col` will render a `GridTemplate` passing `column: false` for `ui:row`\nand `column: true` for `ui:col`. The `ui:columns` syntax will render a `GridTemplate` around each of the `children`. Any\nadditional properties besides `children` will be directly passed to the `GridTemplate`.\n\n## Defining the LayoutGridField to render fields conditionally\n\nThe `GridLayoutField` also supports the concept of conditionally rendering a set of fields based upon the value(s) of\nanother field within the `formData`. Because the layout grid works on a field-by-field basis, it treats the render of a\n`anyOf` or `oneOf` field differently. It presents to the user ONLY the checkbox group (anyOf) or radio button group\n(oneOf). In order to render any nested fields associated with them, one has to explicitly specify them in the `uiSchema`.\n\nFor the purposes of demonstrating the feature, let's work with a `schema` containing a fairly simple `oneOf` field with\nnested objects:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"title\": \"My Name\",\n \"type\": \"string\"\n },\n \"favorite\": {\n \"title\": \"My Favorite Shape\",\n \"discriminator\": {\n \"propertyName\": \"shape\"\n },\n \"oneOf\": [\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Line\",\n \"type\": \"string\",\n \"const\": \"line\"\n },\n \"length\": {\n \"title\": \"Line Length\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"length\"]\n },\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Circle\",\n \"type\": \"string\",\n \"const\": \"circle\"\n },\n \"radius\": {\n \"title\": \"Radius\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"radius\"]\n },\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Polygon\",\n \"type\": \"string\",\n \"const\": \"polygon\"\n },\n \"sides\": {\n \"title\": \"# of Sides\",\n \"type\": \"number\",\n \"minimum\": 3,\n \"default\": 3\n },\n \"length\": {\n \"title\": \"Side Length\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"sides\"]\n }\n ]\n }\n },\n \"required\": [\"name\"]\n}\n```\n\nIf you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII\ndrawing:\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 1 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Line*\n +--------------------------------------------------------------------------+\n | line |\n +--------------------------------------------------------------------------+\n\n Line Length*\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\nThe second input is a dropdown with the values `My Favorite Shape option 1`, `My Favorite Shape option 2` and\n`My Favorite Shape option 3`. When you change the dropdown the other fields below it change to match the objects within\nthe `oneOf` as follows:\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 2 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Circle*\n +--------------------------------------------------------------------------+\n | cirle |\n +--------------------------------------------------------------------------+\n\n Radius*\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\nand\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 3 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Polygon*\n +--------------------------------------------------------------------------+\n | polygon |\n +--------------------------------------------------------------------------+\n\n # of Sides*\n +--------------------------------------------------------------------------+\n | 3 |\n +--------------------------------------------------------------------------+\n\n Side Length\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\n> NOTE: The `LayoutGridField` does not currently work with a root-level `anyOf` or `oneOf` object since it requires that\n> everything being displayed in have a field id and they don't.\n\nNow let's add a `uiSchema` that will allow us to create a much more pleasing UI where the dropdown contains the actual\n`oneOf` values and the fields all show up on the side of the dropdown:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"name\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite\"]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"line\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.length\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"circle\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.radius\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"polygon\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:columns\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.sides\", \"favorite.length\"]\n }\n }\n ]\n }\n }\n ]\n }\n },\n \"favorite\": {\n \"ui:widget\": \"select\"\n }\n}\n```\n\nThis results in the following UI using the `core` theme via the `Bootstrap 3` grid system:\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* Line Length*\n +--------------------------+ +--------------------------+\n | Line v | | |\n +--------------------------+ +--------------------------+\n```\n\nand\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* Radius*\n +--------------------------+ +--------------------------+\n | Circle v | | |\n +--------------------------+ +--------------------------+\n```\n\nand\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* # of Sides* Side Length\n +--------------------------+ +--------------------------+ +--------------------------+\n | Polygon v | | 3 | | |\n +--------------------------+ +--------------------------+ +--------------------------+\n```\n\nAs mentioned before, another theme's grid system may render the above example differently.\n\n### `ui:condition`\n\nThe `ui:condition` \"syntax\" represents conditional rendering of data in the grid. The condition has four required\nproperties, `field`, `value`, `operator` and `children`. Let's talk about each in turn.\n\n- `field`: The dotted-path name of a leaf-level field that makes up the left-side of the condition, used to get data from the `formData`\n- `value`: A single value or a list of values that make up the right-side of the condition\n- `operator`: One of the following three options that controls how the left and right sides of the condition are compared\n 1. `all`: This operator will pass when the right-side and left-side contains all the same value(s)\n 2. `some`: This operator will pass when the right-side and left-side contain as least one value in common\n 3. `none`: This operator will pass when the right-side and left-side do not contain any values in common\n- `children`: The list of `ui:row`, `ui:col` or `ui:columns` definitions to display when the condition is true\n\nIn the example above, when the `favorite.shape` field value is `line` then the `favorite.length` field is displayed in\nthe grid spanning 4 columns. When it is `circle`, then `favorite.radius` is displayed in the grid spanning 4 columns.\nWhen it is `polygon`, then `favorite.sides` and `favorite.length` are displayed in the grid, each spanning 4 columns.\n\nWe leave it up to the reader to create other examples that use different `operator`s.\n\n## Other capabilities of the LayoutGridField\n\nThere are a few more small features that the `LayoutGridField` supports. First, there is a `FormContext` named lookup\ncapability that allows one to provide a name-mapped set of strings, components and functions in the `FormContext` inside\nof a well-known location, `layoutGridLookupMap` and then reference those names within the `uiSchema`. Second, the grid\nrendering code recognizes an alternate \"syntax\" for the objects in `children` arrays in order to display any random\nReact element within a grid. Below are examples of them both.\n\n### Named lookup support for className\n\nSince some themes, like `mui`, support CSS-in-JS class names, one cannot hard-code the actual `className` in the\n`uiSchema` easily. That is where the name-mapped information in the `FormContext` comes into play. Let's assume that\nyou are using a theme like `mui` and you need to style a `Grid` using CSS-in-JS you could do something like the following:\n\n```json uiSchema.json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"GridStyle anotherClass\",\n \"children\": [\"person.last\", \"person.first\"]\n }\n }\n}\n```\n\n```tsx\nimport { styled, Grid } from '@mui/material';\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the Person Info schema from above\nimport schema from './personSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './uiSchema.json';\n\nconst css = {\n STYLED_GRID: 'StyledGrid',\n};\n\n// Define the style\nconst StyledGrid = styled(Grid)`\n ${`& .${css.STYLED_GRID}`} {\n p {\n /* Override default presentation of

tags within a grid */\n font-weight: bold\n color: dark-purple !important;\n }\n }\n`;\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n GridStyle: css.STYLED_GRID,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nAs you can see in the example, we've created a `FormContext` that has the named-lookup map containing the\n`css.STYLED_GRID` object mapped to `GridStyle`. In the `uiSchema` we then add `GridStyle` as the `className` for the\ngrid rows. Under the hood, the `LayoutGridField` automatically goes through the `className` props and does a lookup of\neach class name in the `FormContext`, replacing the `GridStyle` with the generated `css.GRID_STYLE` name. And because the\nother class name in the example, `anotherClass`, is not mapped in the named-lookup map, it will passed to the\n`GridTemplate` as is. In summary, if the CSS-in-JS class is called `StyledGrid-1asd123` then the `className` property\npassed to the `GridTemplate` will be `\"StyledGrid-1asd123 anotherClass\"`.\n\n### Rendering a custom React element in the grid\n\nBecause you have full control of how you layout your components in the grid, what do you do when you want to add an\nelement to your presentation that isn't directly associated with a `schema`, like say an image? Well, that is actually\nreally easy using a variant of the \"syntax\" for a `children` node in the `uiSchema`. Here's how:\n\n```json shapeUiSchema.json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"name\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite\"]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"line\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"LineImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.length\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"circle\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"CircleImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.radius\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"polygon\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"PolygonImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-xs-3\",\n \"children\": [\"favorite.sides\", \"favorite.length\"]\n }\n }\n ]\n }\n }\n ]\n }\n },\n \"favorite\": {\n \"ui:widget\": \"select\"\n }\n}\n```\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './shapeUiSchema.json';\n// Now import my 3 shape React components\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n LineImageComponent: LineShape,\n CircleImageComponent: CircleShape,\n PolygonImageComponent: PolygonShape,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nAs you can see in the example, we've created a `FormContext` that contains the named-lookup map containing the three\ncomponents (`LineShape`, `CircleShape`, `PolygonShape`) mapped to the lookup keys `LineImageComponent`,\n`CircleImageComponent`, `PolygonImageComponent` respectively. In the `uiSchema`, we use the optional `render` property\nin the `children` object \"syntax\" to define the lookup name of the component we want to use. The `LayoutGridField` will\nthen do a lookup of the `render` string. If you forget to add the `formContext` or the mapping in the `LOOKUP_NAME_MAP`\nthen nothing will be rendered.\n\nIf you provide an empty string as the `name` along with the `render`, then your component will be rendered only with any\nadditional properties passed in the `children` object. If you provide a `name` that matches a field in the `schema`,\nthen the `render` component won't be used. Otherwise, the `render` component will be passed all of the `FieldProp`s,\nincluding the `schema`, `uiSchema`, `fieldPathId`, `errorSchema`, `formData`, `registry`, etc.\n\nSo our example will render the `LineShape` component with `size: 'small-size'` in the second column between the\n`My Favorite Shape` dropdown and the `Line Length` input. Also, it will render the `CircleShape` component with\n`size: 'small-size'` in the second column between the `My Favorite Shape` dropdown and the `Radius` input. Finally,\nit will render the `PolygonShape` component with `size: 'small-size'` in the second column between the\n`My Favorite Shape` dropdown and the `# of Sides` input.\n\n#### Passing components directly in uiSchema\n\nThe `render` \"syntax\" also works if you have an object-based `uiSchema` and pass the component function directly rather\nthan use a named lookup. For example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Now import my 3 shape React components that understand how to extract the props from `formData`\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\nconst uiSchema: UiSchema = {\n 'ui:field': 'LayoutGridField',\n 'ui:layoutGrid': {\n 'ui:row': {\n className: 'row',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: ['name'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite'],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'line',\n operator: 'all',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite.length'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'lineImage',\n render: LineShape,\n dataPath: 'favorite.length',\n },\n ],\n },\n },\n ],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'circle',\n operator: 'all',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite.radius'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'circleShape',\n render: CircleShape,\n dataPath: 'favorite.radius',\n },\n ],\n },\n },\n ],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'polygon',\n operator: 'all',\n children: [\n {\n 'ui:columns': {\n className: 'col-xs-4',\n children: ['favorite.sides', 'favorite.length'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'polygonShape',\n render: PolygonShape,\n dataPaths: ['favorite.sides', 'favorite.length'],\n },\n ],\n },\n },\n ],\n },\n },\n ],\n },\n },\n favorite: {\n 'ui:widget': 'select',\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nLet's assume that the `LineShape`, `CircleShape` and `PolygonShape` components configured above use the `dataPath[s]`\nproperty to extract the fields from the `formData` that is being passed to them in order to display the exact size of\nthe shape. The grid above will render the `*Shape` components in a 12-wide column below the field inputs.\n\n### Other named lookup situations\n\nOther `children` properties also do named lookups. In the `shapeUiSchema.json` example above, if the `*Shape` components\nare upgraded to change the input of the `size` prop to have newer values, one could use the `FormContext` to map the\n`small-size` value to a newer value. For example, if you wanted to use the new `medium` value for the `size` prop, or\nif you wanted to programmatically control which size to use outside of the `Form` you could update the example as\nfollows:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './shapeUiSchema.json';\n// Now import my 3 shape React components\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\nconst MEDIUM_SIZE = 'medium';\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n LineImageComponent: LineShape,\n CircleImageComponent: CircleShape,\n PolygonImageComponent: PolygonShape,\n 'small-size': MEDIUM_SIZE,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## So much flexibility available\n\nThese examples are just a tiny fraction of the ways the `LayoutGridField` can be used. Remember, understand the theme's\ngrid system and the \"syntax\" described above and [here](../api-reference/LayoutGridField.md). Play around, you can build\njust about any UI you want and still have it populate the JSON schema's `formData`!\n\n**ENJOY!!**\n","packages/docs/docs/usage/themes.md":"# Themes\n\nBy default, this library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics,\nmeaning that you must load the Bootstrap stylesheet on the page to view the form properly. You can use another theme by importing one of the packages listed below.\n\n## Supported themes\n\n| Theme Name | Status | Package Name / Link |\n| --------------------- | --------- | ----------------------- |\n| antd | Published | `@rjsf/antd` |\n| Chakra UI | Published | `@rjsf/chakra-ui` |\n| Bootstrap 3 (default) | Published | `@rjsf/core` |\n| fluentui-rc | Published | `@rjsf/fluentui-rc` |\n| mantine | Published | `@rjsf/mantine` |\n| material-ui | Published | `@rjsf/mui` |\n| PrimeReact | Published | `@rjsf/primereact` |\n| react-bootstrap | Published | `@rjsf/react-bootstrap` |\n| Semantic UI | Published | `@rjsf/semantic-ui` |\n| shadcn | Published | `@rjsf/shadcn` |\n\n## Using themes\n\nTo use a theme from a package, just import the `` component from that package. For example, to use the Material UI form,\nfirst install both `@rjsf/core` and `@rjsf/mui`. Then you can import the form by doing:\n\n```ts\nimport Form from '@rjsf/mui';\n```\n\nEach theme renders against its own UI framework, so the framework's stylesheet has to be loaded for the form to look\nright. `@rjsf/shadcn` in particular carries no styling of its own: it expects your application to build Tailwind and\nscan the package for class names, or to import one of its prebuilt stylesheets. See the\n[`@rjsf/shadcn` README](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/shadcn/README.md#theming)\nfor both routes.\n\nIf you would like to contribute a theme with a new UI framework, please develop the theme using the `withTheme` component described in [Theme Customization](../advanced-customization/custom-themes.md) and make a PR!\n\nYou can also use the uiSchema to add custom CSS class names to your form.\n\n## Customizing with other frameworks\n\nThe default theme is bootstrap 3. In order to use another theme, you must first install `@rjsf/core`.\n\nFor example, to use the standard bootstrap 3 form, you can run:\n\n```ts\nimport Form from '@rjsf/core';\n```\n\nTo use the material-ui form, you should first install both `@rjsf/core` and `@rjsf/material-ui`. Then, you can run:\n\n```ts\nimport Form from '@rjsf/material-ui';\n```\n\nFor more information on how to create a custom theme, see documentation on the `withTheme` component.\n","packages/docs/docs/usage/validation.md":"# Validation\n\nWhen the form is submitted, the form data is validated to conform to the given JSON schema;\n\nAs of version 5, as a result of decoupling the validation implementation from the `Form`, a `validator` implementation is required to be passed to all `Form`s.\nReact Json Schema Form provides a default `@rjsf/validator-ajv8` implementation that uses version 8 of the [ajv](https://github.com/ajv-validator/ajv) validator.\nThe error messages generated by this new validator differ from those provided by the original validator due to it using a newer version.\nIf you depend on having specifically formatted messages, then using this validator would constitute a breaking change for you.\n\nIt is also possible for you to provide your own implementation if you desire, as long as it fulfills the `ValidatorType` interface specified in `@rjsf/utils`.\n\n## API documentation\n\nThe documentation for the APIs associated with the AJV 8 validator package can be found [here](../api-reference/validator-ajv8.md)\n\n## Precompiled validators\n\nIn 5.7.0, support for precompiled validators was added to the `@rjsf/validator-ajv8` package.\nThe main use case for this is to overcome issues with `unsafe-eval` warnings from the browser caused by strict Content Security Policy settings.\nSee the [Standalone Validation Code](https://ajv.js.org/standalone.html) section of the AJV documentation for more details about precompiled validators.\n\nDue to how RJSF uses the AJV validator in determining `anyOf/oneOf` selections and how it resolves dependencies, if-then-else and references ($ref) in schemas via the `retrieveSchema()` utility method, RJSF provides its own schema compilation API built on-top-of the one provided by AJV 8.\nIf you are wanting to use a precompiled validator, two steps are required:\n\n1. Precompiling the schema into a set of validator functions\n2. Providing those precompiled validator functions to a `ValidatorType` implementation in the `Form`\n\n### Schema precompilation\n\nThe first step in the process is to compile a schema into a set of validator functions that are saved into a commonJS-based Javascript file.\nThe `@rjsf/validator-ajv8` package exports the `compileSchemaValidators()` function that does this.\nIt is expected that this function will be used in a manner similar to the following:\n\n```cjs\nconst compileSchemaValidators = require('@rjsf/validator-ajv8/compileSchemaValidators').default;\nconst yourSchema = require('path_to/yourSchema'); // If your schema is a js file\n\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.js');\n```\n\nIf you are currently using the `customizeValidator()` function to provide `additionalMetaSchemas`, `customFormats`,\n`ajvOptionsOverrides` and/or `ajvFormatOptions` then you can pass those in as the optional third parameter to the\n`compileSchemaValidators()` function in a manner similar to:\n\n```cjs\nconst { compileSchemaValidators } = require('@rjsf/validator-ajv8');\nconst yourSchema = require('path_to/yourSchema.json'); // If your schema is a json file\n\nconst options = {\n additionalMetaSchemas: [require('ajv/lib/refs/json-schema-draft-06.json')],\n customFormats: { 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/, 'area-code': /\\d{3}/ },\n ajvOptionsOverrides: {\n $data: true,\n verbose: true,\n },\n ajvFormatOptions: {\n mode: 'fast',\n },\n};\n\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.js', options);\n```\n\nIt is highly recommended to create a `compileYourSchema.js` file (or what ever name you want) with code similar to what is shown above and then, using node, run the code as follows:\n\n```\nnode compileYourSchema.js\n```\n\n> NOTE: You must have your schema provided within a file that can be parsed and turned into the set of precompiled validator functions.\n\n> Additional Note: If you are using Webpack or NextJS and are encountering an issue resolving `fs` during development, consult this [blog post](https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs) for how to solve the issue.\n\n### Using the precompiled validator\n\nAfter you have completed step 1 having generated your precompiled schema functions into the `yourCompiledSchema.js` output file (or whatever you called it), then you need to create a `ValidatorType` implementation from it to use in the `Form`.\nThe `@rjsf/validator-ajv8` package exports the `createPrecompiledValidator()` function for this.\nHere is an example of how to use your precompiled validator with your `Form`:\n\n```tsx\nimport { useMemo } from 'react';\nimport { createPrecompiledValidator, ValidatorFunctions } from '@rjsf/validator-ajv8';\nimport Form, { FormProps } from '@rjsf/core'; // Or whatever theme you use\n\nimport yourSchema from 'path_to/yourSchema'; // This needs to be the same file that was precompiled\nimport * as precompiledValidatorFns from 'path_to/yourCompiledSchema';\n\nfunction MyForm(props: Omit) {\n // Memoize the validator to avoid rerenders\n const validator = useMemo(\n () => createPrecompiledValidator(precompiledValidatorFns, yourSchema),\n [validatorFns, yourSchema],\n );\n\n return ;\n}\n\nrender(, document.getElementById('app'));\n```\n\n### Dynamically pre-compiling validators\n\nFor more advanced cases when schema needs to be precompiled on request - `compileSchemaValidatorsCode` can be used.\n\n```ts\nimport { compileSchemaValidatorsCode } from '@rjsf/validator-ajv8/compileSchemaValidators';\n\nconst code = compileSchemaValidatorsCode(schema, options);\n```\n\nFor the most part it is the same as `compileSchemaValidators`, but instead of writing the file - it returns generated code directly.\n\nTo use it on browser side - some modifications are needed to provide runtime dependencies in generated code needs to be provided.\n\nExample implementation of it:\n\n```tsx\nimport type { ValidatorFunctions } from '@rjsf/validator-ajv8';\n\nimport ajvRuntimeEqual from 'ajv/dist/runtime/equal';\nimport {\n parseJson as ajvRuntimeparseJson,\n parseJsonNumber as ajvRuntimeparseJsonNumber,\n parseJsonString as ajvRuntimeparseJsonString,\n} from 'ajv/dist/runtime/parseJson';\nimport ajvRuntimeQuote from 'ajv/dist/runtime/quote';\n// import ajvRuntimeRe2 from 'ajv/dist/runtime/re2';\nimport ajvRuntimeTimestamp from 'ajv/dist/runtime/timestamp';\nimport ajvRuntimeUcs2length from 'ajv/dist/runtime/ucs2length';\nimport ajvRuntimeUri from 'ajv/dist/runtime/uri';\nimport * as ajvFormats from 'ajv-formats/dist/formats';\n\n// dependencies to replace in generated code, to be provided by at runtime\nconst validatorsBundleReplacements: Record = {\n // '': ['', ],\n 'require(\"ajv/dist/runtime/equal\").default': ['ajvRuntimeEqual', ajvRuntimeEqual],\n 'require(\"ajv/dist/runtime/parseJson\").parseJson': ['ajvRuntimeparseJson', ajvRuntimeparseJson],\n 'require(\"ajv/dist/runtime/parseJson\").parseJsonNumber': ['ajvRuntimeparseJsonNumber', ajvRuntimeparseJsonNumber],\n 'require(\"ajv/dist/runtime/parseJson\").parseJsonString': ['ajvRuntimeparseJsonString', ajvRuntimeparseJsonString],\n 'require(\"ajv/dist/runtime/quote\").default': ['ajvRuntimeQuote', ajvRuntimeQuote],\n // re2 by default is not in dependencies for ajv and so is likely not normally used\n // 'require(\"ajv/dist/runtime/re2\").default': ['ajvRuntimeRe2', ajvRuntimeRe2],\n 'require(\"ajv/dist/runtime/timestamp\").default': ['ajvRuntimeTimestamp', ajvRuntimeTimestamp],\n 'require(\"ajv/dist/runtime/ucs2length\").default': ['ajvRuntimeUcs2length', ajvRuntimeUcs2length],\n 'require(\"ajv/dist/runtime/uri\").default': ['ajvRuntimeUri', ajvRuntimeUri],\n // formats\n 'require(\"ajv-formats/dist/formats\")': ['ajvFormats', ajvFormats],\n};\n\nconst regexp = new RegExp(\n Object.keys(validatorsBundleReplacements)\n .map((key) => key.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'))\n .join('|'),\n 'g',\n);\n\nfunction wrapAjvBundle(code: string) {\n return `function(${Object.values(validatorsBundleReplacements)\n .map(([name]) => name)\n .join(', ')}){\\nvar exports = {};\\n${code.replace(\n regexp,\n (req) => validatorsBundleReplacements[req][0],\n )};\\nreturn exports;\\n}`;\n}\n\nconst windowValidatorOnLoad = '__rjsf_validatorOnLoad';\nconst schemas = new Map<\n string,\n { promise: Promise; resolve: (result: ValidatorFunctions) => void }\n>();\nif (typeof window !== 'undefined') {\n // @ts-ignore\n window[windowValidatorOnLoad] = (loadedId: string, fn: (...args: unknown[]) => ValidatorFunctions) => {\n const validator = fn(...Object.values(validatorsBundleReplacements).map(([, dep]) => dep));\n let validatorLoader = schemas.get(loadedId);\n if (validatorLoader) {\n validatorLoader.resolve(validator);\n } else {\n throw new Error(`Unknown validator loaded id=\"${loadedId}\"`);\n }\n };\n}\n\n/**\n * Evaluate precompiled validator in browser using script tag\n * @param id Identifier to avoid evaluating the same code multiple times\n * @param code Code generated server side using `compileSchemaValidatorsCode`\n * @param nonce nonce attribute to be added to script tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce#using_nonce_to_allowlist_a_script_element)\n */\nexport function evaluateValidator(id: string, code: string, nonce: string): Promise {\n let maybeValidator = schemas.get(id);\n if (maybeValidator) return maybeValidator.promise;\n let resolveValidator: (result: ValidatorFunctions) => void;\n const validatorPromise = new Promise((resolve) => {\n resolveValidator = resolve;\n });\n schemas.set(id, {\n promise: validatorPromise,\n resolve: resolveValidator!,\n });\n\n const scriptElement = document.createElement('script');\n\n scriptElement.setAttribute('nonce', nonce);\n scriptElement.text = `window[\"${windowValidatorOnLoad}\"](\"${id}\", ${wrapAjvBundle(code)})`;\n\n document.body.appendChild(scriptElement);\n return validatorPromise;\n}\n```\n\nFrom React component this can be used as following:\n\n```tsx\nlet [precompiledValidator, setPrecompiledValidator] = React.useState();\nReact.useEffect(() => {\n evaluateValidator(\n schemaId, // some schema id to avoid evaluating it multiple times\n code, // result of compileSchemaValidatorsCode returned from the server\n nonce, // nonce script tag attribute to allow this ib content security policy for the page\n ).then(setPrecompiledValidator);\n}, [entityType.id]);\n\nif (!precompiledValidator) {\n // render loading screen\n}\nconst validator = createPrecompiledValidator(precompiledValidator, schema);\n```\n\n### Precompiled validators with `@rjsf/validator-ata`\n\n`@rjsf/validator-ata` has the same two functions. Compile the schema in a Node script:\n\n```cjs\nconst compileSchemaValidators = require('@rjsf/validator-ata/compileSchemaValidators').default;\nconst yourSchema = require('path_to/yourSchema.json');\n\n// The third argument takes the options customizeValidator() takes, with the limits listed below.\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.cjs', {\n customFormats: { 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/ },\n});\n```\n\nThen use it in the app:\n\n```tsx\nimport { createPrecompiledValidator, type ValidatorFunctions } from '@rjsf/validator-ata';\nimport yourSchema from 'path_to/yourSchema.json'; // The same schema that was precompiled\nimport precompiledValidatorFns from 'path_to/yourCompiledSchema.cjs';\n\nconst validator = createPrecompiledValidator(precompiledValidatorFns as ValidatorFunctions, yourSchema);\n```\n\nThings to know:\n\n- `customFormats` and `ataOptionsOverrides` apply at compile time. Custom formats must be a `RegExp` or a pattern string: a function cannot be written into the generated file and is rejected.\n- `additionalMetaSchemas` and `ataOptionsOverrides.schemas` that have an `$id` are compiled into the generated file, so a custom meta-schema named in `$schema` applies there too. The official json-schema.org meta-schemas are left out, since ata already knows them. Entries without an `$id` are ignored with a warning: ata requires one, so `customizeValidator()` throws for them.\n- `extenderFn` and the `ataOptionsOverrides` keys `coerceTypes`, `removeAdditional` and `keywords` cannot be carried into the generated file. They are ignored with a warning (once per process), and the generated file and the runtime validator may then disagree, in either direction: a dropped keyword lets data through that the runtime validator rejects, and a dropped `coerceTypes` rejects data it accepts.\n- The generated file never fills in `default` values. The runtime validator does (`useDefaults` is on by default in ata), so for a required field that is missing but has a `default`, the runtime validator fills it in and accepts, while the generated file rejects. The form fills in defaults itself (`getDefaultFormState`), so this shows only for data that does not come from the form.\n- Pass `suppressDuplicateFiltering` to `createPrecompiledValidator()`. Passing it to the compile step has no effect and logs a warning.\n- The generated file imports nothing, so `ata-validator` is not in your bundle, as long as the app imports only `createPrecompiledValidator` (and types). Importing the default export, `customizeValidator` or `ATAValidator` brings the runtime validator back.\n- The generated file is CommonJS, like the one from `@rjsf/validator-ajv8`. Webpack, Rollup and production Vite builds handle it. Vite's dev server does not convert CommonJS files inside your source folder.\n- The file has no type declarations. With TypeScript, cast it to `ValidatorFunctions` as above and add `declare module '*.cjs';` to a `.d.ts` file, or enable `allowJs`.\n- Run the compile step again when the schema changes.\n- To get the code as a string instead of a file, use `compileSchemaValidatorsCode(schema, options)` from `@rjsf/validator-ata/compileSchemaValidators`. The code imports nothing, so unlike the ajv8 example above it needs no runtime dependencies replaced.\n\n## Live validation\n\nBy default, form data are only validated when the form is submitted or when a new `formData` prop is passed to the `Form` component.\n\nYou can enable live form data validation by passing a `liveValidate` prop to the `Form` component, and set it to `true`. Then, every time a value changes within the form data tree (e.g. the user entering a character in a field), a validation operation is performed, and the validation results are reflected into the form state.\n\nBe warned that this is an expensive strategy, with possibly strong impact on performances.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: ['string'],\n const: 'test',\n};\n\nconst formData = 'a';\n\nrender(, document.getElementById('app'));\n```\n\n## Validate form programmatically\n\nIt is possible to programmatically validate a form using the `validateForm()` function on `Form`.\nAdd a `ref` to your `Form` component and call the `validateForm()` method to validate the form programmatically.\nThe `validateForm()` method returns true if the form is valid, false otherwise.\nIf you have provided an `onError` callback it will be called with the list of errors when the `validatorForm()` method returns false.\n\n```tsx\nimport { createRef } from 'react';\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst formRef = createRef();\nconst onError = (errors) => alert(errors);\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n\nif (formRef.current.validateForm()) {\n alert('Form is valid');\n}\n```\n\n## HTML5 Validation\n\nBy default, the form uses HTML5 validation. This may cause unintuitive results because the HTML5 validation errors (such as when a field is `required`) may be displayed before the form is submitted, and thus these errors will display differently from the react-jsonschema-form validation errors. You can turn off HTML validation by setting the `noHtml5Validate` to `true`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n required: true,\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Custom validation rules\n\nForm data is always validated against the JSON schema.\n\nBut it is possible to define your own custom validation rules that will run in addition to (and after) the `validator` implementation.\nThis is especially useful when the validation depends on several interdependent fields.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nfunction customValidate(formData, errors, uiSchema, errorSchema) {\n if (formData.pass1 !== formData.pass2) {\n errors.pass2.addError(\"Passwords don't match\");\n }\n return errors;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n pass1: { type: 'string', minLength: 3 },\n pass2: { type: 'string', minLength: 3 },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n> Notes:\n>\n> - The `customValidate()` function must implement the `CustomValidator` interface found in `@rjsf/utils`.\n> - The `customValidate()` function must **always** return the `errors` object received as second argument.\n> - The `customValidate()` function is called **after** the JSON schema validation.\n> - The `customValidate()` function is passed the `uiSchema` as the third argument. This allows the `customValidate()` function to be able to derive additional information from it for generating errors.\n> - The `customValidate()` function is passed the `errorSchema` as the fourth argument. This allows the `customValidate()` function to be able to access errors raised by JSON schema validation.\n\n## Custom error messages\n\nValidation error messages are provided by the JSON Schema validation by default.\nIf you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nfunction transformErrors(errors, uiSchema) {\n return errors.map((error) => {\n if (error.name === 'pattern') {\n error.message = 'Only digits are allowed';\n }\n return error;\n });\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n onlyNumbersString: { type: 'string', pattern: '^\\\\d*$' },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n> Notes:\n>\n> - The `transformErrors()` function must implement the `ErrorTransformer` interface found in `@rjsf/utils`.\n> - The `transformErrors()` function must return the list of errors. Modifying the list in place without returning it will result in an error.\n> - The `transformErrors()` function is passed the `uiSchema` as the second argument. This allows the `transformErrors()` function to be able to derive additional information from it for transforming errors.\n\nEach element in the `errors` list passed to `transformErrors` is a `RJSFValidationError` interface (in `@rjsf/utils`) and has the following properties:\n\n- `name`: optional name of the error, for example, \"required\" or \"minLength\"\n- `message`: optional message, for example, \"is a required property\" or \"should NOT be shorter than 3 characters\"\n- `params`: optional object with the error params returned by ajv ([see doc](https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#error-parameters) for more info).\n- `property`: optional string in Javascript property accessor notation to the data path of the field with the error. For example, `.name` or `.first-name`.\n- `schemaPath`: optional JSON pointer to the schema of the keyword that failed validation. For example, `#/fields/firstName/required`. (Note: this may sometimes be wrong due to a [bug in ajv](https://github.com/ajv-validator/ajv/issues/512)).\n- `stack`: full error name, for example \".name is a required property\".\n- `title`: optional string containing title property for the field with error.\n\n## Error List Display\n\nTo take control over how the form errors are displayed, you can define an _error list template_ for your form.\nThis list is the form global error list that appears at the top of your forms.\n\nAn error list template is basically a React stateless component being passed errors as props, so you can render them as you like:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, ErrorListProps } from \"@rjsf/utils\";\nimport validator from \"@rjsf/validator-ajv8\";\n\nfunction ErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n

\n

Custom error list

\n
    \n {errors.map(error => (\n
  • \n {error.stack}\n
    • \n ))}\n
\n
\n );\n}\n\nconst schema: RJSFSchema = {\n type: \"string\",\n const: \"test\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: Your custom `ErrorList` template will only render when `showErrorList` is `top` or `botttom`.\n\nThe following props are passed to `ErrorList` as defined by the `ErrorListProps` interface in `@rjsf/utils`:\n\n- `errors`: An array of the errors.\n- `errorSchema`: The errorSchema constructed by `Form`.\n- `schema`: The schema that was passed to `Form`.\n- `uiSchema`: The uiSchema that was passed to `Form`.\n- `formContext`: The `formContext` object that you passed to `Form`.\n\n## The case of empty strings\n\nWhen a text input is empty, the field in form data is set to `undefined`.\nHowever, since `undefined` isn't a valid JSON value according to [the official JSON standard](https://www.ecma-international.org/wp-content/uploads/ECMA-404_2nd_edition_december_2017.pdf) (ECMA-404, Section 5), the values get stored as `null`.\n\nString fields that use `enum` and a `select` widget will have an empty option at the top of the options list that when selected will result in the field being `null`.\n\nOne consequence of this is that if you have an empty string in your `enum` array, selecting that option in the `select` input will cause the field to be set to `null`, not an empty string.\n\nIf you want to have the field set to a default value when empty you can provide a `ui:emptyValue` field in the `uiSchema` object.\n\n## Custom meta schema validation\n\nTo have your schemas validated against any other meta schema than draft-07 (the current version of [JSON Schema](http://json-schema.org/)), make sure your schema has a `$schema` attribute that enables the validator to use the correct meta schema.\nFor example:\n\n```json\n{\n \"$schema\": \"http://json-schema.org/draft-04/schema#\",\n ...\n}\n```\n\nNote that react-jsonschema-form supports JSON Schema draft-07 by default.\nTo support additional meta schemas, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:\n\n### additionalMetaSchemas\n\nThe `additionalMetaSchemas` prop allows you to validate the form data against one (or more than one) JSON Schema meta schema, for example, JSON Schema draft-04.\nYou can import a meta schema as follows:\n\n```tsx\nconst metaSchemaDraft04 = require('ajv/lib/refs/json-schema-draft-04.json');\n```\n\nIn this example `schema` passed as props to `Form` component can be validated against draft-07 (default) and by draft-04 (added), depending on the value of `$schema` attribute.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport AjvDraft04 from 'ajv-draft-04';\n\nconst validator = customizeValidator({ AjvClass: AjvDraft04 });\n\nconst schema: RJSFSchema = {\n $schema: 'http://json-schema.org/draft-04/schema#',\n type: 'string',\n};\n\nreturn ;\n```\n\n### customFormats\n\n[Pre-defined semantic formats](https://json-schema.org/draft/2019-09/json-schema-validation.html#rfc.section.7) are limited.\nreact-jsonschema-form adds two formats, `color` and `data-url`, to support certain [alternative widgets](./widgets.md).\nTo add formats of your own, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'phone-us',\n};\n\nconst customFormats = {\n 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/,\n};\n\nconst validator = customizeValidator({ customFormats });\n\nrender(, document.getElementById('app'));\n```\n\nFormat values can be anything AJV's [`addFormat` method](https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#addformatstring-name-stringregexpfunctionobject-format---ajv) accepts.\n\n### Async validation\n\nHandling async errors is an important part of many applications. Support for this is added in the form of the `extraErrors` prop.\n\nFor example, a request could be made to some backend when the user submits the form. If that request fails, the errors returned by the backend should be formatted like in the following example.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, ErrorSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: {\n type: 'string',\n },\n candy: {\n type: 'object',\n properties: {\n bar: {\n type: 'string',\n },\n },\n },\n },\n};\n\nconst extraErrors: ErrorSchema = {\n foo: {\n __errors: ['some error that got added as a prop'],\n },\n candy: {\n bar: {\n __errors: ['some error that got added as a prop'],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nAn important note is that these errors are \"display only\" and will not block the user from submitting the form again.\n\n### ajvOptionsOverrides\n\nIn version 5, with the advent of the decoupling of the validation implementation from the `Form`, it is now possible to provide additional options to the `ajv` instance used within `@rjsf/validator-ajv8`.\nFor instance, if you need more information from `ajv` about errors via the `verbose` option, now you can turn it on!\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'phone-us',\n};\n\nconst ajvOptionsOverrides = {\n verbose: true,\n};\n\nconst validator = customizeValidator({ ajvOptionsOverrides });\n\nrender(, document.getElementById('app'));\n```\n\n## Using the raw Ajv instance\n\nThe `customizeValidator()` function returns the `AJV8Validator` implementation class, which has an internal raw `ajv` instance within it.\nIf you need to do some deep customization of the instance using any of the `ajv` libraries (like `ajv-keywords`), you can do so using this raw instance as follows:\n\n```ts\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvKeywords from 'ajv-keywords';\n\nconst validator = customizeValidator();\najvKeywords(validator.ajv, ['your-keyword']);\n\n// use your update validator with a `Form`\n```\n\n## Ajv8 validator\n\nOur implementation of `@rjsf/validator-ajv8` utilizes Ajv's internal cache to avoid unnecessarily re-compiling schemas, which can be an expensive operation. The cache key is the schema `$id`.\n\nThe `ajvOptionsOverrides` for the Ajv 8 validator are the ones supported by that version.\nSecond, the data formats previously provided in Ajv 6 now need to be added explicitly using the `ajv-formats` package.\nA new `ajvFormatOptions` option is available on the `customizeValidator()` API to be able to configure this.\nAdditionally, a new `AjvClass` option is available on the `customizeValidator()` API to support using one of the other [JSON schema versions](https://ajv.js.org/json-schema.html#json-schema-versions) provided by Ajv 8 besides the `draft-07` default.\nFinally, the Ajv 8 validator supports the localization of error messages.\n\n### ajvFormatOptions\n\nBy default, ALL formats are being added to the default `@rjsf/validator-ajv8` that you get when you import it.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'email',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you don't actually need any of the [ajv-formats](https://github.com/ajv-validator/ajv-formats#formats) and want to reduce the memory footprint, then you can turn it off as follows:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({ ajvFormatOptions: false });\n\nrender(, document.getElementById('app'));\n```\n\nIf you only need some of them, you can pass any of the [options](https://github.com/ajv-validator/ajv-formats#options) to the formatter:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ ajvFormatOptions: ['date'] });\n// or\n// const validator = customizeValidator({ ajvFormatOptions: { mode: \"fast\", formats: [\"date\"], keywords: true } });\n\nrender(, document.getElementById('app'));\n```\n\n### AjvClass\n\nBy default, the `@rjsf/validator-ajv8` uses the `draft-07` schema version.\nIt is possible to use one of the other version it supports, like `draft-2019-09` or `draft-2020-12`.\nNOTE: `draft-2020-12` has breaking changes and hasn't been fully tested with `@rjsf`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport Ajv2019 from 'ajv/dist/2019';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ AjvClass: Ajv2019 });\n// or\n// const validator = customizeValidator({ AjvClass: Ajv2020 });\n\nrender(, document.getElementById('app'));\n```\n\n### extenderFn\n\nIf you need to use an additional library, such as `ajv-errors`, with our validators you can do so by creating a custom validator and pass it the `ajv` library \"extender\" via the `extenderFn` prop on the `options` parameter.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvErrors from 'ajv-errors';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ extenderFn: ajvErrors });\n\nrender(, document.getElementById('app'));\n```\n\n### suppressDuplicateFiltering\n\nWhen AJV validates against `anyOf` or `oneOf` schemas, it generates a separate error for each failed branch, which often produces many duplicate messages.\nBy default, the validator filters out these duplicates so that only the first occurrence of each unique error is shown.\nUse `suppressDuplicateFiltering` to override this behavior when you need to see all errors from every branch.\n\nThe option accepts a `SuppressDuplicateFilteringType` value (exported from `@rjsf/validator-ajv8`):\n\n| Value | Behavior |\n| ------------------ | --------------------------------------------------------------------------- |\n| `'none'` (default) | Duplicates filtered for both `anyOf` and `oneOf` |\n| `'anyOf'` | `anyOf` duplicate filtering disabled; `oneOf` duplicates still filtered |\n| `'oneOf'` | `oneOf` duplicate filtering disabled; `anyOf` duplicates still filtered |\n| `'all'` | All duplicate filtering disabled; every error from every branch is returned |\n\nFor a standard validator via `customizeValidator()`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n asc: {\n title: 'Low to high',\n type: 'boolean',\n default: true,\n },\n desc: {\n title: 'High to low',\n type: 'boolean',\n default: true,\n },\n },\n anyOf: [\n {\n required: ['asc'],\n properties: {\n asc: {\n const: true,\n },\n },\n },\n {\n required: ['desc'],\n properties: {\n desc: {\n const: true,\n },\n },\n },\n ],\n};\n\n// Disable all duplicate filtering — show every error from every anyOf/oneOf branch\nconst validator = customizeValidator({ suppressDuplicateFiltering: 'all' });\n\nrender(, document.getElementById('app'));\n```\n\nFor a precompiled validator, pass the value as the fourth argument to `createPrecompiledValidator()`:\n\n```tsx\nimport { createPrecompiledValidator } from '@rjsf/validator-ajv8';\nimport * as precompiledValidatorFns from 'path_to/yourCompiledSchema';\nimport yourSchema from 'path_to/yourSchema';\n\nconst validator = createPrecompiledValidator(precompiledValidatorFns, yourSchema, undefined, 'all');\n```\n\n### Localization (L10n) support\n\nThe Ajv 8 validator supports the localization of error messages using [ajv-i18n](https://github.com/ajv-validator/ajv-i18n).\nIn addition, you may provide a custom solution by implementing a function that conforms to the `Localizer` interface if your language is not supported.\n\n```ts\nimport { ErrorObject } from 'ajv';\n/** The type describing a function that takes a list of Ajv `ErrorObject`s and localizes them\n */\nexport type Localizer = (errors?: null | ErrorObject[]) => void;\n```\n\nNOTE: The `ajv-i18n` validators implement the `Localizer` interface.\n\n#### Some examples\n\nUsing a specific locale while including all of `ajv-i18n`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport localizer from 'ajv-i18n';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, localizer.it);\n\nrender(, document.getElementById('app'));\n```\n\nUsing a specific locale minimizing the bundle size\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport spanishLocalizer from 'ajv-i18n/localize/es';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, spanishLocalizer);\n\nrender(, document.getElementById('app'));\n```\n\nAn example of a custom `Localizer` implementation:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { ErrorObject } from 'ajv';\n\nfunction localize_ru(errors: null | ErrorObject[] = []) {\n if (!(errors && errors.length)) return;\n errors.forEach(function (error) {\n let outMessage = '';\n\n switch (error.keyword) {\n case 'pattern': {\n outMessage = 'должно соответствовать образцу \"' + error.params.pattern + '\"';\n break;\n }\n case 'required': {\n outMessage = 'поле обязательно для заполнения';\n break;\n }\n default:\n outMessage = error.message;\n }\n\n error.message = outMessage;\n });\n}\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, localize_ru);\n\nrender(, document.getElementById('app'));\n```\n\nNOTES:\n\n- If you provided your own function, modify the list in place.\n- You must process all the cases which you need by yourself. See the full list of possible cases [here](https://github.com/ajv-validator/ajv-i18n/blob/master/messages/index.js).\n- Each element in the `errors` list passed to the custom function represent a **raw** error object returned by ajv ([see doc](https://github.com/ajv-validator/ajv/blob/master/docs/api.md#error-objects)).\n- [HTML 5 Validation](#html5-validation) will cause the browser to display a \"popup\" message, the text of which is entirely under control of the browser. If you are seeing messages which aren't translated \"popping up\", then add `noHtml5Validate` to your form.\n","packages/docs/docs/usage/widgets.md":"# Widgets\n\nThe uiSchema `ui:widget` property tells the form which UI widget should be used to render a field.\n\nExample:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n done: {\n type: 'boolean',\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n done: {\n 'ui:widget': 'radio', // could also be \"select\"\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nHere's a list of supported alternative widgets for different JSON Schema data types:\n\n## For `boolean` fields\n\n- `radio`: a radio button group with `true` and `false` as selectable values;\n- `select`: a select box with `true` and `false` as options;\n- by default, a checkbox is used\n\n> Note: To set the labels for a boolean field, instead of using `true` and `false`, your schema can use `oneOf` with `const` values for both true and false, where you can specify the custom label in the `title` field. You will also need to specify a widget in your `uiSchema`. See the following example:\n\nschema:\n\n```json\n{\n \"properties\": {\n \"booleanWithCustomLabels\": {\n \"type\": \"boolean\",\n \"oneOf\": [\n { \"const\": true, \"title\": \"Custom label for true\" },\n { \"const\": false, \"title\": \"Custom label for false\" }\n ]\n }\n }\n}\n```\n\nuiSchema:\n\n```json\n{\n \"booleanWithCustomLabels\": {\n \"ui:widget\": \"radio\" // or \"select\"\n }\n}\n```\n\n## For `string` fields\n\n- `textarea`: a `textarea` element is used;\n- `password`: an `input[type=password]` element is used;\n- `color`: an `input[type=color]` element is used;\n- by default, a regular `input[type=text]` element is used.\n\n### String formats\n\nThe built-in string field also supports the JSON Schema `format` property, and will render an appropriate widget by default for the following string formats:\n\n- `email`: An `input[type=email]` element is used;\n- `uri`: An `input[type=url]` element is used;\n- `data-url`: By default, an `input[type=file]` element is used; in case the string is part of an array, multiple files will be handled automatically (see [File widgets](#file-widgets)).\n- `date`: By default, an `input[type=date]` element is used;\n- `date-time`: By default, an `input[type=datetime-local]` element is used.\n- `time`: By default an `input[type=time]` element is used;\n\n![](https://i.imgur.com/xqu6Lcp.png)\n\nPlease note that, even though they are standardized, `datetime-local`, `date` and `time` input elements are not supported by IE. If you plan on targeting IE, two alternative widgets are available:\n\n- `alt-datetime`: Six `select` elements are used to select the year, the month, the day, the hour, the minute and the second;\n- `alt-date`: Three `select` elements are used to select the year, month and the day.\n\n![](https://i.imgur.com/VF5tY60.png)\n\nYou can customize the list of years displayed in the `year` dropdown by providing a `yearsRange` property to `ui:options` in your uiSchema.\nThe range can be descending by specifying the larger value first.\nIt's also possible to remove the `Now` and `Clear` buttons with the `hideNowButton` and `hideClearButton` options.\n\nYou can also, customize the order in which date input fields are displayed by providing `format` property to `ui:options` in your uiSchema, available values are `YMD`(default), `MDY` and `DMY`.\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'alt-datetime',\n 'ui:options': {\n yearsRange: [1980, 2030],\n format: 'MDY',\n hideNowButton: true,\n hideClearButton: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also specify negative values which will be treated relative to the current year, so if it is 2020 and the range is set as follows.\n\n```\n yearsRange: [-120, -18],\n```\n\nYears from 1900-2002 will be shown. You can also specify the dates with the higher date first to display dates in reverse order.\n\n```\n yearsRange: [2030, 1980],\n ...\n yearsRange: [-18, -120],\n```\n\nYears from 2030-1980 and 2002-1900, respectively will be shown.\n\n## For `number` and `integer` fields\n\n- `updown`: an `input[type=number]` updown selector;\n- `range`: an `input[type=range]` slider;\n- `radio`: a radio button group with enum values. This can only be used when `enum` values are specified for this input.\n- By default, a regular `input[type=number]` element is used.\n\n> Note: If JSON Schema's `minimum`, `maximum` and `multipleOf` values are defined, the `min`, `max` and `step` input attributes values will take those values.\n\n## Hidden widgets\n\nIt's possible to use a hidden widget for a field by setting its `ui:widget` uiSchema directive to `hidden`:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'boolean' },\n },\n};\n\nconst uiSchema: UiSchema = {\n foo: { 'ui:widget': 'hidden' },\n};\n\nrender(, document.getElementById('app'));\n```\n\nNotes:\n\n- Hiding widgets is only supported for `boolean`, `string`, `number` and `integer` schema types;\n- A hidden widget takes its value from the `formData` prop.\n\n## File widgets\n\nThis library supports a limited form of `input[type=file]` widgets, in the sense that it will propagate file contents to form data state as [data-url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)s.\n\nThere are two ways to use file widgets.\n\n1. By declaring a `string` json schema type along a `data-url` [format](#string-formats):\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\n\nrender(, document.getElementById('app'));\n```\n\n2. By specifying a `ui:widget` field uiSchema directive as `file`:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'file',\n};\n```\n\n### Multiple files\n\nMultiple files selectors are supported by defining an array of strings having `data-url` as a format:\n\n```ts\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n format: 'data-url',\n },\n};\n```\n\n> Note that storing large dataURIs into form state might slow rendering.\n\n### File widget input ref\n\nThe included `FileWidget` exposes a reference to the `` element node as an `inputRef` component property.\n\nThis allows you to programmatically trigger the browser's file selector, which can be used in a custom file widget.\n\n### `accept` option\n\nYou can use the accept attribute to specify a filter for what file types the user can upload:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': { accept: '.pdf' },\n};\n```\n","packages/docs/package.json":"{\n \"name\": \"@rjsf/docs\",\n \"version\": \"6.11.0\",\n \"private\": true,\n \"scripts\": {\n \"docusaurus\": \"docusaurus\",\n \"start\": \"docusaurus start\",\n \"build\": \"docusaurus build\",\n \"swizzle\": \"docusaurus swizzle\",\n \"deploy\": \"docusaurus deploy\",\n \"clear\": \"docusaurus clear\",\n \"serve\": \"docusaurus serve\",\n \"write-translations\": \"docusaurus write-translations\",\n \"write-heading-ids\": \"docusaurus write-heading-ids\",\n \"typecheck\": \"tsc\",\n \"precommit\": \"lint-staged\",\n \"cs-check\": \"oxfmt --check \\\"src/**/*.{ts,tsx}\\\"\",\n \"cs-format\": \"oxfmt \\\"src/**/*.{ts,tsx}\\\"\"\n },\n \"lint-staged\": {\n \"src/**/*.{ts,tsx}\": [\n \"oxfmt\"\n ]\n },\n \"dependencies\": {\n \"@docusaurus/core\": \"^3.10.2\",\n \"@docusaurus/preset-classic\": \"^3.10.2\",\n \"@mdx-js/react\": \"^3.1.1\",\n \"prism-react-renderer\": \"^2.4.1\"\n },\n \"devDependencies\": {\n \"@docusaurus/module-type-aliases\": \"^3.10.2\",\n \"@docusaurus/plugin-content-docs\": \"^3.10.2\",\n \"@docusaurus/types\": \"^3.10.2\",\n \"@tsconfig/docusaurus\": \"^2.0.9\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.5%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"engines\": {\n \"node\": \">=20\"\n }\n}\n","packages/docs/tsconfig.json":"{\n // This file is not used in compilation. It is here just for a nice editor experience.\n \"extends\": \"@tsconfig/docusaurus/tsconfig.json\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true\n }\n}\n","packages/docs/versioned_docs/version-3.2.1/00-quickstart.md":"# Quickstart\n\nLet's walk through setup of a form after installing the dependency properly.\n\n## Form schema\n\nFirst, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou can also render an object with multiple fields with the below schema:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nFor more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](./usage/single.md).\n\n## Form uiSchema\n\nThe uiSchema is used to add more customization to the form's look and feel. Use the `classNames`\nattribute of the uiSchema to add a custom CSS class name to the form:\n\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"string\"\n};\n\nconst uiSchema = {\n classNames: \"custom-css-class\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nTo customize object fields in the uiSchema, the structure of the\nuiSchema should be `{key: value}`, where `key` is the property key and `value` is an\nobject with the uiSchema configuration for that particular property. For example:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nconst uiSchema = {\n name: {\n classNames: \"custom-class-name\"\n },\n age: {\n classNames: \"custom-class-age\"\n }\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```jsx\nconst schema = {\n type: \"object\",\n properties: {\n title: {\n type: \"string\"\n },\n done: {\n type: \"boolean\"\n }\n }\n};\n\nconst formData = {\n title: \"First task\",\n done: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: If your form has a single field, pass a single value to `formData`. ex: `formData=\"Charlie\"`\n\n> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\nYou can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `` component; see the [Form Props Reference](/docs/api-reference/form-props.md) for more details.\n\n### Controlled component\n\nBy default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the\n`onChange` and `formData` props as in the below example:\n\n```jsx\nconst App = () => {\n const [formData, setFormData] = React.useState(null);\n return ( setFormData(e.formData)}\n />);\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-templates.md":"# Custom Templates\n\nThis is an advanced feature that lets you customize even more aspects of the form:\n\n_ | Custom Field | Custom Template | Custom Widget\n--|---------- | ------------- | ----\n**What it does** | Overrides all behaviour | Overrides just the layout (not behaviour) | Overrides just the input box (not layout, labels, or help, or validation)\n**Usage** | Global or per-field | Global or per-field | Global or per-field\n**Global Example** | `` | `` | ``\n**Per-Field Example** | `\"ui:field\": MyCustomField` | `\"ui:ArrayFieldTemplate\": MyArrayTemplate` | `\"ui:widget\":MyCustomWidget`\n**Documentation** | [Custom Fields](custom-widgets-fields.md) | [FieldTemplate](#FieldTemplate) / [ArrayFieldTemplate](#ArrayFieldTemplate) / [ObjectFieldTemplate](#ObjectFieldTemplate) | [Custom Widgets](custom-widgets-fields.md)\n\n## ArrayFieldTemplate\n\nYou can use an `ArrayFieldTemplate` to customize how your arrays are rendered.\nThis allows you to customize your array, and each element in the array.\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nfunction ArrayFieldTemplate(props) {\n return (\n
\n {props.items.map(element => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:ArrayFieldTemplate\": ArrayFieldTemplate\n}\n```\n\nPlease see [customArray.js](https://github.com/rjsf-team/react-jsonschema-form/blob/4542cd254ffdc6dfaf55e8c9f6f17dc900d0d041/packages/playground/src/samples/customArray.js) for another example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `idSchema`: Object\n- `items`: An array of objects representing the items in the array. Each of the items represent a child with properties described below.\n- `onAddClick: (event?) => void`: A function that adds a new item to the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formContext`: The `formContext` object that you passed to Form.\n- `formData`: The formData for this array.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `items`:\n\n- `children`: The html for the item's content.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `key`: A stable, unique key for the array item.\n- `onAddIndexClick: (index) => (event?) => void`: Returns a function that adds a new item at `index`.\n- `onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.\n- `onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.\n- `readonly`: A boolean value stating if the array item is read-only.\n\n> Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.\n\n## FieldTemplate\n\nTo take control over the inner organization of each field (each form row), you can define a *field template* for your form.\n\nA field template is basically a React stateless component being passed field-related props, allowing you to structure your form row as you like.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nfunction CustomFieldTemplate(props) {\n const {id, classNames, label, help, required, description, errors, children} = props;\n return (\n
\n \n {description}\n {children}\n {errors}\n {help}\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:FieldTemplate\": CustomFieldTemplate\n}\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](#custom-css-class-names) defined in your uiSchema.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionField`](#custom-descriptions) defined).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `disabled`: A boolean value stating if the field is disabled.\n- `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.\n- `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `onChange`: The value change event handler; Can be called with a new value to change the value for this field.\n- `formContext`: The `formContext` object that you passed to Form.\n- `formData`: The formData for this field.\n- `registry`: The `registry` object.\n\n> Note: you can only define a single global field template for a form, but you can set individual field templates per property using `\"ui:FieldTemplate\"`.\n\n## ObjectFieldTemplate\n\n```jsx\nconst schema = {\n type: \"object\",\n title: \"Object title\",\n description: \"Object description\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nfunction ObjectFieldTemplate(props) {\n return (\n
\n {props.title}\n {props.description}\n {props.properties.map(element =>
{element.content}
)}\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:ObjectFieldTemplate\": ObjectFieldTemplate\n};\n```\n\nPlease see [customObject.js](https://github.com/rjsf-team/react-jsonschema-form/blob/4542cd254ffdc6dfaf55e8c9f6f17dc900d0d041/packages/playground/src/samples/customObject.js) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `disabled`: A boolean value stating if the object is disabled.\n- `properties`: An array of object representing the properties in the array. Each of the properties represent a child with properties described below.\n- `onAddClick: (schema: JSONSchema7) => () => void`: Returns a function that adds a new property to the object (to be used with additionalProperties)\n- `readonly`: A boolean value stating if the object is read-only.\n- `required`: A boolean value stating if the object is required.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `idSchema`: An object containing the id for this object & ids for it's properties.\n- `formData`: The form data for the object.\n- `formContext`: The `formContext` object that you passed to Form.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n- `hidden`: A boolean value stating if the property should be hidden.\n\n> Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-themes.md":"# Custom Themes\n\nThe `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component. This theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react';\nimport { withTheme } from '@rjsf/core';\n\nconst theme = { widgets: {test: () => (
test
) } };\n\nconst ThemedForm = withTheme(theme); \n\nconst Demo = () => (\n \n);\n```\n\n## Theme object properties\nThe Theme object consists of the same properties as the rjsf `Form` component (such as **widgets** and **fields**). The themed-Form component merges together any theme-specific **widgets** and **fields** with the default **widgets** and **fields**. For instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name. Thus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`. Note that you are not required to pass in either custom **widgets** or **fields** when using the custom-themed HOC component; you can make the essentially redefine the default Form by simply doing `const Form = withTheme({});`.\n\n### Widgets and fields \n**widgets** and **fields** should be in the same format as shown [here](/advanced-customization/#custom-widgets-and-fields).\n\nExample theme with custom widget:\n```jsx\nconst MyCustomWidget = (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n};\n\nconst myWidgets = {\n myCustomWidget: MyCustomWidget\n};\n\nconst ThemeObject = {widgets: myWidgets};\nexport default ThemeObject;\n```\n\nThe above can be similarly done for **fields**.\n\n### Templates\nEach template should be passed directly into the theme object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](/advanced-customization/#array-field-template) and [ErrorListTemplate](/advanced-customization/#error-list-template) in the theme object:\n```jsx\nfunction MyArrayFieldTemplate(props) {\n return (\n
\n {props.items.map(element => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nfunction MyErrorListTemplate(props) {\n const {errors} = props;\n return (\n
    \n {errors.map(error => (\n
  • \n {error.stack}\n
    • \n ))}\n
\n );\n}\n\nconst ThemeObject = {\n ArrayFieldTemplate: MyArrayFieldTemplate, \n ErrorList: MyErrorListTemplate,\n widgets: myWidgets\n};\n\nexport default ThemeObject;\n```\n\n## Overriding other Form props\nJust as the theme can override **widgets**, **fields**, any of the field templates, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.\n```jsx\nconst ThemeObject = {\n ArrayFieldTemplate: MyArrayFieldTemplate, \n fields: myFields,\n showErrorList: false,\n widgets: myWidgets\n};\n```\n\nThus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-widgets-fields.md":"# Custom Widgets and Fields\n\nThe API allows to specify your own custom *widget* and *field* components:\n\n- A *widget* represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A *field* usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n## Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `ObjectField` renders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the `fields` and `widgets` props:\n\n```jsx\nconst schema = {\n type: \"boolean\",\n default: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkbox\"\n};\n\nconst CustomCheckbox = function(props) {\n return (\n \n );\n};\n\nconst widgets = {\n CheckboxWidget: CustomCheckbox\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```jsx\nconst customFields = {StringField: CustomString};\nconst customWidgets = {CheckboxWidget: CustomCheckbox};\n\nfunction MyForm(props) {\n return ;\n}\n```\n\nThe default fields you can override are:\n\n - `ArrayField`\n - `BooleanField`\n - `DescriptionField`\n - `OneOfField`\n - `AnyOfField`\n - `NullField`\n - `NumberField`\n - `ObjectField`\n - `SchemaField`\n - `StringField`\n - `TitleField`\n - `UnsupportedField`\n\nThe default widgets you can override are:\n\n - `AltDateTimeWidget`\n - `AltDateWidget`\n - `CheckboxesWidget`\n - `CheckboxWidget`\n - `ColorWidget`\n - `DateTimeWidget`\n - `DateWidget`\n - `EmailWidget`\n - `FileWidget`\n - `HiddenWidget`\n - `PasswordWidget`\n - `RadioWidget`\n - `RangeWidget`\n - `SelectWidget`\n - `TextareaWidget`\n - `TextWidget`\n - `UpDownWidget`\n - `URLWidget`\n\n\n## Adding your own custom widgets\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nconst uiSchema = {\n \"ui:widget\": (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this field;\n- `schema`: The JSONSchema subschema object for this field;\n- `uiSchema`: The uiSchema for this field;\n- `value`: The current value for this field;\n- `placeholder`: the placeholder for the field, if any;\n- `required`: The required status of this field;\n- `disabled`: `true` if the widget is disabled;\n- `readonly`: `true` if the widget is read-only;\n- `autofocus`: `true` if the widget should autofocus;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the the widget id and value;\n- `onFocus`: The input focus event handler; call it with the the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `formContext`: The `formContext` object that you passed to Form.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n\n### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```jsx\nconst MyCustomWidget = (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n};\n\nconst widgets = {\n myCustomWidget: MyCustomWidget\n};\n\nconst schema = {\n type: \"string\"\n};\n\nconst uiSchema = {\n \"ui:widget\": \"myCustomWidget\"\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nfunction MyCustomWidget(props) {\n const {options} = props;\n const {color, backgroundColor} = options;\n return ;\n}\n\nMyCustomWidget.defaultProps = {\n options: {\n color: \"red\"\n }\n};\n\nconst uiSchema = {\n \"ui:widget\": MyCustomWidget,\n \"ui:options\": {\n backgroundColor: \"yellow\"\n }\n};\n\n// renders red on yellow input\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: This also applies to [registered custom components](#custom-component-registration).\n\n> Note: Since v0.41.0, the `ui:widget` object API, where a widget and options were specified with `\"ui:widget\": {component, options}` shape, is deprecated. It will be removed in a future release.\n\n### Customizing widgets text input\n\nAll the widgets that render a text input use the `BaseInput` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInput` component in the `widgets` property of `Form` (see [Custom component registration](#custom-component-registration)).\n\n## Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a *latitude* and a *longitude*:\n\n```jsx\nconst schema = {\n type: \"object\",\n required: [\"lat\", \"lon\"],\n properties: {\n lat: {type: \"number\"},\n lon: {type: \"number\"}\n }\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n constructor(props) {\n super(props);\n this.state = {...props.formData};\n }\n\n onChange(name) {\n return (event) => {\n this.setState({\n [name]: parseFloat(event.target.value)\n }, () => this.props.onChange(this.state));\n };\n }\n\n render() {\n const {lat, lon} = this.state;\n return (\n
\n \n \n
\n );\n }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema = {\"ui:field\": \"geo\"};\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields = {geo: GeoPosition};\n\n// Render the form with all the properties we just defined passed\n// as props\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: Registered fields can be reused across the entire schema.\n\n### Field props\n\nA field component will always be passed the following props:\n\n - `schema`: The JSON schema for this field;\n - `uiSchema`: The [uiSchema](#the-uischema-object) for this field;\n - `idSchema`: The tree of unique ids for every child field;\n - `formData`: The data for this field;\n - `errorSchema`: The tree of errors for this field and its children;\n - `registry`: A [registry](#the-registry-object) object (read next).\n - `formContext`: A [formContext](#the-formcontext-object) object (read next).\n\n## The `registry` object\n\nThe `registry` is an object containing the registered custom fields and widgets as well as the root schema definitions.\n\n - `fields`: The [custom registered fields](#custom-field-components). By default this object contains the standard `SchemaField`, `TitleField` and `DescriptionField` components;\n - `widgets`: The [custom registered widgets](#custom-widget-components), if any;\n - `rootSchema`: The root schema, which can contain referenced [definitions](#schema-definitions-and-references);\n - `formContext`: The [formContext](#the-formcontext-object) object;\n - `definitions` (deprecated since v2): Equal to `rootSchema.definitions`.\n\nThe registry is passed down the component tree, so you can access it from your custom field and `SchemaField` components.\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's an example:\n\n```jsx\n\nconst CustomSchemaField = function(props) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields = {\n SchemaField: CustomSchemaField\n};\n\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/internals.md":"# Internals\n\nMiscellaneous internals of react-jsonschema-form are listed here.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. We currently support JSON Schema-07 by default, but we also support other JSON schema versions through the [custom schema validation](../usage/validation/#custom-schema-validation) feature. Due to the limitation of form widgets, there are some exceptions as follows:\n\n* `additionalItems` keyword for arrays\n\n This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n\n* `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`)\n\n The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties \"outside\" of the `anyOf/oneOf`.\n\n You can also use `oneOf` with [schema dependencies](../usage/dependencies.md) to dynamically add schema properties based on input data.\n\n The `allOf` keyword is supported; it uses [json-schema-merge-allof](https://github.com/mokkabonna/json-schema-merge-allof) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema.\n\n* `\"additionalProperties\":false` produces incorrect schemas when used with [schema dependencies](#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `\"additionalProperties\":false` when you use schema dependencies. See [#848](https://github.com/rjsf-team/react-jsonschema-form/issues/848) [#902](https://github.com/rjsf-team/rjsf-team/issues/902) [#992](https://github.com/rjsf-team/rjsf-team/issues/992)\n\n## Handling of schema defaults\n\nThis library automatically fills default values defined in the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](#schema-dependencies).\n\nSince there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.\n\nCheck out the defaults example on the [live playground](https://rjsf-team.github.io/react-jsonschema-form/) to see this in action.\n\n### Merging of defaults into the form data\n\nThere are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.\n\nThis are the rules which are used when injecting the defaults:\n\n- When there is a scalar in the form data, nothing is changed.\n- When the value is `undefined` in the form data, the default is created in the form data.\n- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.\n- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.\n\n### Merging of defaults within the schema\n\nIn the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together with the \"deeper\" not having precedence. If the parent node defines properties, which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.\n\nFor arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.\n\n## Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons). If you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n```css\ni.glyphicon { display: none; }\n.btn-add::after { content: 'Add'; }\n.array-item-move-up::after { content: 'Move Up'; }\n.array-item-move-down::after { content: 'Move Down'; }\n.array-item-remove::after { content: 'Remove'; }\n```\n\n## Submit form programmatically\nYou can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.\nThis method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.\n\n```jsx\nconst onSubmit = ({formData}) => console.log(\"Data submitted: \", formData);\nlet yourForm;\n\nconst schema = {\n type: \"string\"\n};\n\nrender((\n {yourForm = form;}}/>\n), document.getElementById(\"app\"));\n\nyourForm.submit();\n```\n","packages/docs/versioned_docs/version-3.2.1/api-reference/form-props.md":"---\ntitle: Props\n---\n\n# <Form /> props\n\n## acceptcharset\n\nThe value of this prop will be passed to the `accept-charset` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-accept-charset).\n\n## action\n\nThe value of this prop will be passed to the `action` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action).\n\nNote that this just renders the `action` attribute in the HTML markup. There is no real network request being sent to this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()` and then calls the [`onSubmit`](#onSubmit) function, where you could send a request programmatically with `fetch` or similar.\n\n## additionalMetaSchemas\n\nThis prop allows you to validate the form data against another JSON Schema meta schema, for example, JSON Schema draft-04. See [Validation](../usage/validation.md) for more information.\n\n## ArrayFieldTemplate\n\nReact component used to customize how alls arrays are rendered on the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## autoComplete\n\nThe value of this prop will be passed to the `autocomplete` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete).\n\n## autocomplete\n\nDeprecated, same functionality as `autoComplete`\n\n## className\n\nThe value of this prop will be passed to the `class` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## children\n\nYou can provide custom buttons to your form via the `Form` component's `children`. Otherwise a default submit button will be rendered.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n
\n \n \n
\n \n), document.getElementById(\"app\"));\n```\n\n> **Warning:** There needs to be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n## customFormats\n\nThis prop allows you to define custom formats for validation. See [Validation](../usage/validation.md) for more information.\n\n## disabled\n\nIt's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n
\n), document.getElementById(\"app\"));\n```\n\nIf you just want to disable some of the fields, see the `ui:disabled` parameter in `uiSchema`.\n\n## readonly\n\nIt's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf you just want to make some of the fields read-only, see the `ui:readonly` parameter in `uiSchema`.\n\n## enctype\n\nThe value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).\n\n## extraErrors\n\nThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation. See [Validation](../usage/validation.md) for more information.\n\n## ErrorList\n\nYou can pass a React component to this prop to customize how form errors are displayed. See [Validation](../usage/validation.md) for more information.\n\n## fields\n\nDictionary of registered fields in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n## FieldTemplate\n\nReact component used to customize each field of the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## formContext\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.\n\n## formData\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema.\n\n## id\n\nThe value of this prop will be passed to the `id` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## idPrefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis will render `` instead of ``\n\n## liveOmit\n\nIf `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field will be removed whenever `onChange` is called. Set to `false` by default.\n\n## liveValidate\n\nIf set to true, the form will perform validation and show any validation errors whenever the form data is changed, rather than just on submit.\n\n## method\n\nThe value of this prop will be passed to the `method` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method).\n\n## name\n\nThe value of this prop will be passed to the `name` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name).\n\n## noHtml5Validate\n\nIf set to true, turns off HTML5 validation on the form. Set to `false` on default.\n\n## noValidate\n\nIf set to true, turns off all validation. Set to `false` by default.\n\n## ObjectFieldTemplate\n\nReact component used to customize how all objects are rendered in the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## omitExtraData\n\nIf set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.\n\n## onBlur\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n## onChange\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same args as `onSubmit` any time a value is updated in the form.\n\n## onError\n\nTo react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\nconst onError = (errors) => console.log(\"I have\", errors.length, \"errors to fix\");\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## onFocus\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## onSubmit\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form data you're usually after. The original event will also be passed as a second parameter:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\nconst onSubmit = ({formData}, e) => console.log(\"Data submitted: \", formData);\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, you may need to set the `omitExtraData` and/or `liveOmit` props.\n\n## schema\n\nForm schema. We support JSON schema draft-07 by default. See [Schema Reference](https://json-schema.org/draft-07/json-schema-release-notes.html) for more information.\n\n## showErrorList\n\nWhen this prop is set to true, a list of errors (or the custom error list defined in the `ErrorList`) will also show. When set to false, only inline input validation errors will be shown. Set to `true` by default. See [Validation](../usage/validation.md) for more information.\n\n## tagName\n\nIt's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.\n\n```jsx\n\n```\n\nYou can also provide a class/function component.\n\n\n```jsx\nconst CustomForm = props => \n// ...\n\n```\n\n## target\n\nThe value of this prop will be passed to the `target` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-target).\n\n## transformErrors\n\nA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation. See [Validation](../usage/validation.md) for more information.\n\n## uiSchema\n\nForm uiSchema. See [uiSchema Reference](uiSchema.md) for more information.\n\n## validate\n\nThe `validate` prop requires a function that specifies custom validation rules for the form. See [Validation](../usage/validation.md) for more information.\n\n## widgets\n\nDictionary of registered widgets in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n","packages/docs/versioned_docs/version-3.2.1/api-reference/themes/semantic-ui/uiSchema.md":"# uiSchema Options for Semantic-UI\n\nThere are various options to pass to semantic theme fields.\n\nNote that every semantic property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {semantic:{[property]: [value]}}}`\n\nIn other words, the following uiSchema is equivalent:\n\n> Note: All fields have the following settings below as their default\n\n```\nfluid: Take on the size of its container.\ninverted: Format to appear on dark backgrounds.\n```\n\n```json\n{\n \"ui:options\": {\n \"semantic\" : {\n \"fluid\": true,\n \"inverted\": false,\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\",\n }\n }\n }\n}\n```\n#### Semantic Widget Optional Properties\n - [Semantic props for TextWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for CheckboxWidget](https://react.semantic-ui.com/modules/checkbox/)\n - [Semantic props for SelectWidget](https://react.semantic-ui.com/modules/dropdown/)\n - [Semantic props for RangeWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for RadioWidget](https://react.semantic-ui.com/addons/radio/)\n - [Semantic props for PasswordWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for UpDownWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for TextAreaWidget](https://react.semantic-ui.com/addons/text-area/)\n\n\n\n## errorOptions\n\nThe uiSchema semantic object accepts an `errorOptions` property for each field of the schema:\n\n```\nsize: determines the size of the error message dialog\npointing: determines the direction of the arrow on the error message dialog\n```\n\nBelow are the current defaults\n```jsx\nconst uiSchema = {\n \"ui:options\": {\n \"semantic\" : {\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\",\n }\n }\n }\n};\n```\n\n## semantic options uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the semantic uiSchema value within the `ui:options` property:\n\n\n```\nwrapItem: wrap each array item in a Segment\nhorizontalButtons: horizontal buttons instead of the default vertical\n```\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n \"semantic\": {\n \"wrapItem\": true,\n \"horizontalButtons\": true\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## formContext\n\nThe formContext semantic object accepts `wrapContent` ,`wrapLabel` properties.\n\n```\nwrapContent: wrap all inputs field content in a div, for custom styling\nwrapLabel: wrap all labels in a div, for custom styling via CSS\n```\n\n```jsx\n\n```\n","packages/docs/versioned_docs/version-3.2.1/api-reference/uiSchema.md":"# uiSchema\nJSON Schema is limited for describing how a given data type should be rendered as a form input component. That's why this library introduces the concept of uiSchema.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.\n\nNote that every property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {[property]: [value]}}`, or `{\"ui:[property]\": value}`.\n\nIn other words, the following uiSchemas are equivalent:\n\n```json\n{\n \"ui:title\": \"Title\",\n \"ui:description\": \"Description\"\n}\n```\n\n```json\n{\n \"ui:options\": {\n \"title\": \"Title\",\n \"description\": \"Description\"\n }\n}\n```\n\n## classNames\n\nThe uiSchema object accepts a `classNames` property for each field of the schema:\n\n```jsx\nconst uiSchema = {\n title: {\n classNames: \"task-title foo-bar\"\n }\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n## autofocus\n\nIf you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"textarea\",\n \"ui:autofocus\": true\n}\n```\n\n## description\n\nSometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:description\": \"The best password\"\n};\n```\n\n## disabled\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n## enumDisabled\n\nTo disable an option, use the `enumDisabled` property in uiSchema.\n\n```js\nconst schema = {\n type: \"string\",\n enum: [\"one\", \"two\", \"three\"],\n};\n\nconst uiSchema={\n \"ui:enumDisabled\": ['two'],\n}\n```\n\n## help\n\nSometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:help\": \"Hint: Make it strong!\"\n};\n```\n\n![](https://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s) (after contextualized errors, if any).\n\n## inputType\n\nTo change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:options\": {\n inputType: 'tel'\n }\n};\n```\n\n## label\n\nField labels are rendered by default. Labels may be omitted by setting the `label` option to `false` in the `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:options\": {\n label: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## order\n\nThis property allows you to reorder the properties that are shown for a particular object. See [Objects](../usage/objects.md) for more information.\n\n## placeholder\n\nYou can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:\n\n```jsx\nconst schema = {type: \"string\", format: \"uri\"};\nconst uiSchema = {\n \"ui:placeholder\": \"http://\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```jsx\nconst schema = {type: \"string\", enum: [\"First\", \"Second\"]};\nconst uiSchema = {\n \"ui:placeholder\": \"Choose an option\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## readonly\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only. This is equivalent to setting the `readOnly` property in the schema.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n## rootFieldId\n\nBy default, this library will generate ids unique to the form for all rendered widgets. If you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```js\nconst uiSchema = {\n \"ui:rootFieldId\": \"myform\"\n};\n```\n\nThis will make all widgets have an id prefixed with `myform`.\n\n## rows\n\nYou can set the initial height of a textarea widget by specifying `rows` option.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"textarea\",\n \"ui:options\": {\n rows: 15\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## title\n\nSometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:title\": \"Your password\"\n};\n```\n## Theme Options\n[Semantic UI](themes/semantic-ui/uiSchema.md)\n","packages/docs/versioned_docs/version-3.2.1/usage/arrays.md":"# Arrays\n\nArrays are defined with a type equal to `array`, and array items' schemas are specified in the `items` keyword.\n\n## Arrays of a single field\n\nArrays of a single field type can be specified as follows:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Arrays of objects\n\nArrays of objects can be specified as follows:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n }\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n items: {\n \"ui:widget\": \"textarea\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## The `additionalItems` keyword\n\nThe `additionalItems` keyword allows the user to add additional items of a given schema. For example:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n },\n additionalItems: {\n type: \"boolean\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Array item options\n\n### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n orderable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n addable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n removable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n\n## Multiple-choice list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. There are two alternative widgets for picking multiple elements from a list of choices. Typically this applies when a schema has an `enum` list for the `items` property of an `array` field, and the `uniqueItems` property set to `true`.\n\nExample:\n\n```jsx\nconst schema = {\n type: \"array\",\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nBy default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:\n\n```js\nconst schema = {\n type: \"array\",\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkboxes\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n\n## Specifying the minimum or maximum number of items\n\nNote that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.\n\nExample:\n\n```jsx\nconst schema = {\n type: \"array\",\n minItems: 2,\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou can also specify the maximum number of items in an array using the `maxItems` property.\n\n\n## Inline checkboxes\n\nBy default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:\n\n```js\nconst schema = {\n type: \"array\",\n minItems: 2,\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkboxes\",\n \"ui:options\": {\n inline: true\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```","packages/docs/versioned_docs/version-3.2.1/usage/definitions.md":"# Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:\n\n```jsx\nconst schema = {\n \"definitions\": {\n \"address\": {\n \"type\": \"object\",\n \"properties\": {\n \"street_address\": { \"type\": \"string\" },\n \"city\": { \"type\": \"string\" },\n \"state\": { \"type\": \"string\" }\n },\n \"required\": [\"street_address\", \"city\", \"state\"]\n }\n },\n \"type\": \"object\",\n \"properties\": {\n \"billing_address\": { \"$ref\": \"#/definitions/address\" },\n \"shipping_address\": { \"$ref\": \"#/definitions/address\" }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nNote that this library only supports local definition referencing. The value in the `$ref` keyword should be a [JSON Pointer](https://tools.ietf.org/html/rfc6901) in URI fragment identifier format.\n","packages/docs/versioned_docs/version-3.2.1/usage/dependencies.md":"# Dependencies\n\nreact-jsonschema-form supports the `dependencies` keyword from an earlier draft of JSON Schema (note that this is not part of the latest JSON Schema spec, though). Dependencies can be used to create dynamic schemas that change fields based on what data is entered.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" },\n \"billing_address\": { \"type\": \"string\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": [\"billing_address\"]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined, making them both required if either is defined.\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" },\n \"billing_address\": { \"type\": \"string\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": [\"billing_address\"],\n \"billing_address\": [\"credit_card\"]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))*\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": {\n \"properties\": {\n \"billing_address\": { \"type\": \"string\" }\n },\n \"required\": [\"billing_address\"]\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))*\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```jsx\nconst schema = {\n \"title\": \"Person\",\n \"type\": \"object\",\n \"properties\": {\n \"Do you have any pets?\": {\n \"type\": \"string\",\n \"enum\": [\n \"No\",\n \"Yes: One\",\n \"Yes: More than one\"\n ],\n \"default\": \"No\"\n }\n },\n \"required\": [\n \"Do you have any pets?\"\n ],\n \"dependencies\": {\n \"Do you have any pets?\": {\n \"oneOf\": [\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"No\"\n ]\n }\n }\n },\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"Yes: One\"\n ]\n },\n \"How old is your pet?\": {\n \"type\": \"number\"\n }\n },\n \"required\": [\n \"How old is your pet?\"\n ]\n },\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"Yes: More than one\"\n ]\n },\n \"Do you want to get rid of any?\": {\n \"type\": \"boolean\"\n }\n },\n \"required\": [\n \"Do you want to get rid of any?\"\n ]\n }\n ]\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.","packages/docs/versioned_docs/version-3.2.1/usage/objects.md":"# Objects\n\n## Object properties\n\nObjects are defined with a type equal to `object` and properties specified in the `properties` keyword.\n\n```jsx\nconst schema = {\n \"title\": \"My title\",\n \"description\": \"My description\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"age\": {\n \"type\": \"number\"\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Required properties\n\nYou can specify which properties are required using the `required` attribute:\n\n```jsx\nconst schema = {\n \"title\": \"My title\",\n \"description\": \"My description\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"age\": {\n \"type\": \"number\"\n }\n },\n \"required\": [\"name\"]\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Specifying property order\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```jsx\nconst schema = {\n type: \"object\",\n properties: {\n foo: {type: \"string\"},\n bar: {type: \"string\"}\n }\n};\n\nconst uiSchema = {\n \"ui:order\": [\"bar\", \"foo\"]\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```js\nconst uiSchema = {\n \"ui:order\": [\"bar\", \"*\"]\n};\n```\n\n## Additional properties\n\nThe `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n }\n },\n \"additionalProperties\": {\n \"type\": \"number\",\n \"enum\": [1, 2, 3]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this way, an add button for new properties is shown by default.\n\nYou can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.\n\n### `expandable` option\n\nYou can turn support for `additionalProperties` off with the `expandable` option in `uiSchema`:\n\n```js\nconst uiSchema = {\n \"ui:options\": {\n expandable: false\n }\n};\n```","packages/docs/versioned_docs/version-3.2.1/usage/oneof.md":"","packages/docs/versioned_docs/version-3.2.1/usage/single.md":"","packages/docs/versioned_docs/version-3.2.1/usage/themes.md":"","packages/docs/versioned_docs/version-3.2.1/usage/validation.md":"","packages/docs/versioned_docs/version-3.2.1/usage/widgets.md":"","packages/docs/versioned_docs/version-4.2.3/00-quickstart.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-templates.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-themes.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-widgets-fields.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/internals.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/material-ui/customizing-material-ui.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/form-props.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/themes/chakra-ui/uiSchema.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/themes/semantic-ui/uiSchema.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/uiSchema.md":"","packages/docs/versioned_docs/version-4.2.3/usage/arrays.md":"","packages/docs/versioned_docs/version-4.2.3/usage/definitions.md":"","packages/docs/versioned_docs/version-4.2.3/usage/dependencies.md":"","packages/docs/versioned_docs/version-4.2.3/usage/objects.md":"","packages/docs/versioned_docs/version-4.2.3/usage/oneof.md":"","packages/docs/versioned_docs/version-4.2.3/usage/single.md":"","packages/docs/versioned_docs/version-4.2.3/usage/themes.md":"","packages/docs/versioned_docs/version-4.2.3/usage/validation.md":"","packages/docs/versioned_docs/version-4.2.3/usage/widgets.md":"","packages/docs/versioned_docs/version-5.24.10/01-quickstart.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-templates.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-themes.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-widgets-fields.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/internals.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/typescript.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/form-props.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/antd/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/chakra-ui/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/semantic-ui/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/utility-functions.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/validator-ajv8.md":"","packages/docs/versioned_docs/version-5.24.10/contributing.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/arrays.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/definitions.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/dependencies.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/objects.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/oneof.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/single.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v2.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v3.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v4.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v5.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/usage/themes.md":"","packages/docs/versioned_docs/version-5.24.10/usage/validation.md":"","packages/docs/versioned_docs/version-5.24.10/usage/widgets.md":"","packages/docs/versioned_sidebars/version-3.2.1-sidebars.json":"","packages/docs/versioned_sidebars/version-4.2.3-sidebars.json":"","packages/docs/versioned_sidebars/version-5.24.10-sidebars.json":"","packages/docs/versions.json":"","packages/fluentui-rc/README.md":"","packages/mantine/README.md":"","packages/mui/README.md":"","packages/primereact/README.md":"","packages/react-bootstrap/README.md":"","packages/semantic-ui/README.md":"","packages/shadcn/README.md":"","packages/snapshot-tests/README.md":"","packages/utils/README.md":"","packages/validator-ajv8/README.md":"","packages/validator-ata/README.md":"","packages/validator-cfworker/README.md":""},"files":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages (parallel)\npnpm run build\n\n# Build all packages (sequential, use if parallel causes issues)\npnpm run build-serial\n\n# Run all tests\npnpm test\n\n# Lint (oxlint, type-aware)\npnpm run lint\n\n# Typecheck every package and its tests\npnpm run typecheck\n\n# Dead code / unused dependency check\npnpm run knip\n\n# Format check / format source files (oxfmt)\npnpm run cs-check\npnpm run cs-format\n\n# Format check / format every file in the repo, including configs and markdown\npnpm run format-check\npnpm run format\n\n# Run a single package's tests\ncd packages/core && pnpm test\n\n# Watch mode for a single package\ncd packages/core && pnpm run test:watch\n\n# Update snapshots\ncd packages/snapshot-tests && pnpm run test:update\n\n# Start the playground (interactive demo)\ncd packages/playground && pnpm start\n\n# Full sanity check (lint + knip + build + test)\npnpm run sanity-check\n```\n\nCI runs lint, knip, build, typecheck, and test in that order, so run those before pushing. Per-package `tsc` misses the test and playground projects; only the root `typecheck` covers them.\n\nIndividual package builds run `build:ts` (`tsc -b`, emits `lib/`) and then bundle `dist/` in three formats: `build:cjs` and `build:esm` via esbuild, `build:umd` via rollup.\n\n## Architecture\n\nThis is an **pnpm workspaces + Nx** monorepo. All packages live under `packages/` and are scoped as `@rjsf/*`.\n\n### Package roles\n\n| Package | Role |\n| ------------------------------------------------------------------- | ------------------------------------------------------------------------ |\n| `@rjsf/utils` | Shared types, 80+ utility functions, schema helpers. No UI dependencies. |\n| `@rjsf/core` | Core `Form` component, Bootstrap 3 as default theme, `withTheme()` HOC. |\n| `@rjsf/validator-ajv8` | AJV 8-based validator. Exported via `customizeValidator()`. |\n| `@rjsf/snapshot-tests` | Shared snapshot test suite consumed by all theme packages. |\n| Theme packages (`@rjsf/mui`, `@rjsf/antd`, `@rjsf/chakra-ui`, etc.) | UI-library-specific implementations of fields, widgets, and templates. |\n| `@rjsf/playground` | Vite app importing all themes, used for manual testing and demos. |\n| `@rjsf/docs` | Docusaurus documentation site. |\n\n### Registry pattern (the plugin system)\n\nThe `Registry` object is the core extension point passed to every field/widget/template:\n\n```typescript\nRegistry = {\n fields, // Map of field type → Field component\n widgets, // Map of widget name → Widget component\n templates, // Layout/structural templates\n rootSchema, // Root JSON Schema\n formContext, // Arbitrary context object threaded to all components\n schemaUtils, // Schema parsing & validation helpers\n translateString,\n globalFormOptions, // Form-level options available to every template, field, and widget\n globalUiOptions, // Optional; global ui:options applied to every field\n uiSchemaDefinitions, // Optional; uiSchema fragments keyed by $ref path, applied when that $ref resolves\n};\n```\n\nOverride fields/widgets/templates per-form via props, or globally via `withTheme()`.\n\n### Theme pattern\n\nEvery theme package follows the same structure:\n\n1. Imports `withTheme` from `@rjsf/core`\n2. Defines custom `Templates`, `Widgets`, and optionally `Fields`\n3. Calls `withTheme({ templates, widgets, fields })` to produce a themed `Form`\n4. Exports: `Form` (default), `Theme`, `Templates`, `Widgets`\n\n### Field → Widget → Template hierarchy\n\n- **Fields** handle schema-level logic (ObjectField, ArrayField, MultiSchemaField for oneOf/anyOf, etc.)\n- **Widgets** handle individual input rendering (TextWidget, SelectWidget, CheckboxWidget, etc.)\n- **Templates** control structural/layout rendering (FieldTemplate, ArrayFieldTemplate, ButtonTemplates, etc.)\n\nFields select which widget to render based on schema `type` and `ui:widget`. Templates wrap the output for consistent styling.\n\nWhen making a change to a widget or template, consider if the change should be generalized to all theme packages. If substantial logic is duplicated across themes, consider refactoring the logic to `@rjsf/utils` or `@rjsf/core`.\n\n### Form rendering flow\n\n1. Caller provides `schema`, `validator` (required), `formData`, and `uiSchema`\n2. `Form` creates `schemaUtils` from validator + schema\n3. Schema is recursively decomposed into fields → widgets → templates\n4. On change/blur: callbacks fire with updated `formData` and `errorSchema`\n5. On submit: full validation runs, then `onSubmit` fires (or `onError` if invalid)\n\n### Key `@rjsf/utils` exports to know\n\n- Schema helpers: `findSchemaDefinition`, `mergeSchemas`, `getSchemaType`, `createSchemaUtils`\n- Form data: `mergeDefaultsWithFormData`, `removeOptionalEmptyObjects`\n- Error handling: `toErrorSchema`, `toErrorList`\n- Enum helpers: `enumOptionsSelectValue`, `enumOptionsDeselectValue`\n- React hooks: `useDeepCompareMemo`, `useFileWidgetProps`, `useAltDateWidgetProps`\n\n## Code style\n\n- **TypeScript strict mode**, `esnext` target, `verbatimModuleSyntax` (type-only imports must be `import type`), relative imports include the `.ts`/`.tsx` extension\n- **oxfmt** (`.oxfmtrc.json`): single quotes, JSX single quotes, 120-char print width, sorted imports with React first\n- **oxlint** (`.oxlintrc.json`): the `airbnb-typescript` rule set translated to oxlint, plus `typescript`, `react`, `jsx-a11y`, and `import` plugins; enforces curly braces, no-console, React rules of hooks\n- **knip** (`knip.jsonc`): fails CI on unused files, exports, and dependencies\n- Pre-commit hook (Husky + lint-staged) runs `oxlint --fix` and `oxfmt` on staged files\n\n## Code comments\n\n- Default to no comments. Write self-documenting code — clear names and structure — as the primary means of explanation.\n- When a comment is warranted, explain the WHY (rationale, constraints, non-obvious tradeoffs), not the WHAT — well-named code already says what it does.\n- Don't leave \"before/after\" or diff-style commentary in code comments or in this file. That belongs in commit messages and PR descriptions, not in code that has to keep reading true after the change ships.\n\n## Changelog\n\n- When adding an entry to `CHANGELOG.md`, append it as the last bullet under the relevant package's heading (e.g. `## @rjsf/daisyui`) — after the existing bullets, not inserted above or among them.\n\n## Testing\n\n- Vitest, jsdom, Testing Library; shared config in `testing/vitest.base.mts`, extended per package\n- Tests resolve `@rjsf/*` imports to TypeScript source via the `@rjsf/source` export condition, so no build is needed before running them\n- `@rjsf/utils` and the validator packages enforce 100% coverage\n- Snapshot tests in `@rjsf/snapshot-tests` are shared across theme packages — run `test:update` there when changing core rendering\n- Node >=20 required; `.nvmrc` pins 24\n","packages/antd/README.md":"","packages/chakra-ui/README.md":"","packages/core/README.md":"","packages/daisyui/README.md":"","packages/docs/README.md":"","packages/docs/docs/01-quickstart.md":"# Quickstart\n\nLet's walk through setup of a form after installing the dependency properly.\nNOTE: As of version 5, the `Form` now requires you to provide a `validator` implementation. We recommend the one from `@rjsf/validator-ajv8`.\n\n## Form schema\n\nFirst, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also render an object with multiple fields with the below schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nFor more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](json-schema/single.md).\n\n## Form uiSchema\n\nThe uiSchema is used to add more customization to the form's look and feel. Use the `classNames`\nattribute of the uiSchema to add a custom CSS class name to the form:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:classNames': 'custom-css-class',\n};\n\nrender(, document.getElementById('app'));\n```\n\nTo customize object fields in the uiSchema, the structure of the\nuiSchema should be `{key: value}`, where `key` is the property key and `value` is an\nobject with the uiSchema configuration for that particular property. For example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n name: {\n 'ui:classNames': 'custom-class-name',\n },\n age: {\n 'ui:classNames': 'custom-class-age',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n title: {\n type: 'string',\n },\n done: {\n type: 'boolean',\n },\n },\n};\n\nconst formData = {\n title: 'First task',\n done: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If your form has a single field, pass a single value to `formData`. ex: `formData=\"Charlie\"`\n\n> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\nYou can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `` component; see the [Form Props Reference](./api-reference/form-props.md) for more details.\n\n### Controlled component\n\nBy default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the\n`onChange` and `formData` props as in the below example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst App = () => {\n const [formData, setFormData] = React.useState(null);\n return (\n setFormData(e.formData)}\n validator={validator}\n />\n );\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/advanced-customization/custom-templates.md":"# Custom Templates\n\nThis is an advanced feature that lets you customize even more aspects of the form:\n\n| | Custom Field | Custom Template | Custom Widget |\n| --------------------- | ----------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| **What it does** | Overrides all behaviour | Overrides just the layout (not behaviour) | Overrides just the input box (not layout, labels, or help, or validation) |\n| **Usage** | Global or per-field | Global or per-field | Global or per-field |\n| **Global Example** | `` | `` | `` |\n| **Per-Field Example** | `\"ui:field\": MyCustomField` | `\"ui:ArrayFieldTemplate\": MyArrayTemplate` | `\"ui:widget\":MyCustomWidget` |\n| **Documentation** | [Custom Fields](custom-widgets-fields.md) | See documentation below | [Custom Widgets](custom-widgets-fields.md) |\n\nIn version 5, all existing `templates` were consolidated into a new `TemplatesType` interface that is provided as part of the `Registry`.\nThey can also be overloaded globally on the `Form` via the `templates` prop as well as globally or per-field through the `uiSchema`.\nFurther, many new templates were added or repurposed from existing `widgets` and `fields` in an effort to simplify the effort needed by theme authors to build new and/or maintain current themes.\nThese new templates can also be overridden by individual users to customize the specific needs of their application.\nA special category of templates, `ButtonTemplates`, were also added to support the easy replacement of the `Submit` button on the form, the `Add` and `Remove` buttons associated with `additionalProperties` and `patternProperties` on objects and elements of arrays, as well as the `Move up` and `Move down` buttons used for reordering arrays.\nThis category, unlike the others, can only be overridden globally via the `templates` prop on `Form`.\n\nBelow is the table that lists all the `templates`, their props interface, their `uiSchema` name and from where they originated in the previous version of RJSF:\n\n| Template | Props Type | UiSchema name | Origin |\n| --------------------------------------------------------------- | ---------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [ArrayFieldTemplate](#arrayfieldtemplate) | ArrayFieldTemplateProps | ui:ArrayFieldTemplate | Formerly `Form.ArrayFieldTemplate` or `Registry.ArrayFieldTemplate` |\n| [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate) | ArrayFieldDescriptionProps | ui:ArrayFieldDescriptionTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemTemplate](#arrayfielditemtemplate) | ArrayFieldItemTemplateProps | ui:ArrayFieldItemTemplate | Formerly an internal class for `ArrayFieldTemplate`s in all themes, refactored as a template in each theme, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemButtonsTemplate](#arrayfielditembuttonstemplate) | ArrayFieldItemButtonsTemplateProps | ui:ArrayFieldItemButonsTemplate | Formerly an internal class for `ArrayFieldItemTemplate`s in all themes, refactored as a template in the `core`, used in all `ArrayFieldItemTemplate` implementations |\n| [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) | ArrayFieldTitleProps | ui:ArrayFieldTitleTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations. |\n| [BaseInputTemplate](#baseinputtemplate) | WidgetProps | ui:BaseInputTemplate | Formerly a `widget` in `@rjsf.core` moved to `templates` and newly implemented in each theme to maximize code reuse. |\n| [CyclicSchemaExpandTemplate](#cyclicschemaexpandtemplate) | CyclicSchemaExpandProps | ui:CyclicSchemaExpandTemplate | Added in RJSF v6 to support circular `$ref` cycle detection |\n| [DescriptionFieldTemplate](#descriptionfieldtemplate) | DescriptionFieldProps | ui:DescriptionFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [ErrorListTemplate](#errorlisttemplate) | ErrorListProps | ui:ErrorListTemplate | Formerly `Form.ErrorList` moved to `templates` with the `Templates` suffix. Previously implemented in each theme. |\n| [FallbackFieldTemplate](#fallbackfieldtemplate) | FallbackFieldTemplateProps | ui:FallbackFieldTemplate | Added in RJSF v6 |\n| [FieldErrorTemplate](#fielderrortemplate) | FieldErrorProps | ui:FieldErrorTemplate | Formerly internal `ErrorList` component accessible only to `SchemaField` |\n| [FieldHelpTemplate](#fieldhelptemplate) | FieldHelpProps | ui:FieldHelpTemplate | Formerly internal `Help` component accessible only to `SchemaField` |\n| [FieldTemplate](#fieldtemplate) | FieldTemplateProps | ui:FieldTemplate | Formerly `Form.FieldTemplate` or `Registry.FieldTemplate` |\n| [GridTemplate](#gridtemplate) | GridTemplateProps | ui:GridTemplate | Theme dependent implementations of a Grid element for either rows or columns |\n| [MultiSchemaFieldTemplate](#multischemafieldtemplate) | MultiSchemaFieldTemplateProps | ui:MultiSchemaFieldTemplate | Formerly part of `@rjsf/core `MultiSchemaField`, refactored as a template |\n| [ObjectFieldTemplate](#objectfieldtemplate) | ObjectFieldTemplateProps | ui:ObjectFieldTemplate | Formerly `Form.ObjectFieldTemplate` or `Registry.ObjectFieldTemplate` |\n| [OptionalDataControlsTemplate](#optionaldatacontrolstemplate) | OptionalDataControlsTemplateProps | ui:OptionalDataControlsTemplate | New feature in V6 |\n| [TitleFieldTemplate](#titlefieldtemplate) | TitleFieldProps | ui:TitleFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [UnsupportedFieldTemplate](#unsupportedfieldtemplate) | UnsupportedFieldProps | ui:UnsupportedFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. |\n| [WrapIfAdditionalTemplate](#wrapifadditionaltemplate) | WrapIfAdditionalTemplateProps | ui:WrapIfAdditionalTemplate | Formerly an internal component in `@rjsf.core`. Previously implemented in most themes. |\n| [ButtonTemplates.AddButton](#addbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveDownButton](#movedownbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveUpButton](#moveupbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.RemoveButton](#removebutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.SubmitButton](#submitbutton) | SubmitButtonProps | n/a | Formerly a `field` in each theme move to `templates.ButtonTemplates` |\n\n## ArrayFieldTemplate\n\nYou can use an `ArrayFieldTemplate` to customize how your arrays are rendered.\nThis allows you to customize your array, and each element in the array.\nIf you only want to customize how the array's title, description or how the array items are presented, you may want to consider providing your own [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate), [ArrayFieldItemTemplate](#arrayfielditemtemplate) and/or [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) instead.\nYou can also customize arrays by specifying a widget in the relevant `ui:widget` schema, more details over on [Custom Widgets](../json-schema/arrays.md#custom-widgets).\n\n```tsx\nimport { ArrayFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldTemplate from './ArrayFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': ArrayFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': 'CustomArrayFieldTemplate',\n};\n```\n\nPlease see the [customArray.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customArray.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for another example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `fieldPathId`: An object containing the id for this object & ids for its properties.\n- `items`: An array of React nodes representing the items in the array.\n- `onAddClick: (event?) => void`: A function that adds a new item to the end of the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formData`: The formData for this array.\n- `errorSchema`: The optional validation errors for the array field and the items within it, in the form of an `ErrorSchema`\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget\n- `registry`: The `registry` object.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.\n\n## ArrayFieldDescriptionTemplate\n\nThe out-of-the-box version of this template will render the `DescriptionFieldTemplate` with a generated id, if there is a `description` otherwise nothing is rendered.\nIf you want different behavior for the rendering of the description of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL descriptions in the `Form`, see [DescriptionFieldTemplate](#descriptionfieldtemplate)\n\n```tsx\nimport { ArrayFieldDescriptionProps, RJSFSchema, descriptionId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldDescriptionTemplate(props: ArrayFieldDescriptionProps) {\n const { description, fieldPathId } = props;\n const id = descriptionId(fieldPathId);\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldDescriptionTemplate`:\n\n- `description`: The description of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `registry`: The `registry` object.\n\n## ArrayFieldItemTemplate\n\nThe `ArrayFieldItemTemplate` is used to render the representation of a single item in an array.\nAll of the `ArrayFieldTemplate` implementations in all themes get this template from the `registry` in order to render array fields items.\nEach theme has an implementation of the `ArrayFieldItemTemplate` to render an array field item in a manner best suited to the theme.\nIf you want to change how an array field item is rendered you can customize this template (for instance to remove the buttons rendered by `ArrayFieldItemButtonsTemplate`).\n\n```tsx\nimport { ArrayFieldItemTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {\n const { children, className } = props;\n return
{children}
;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemTemplate`:\n\n- `children`: The html for the item's content.\n- `buttonsProps`: The props to pass to the `ArrayFieldItemButtonTemplate`.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `itemKey`: A stable, unique key for the array item.\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n- `parentUiSchema`: The UI schema of the array item's parent array field, used for customization in some themes\n\n## ArrayFieldItemButtonTemplate\n\nThe `ArrayFieldItemButtonTemplate` is used to render the representation of the buttons used for copying, moving and deleting an item in an array.\nAll of the `ArrayFieldItemTemplate` implementations in all themes get this template from the `registry` in order to render array fields items' buttons.\nCurrently, only the `core` them has an implementation of this template as the button rendering is identical across all themes.\nIf you want to change how an array field item's buttons are rendered you can customize this template (for instance to remove the move up/down and remove buttons).\n\n```tsx\nimport { useMemo } from 'react';\nimport { ArrayFieldTemplateItemButtonsType, buttonId, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemButtonsTemplate(props: ArrayFieldTemplateItemButtonsType) {\n const { disabled, readonly, hasCopy, fieldPathId, index, onCopyIndexClick, registry, uiSchema } = props;\n const { CopyButton } = registry.templates.ButtonTemplates;\n const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);\n if (!hasCopy) {\n return undefined;\n }\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemButtonsTemplate`:\n\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `hasCopy`: A boolean value stating whether the array item can be copied.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `onAddItem: event?) => void`: Callback function that adds a new item below this item.\n- `onCopyItem: (event?) => void`: Callback function that copies this item below itself.\n- `onRemoveItem: (event?) => void`: Callback function that removes the item from the list.\n- `onMoveUpItem: (event?) => void`: Callback function that moves the item up one spot in the list\n- `onMoveDownItem: (event?) => void`: Callback function that moves the item down one spot in the list\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `style`: The optional style to pass to all of the buttons\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n\n## ArrayFieldTitleTemplate\n\nThe out-of-the-box version of this template will render the `TitleFieldTemplate` with a generated id, if there is a `title` otherwise nothing is rendered.\nIf you want a different behavior for the rendering of the title of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL titles in the `Form`, see [TitleFieldTemplate](#titlefieldtemplate)\n\n```tsx\nimport { ArrayFieldTitleTemplateProps, RJSFSchema, titleId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTitleTemplate(props: ArrayFieldTitleProps) {\n const { title, fieldPathId } = props;\n const id = titleId(fieldPathId);\n return

{title}

;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldTitleTemplate`:\n\n- `title`: The title of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `required`: A boolean value stating if the field is required\n- `registry`: The `registry` object.\n\n## BaseInputTemplate\n\nThe `BaseInputTemplate` is the template to use to render the basic `` component for a theme.\nIt is used as the template for rendering many of the `` based widgets that differ by `type` and callbacks only.\nFor example, the `TextWidget` implementation in `core` is simply a wrapper around `BaseInputTemplate` that it gets from the `registry`.\nAdditionally, each theme implements its own version of `BaseInputTemplate` without needing to provide a different implementation of `TextWidget`.\n\nIf you desire a different implementation for the `` based widgets, you can customize this template.\nFor instance, say you have a `CustomTextInput` component that you want to integrate:\n\n```tsx\nimport { ChangeEvent, FocusEvent } from 'react';\nimport { getInputProps, RJSFSchema, BaseInputTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nimport CustomTextInput from '../CustomTextInput';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction BaseInputTemplate(props: BaseInputTemplateProps) {\n const {\n schema,\n id,\n options,\n label,\n value,\n type,\n placeholder,\n required,\n disabled,\n readonly,\n autofocus,\n onChange,\n onChangeOverride,\n onBlur,\n onFocus,\n rawErrors,\n hideError,\n uiSchema,\n registry,\n ...rest\n } = props;\n const onTextChange = ({ target: { value: val } }: ChangeEvent) => {\n // Use the options.emptyValue if it is specified and newVal is also an empty string\n onChange(val === '' ? options.emptyValue || '' : val);\n };\n const onTextBlur = ({ target: { value: val } }: FocusEvent) => onBlur(id, val);\n const onTextFocus = ({ target: { value: val } }: FocusEvent) => onFocus(id, val);\n\n const inputProps = { ...rest, ...getInputProps(schema, type, options) };\n const hasError = rawErrors.length > 0 && !hideError;\n\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### Wrapping BaseInputTemplate to customize it\n\nSometimes you just need to pass some additional properties to the existing `BaseInputTemplate`.\nThe way to do this varies based upon whether you are using `core` or some other theme (such as `mui`):\n\n```tsx\nimport { BaseInputTemplateProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Templates } from '@rjsf/mui';\n\nconst {\n templates: { BaseInputTemplate },\n} = getDefaultRegistry(); // To get templates from core\n// const { BaseInputTemplate } = Templates; // To get templates from a theme do this\n\nfunction MyBaseInputTemplate(props: BaseInputTemplateProps) {\n const customProps = {};\n // get your custom props from where you need to\n return ;\n}\n```\n\nThe following props are passed to the `BaseInputTemplate`:\n\n- `id`: The generated id for this widget;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `hideError`: A boolean value stating if the widget is hiding its errors.\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onChangeOverride`: A `BaseInputTemplate` implements a default `onChange` handler that it passes to the HTML input component to handle the `ChangeEvent`. Sometimes a widget may need to handle the `ChangeEvent` using custom logic. If that is the case, that widget should provide its own handler via this prop;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties` and `patternProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](./custom-widgets-fields.md#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: The `registry` object\n\n## CyclicSchemaExpandTemplate\n\nThe `CyclicSchemaExpandTemplate` is the template rendered by `CyclicSchemaField` when a circular `$ref` cycle is detected in the schema.\nRJSF automatically detects when a `$ref` would recurse indefinitely (e.g. a schema whose property references its own root) and stops rendering at the cycle boundary.\nAt that point `CyclicSchemaField` renders this template, which shows a warning message and an expand button that the user can click to render one additional level of the recursive structure.\n\nEach theme provides its own implementation.\nYou can replace the template globally via the `templates` prop on `Form`, or per-field via `ui:CyclicSchemaExpandTemplate` in the `uiSchema`.\n\n```tsx\nimport { CyclicSchemaExpandProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// A schema that is self-referencing\nconst schema: RJSFSchema = {\n $schema: 'http://json-schema.org/draft-07/schema#',\n type: 'object',\n title: 'Node',\n properties: {\n value: { type: 'string' },\n child: { $ref: '#' },\n },\n};\n\nfunction CyclicSchemaExpandTemplate(props: CyclicSchemaExpandProps) {\n const { name, fieldPathId, onExpand } = props;\n const buttonId = `${fieldPathId.$id}-button`;\n return (\n
\n Circular reference detected for field "{name}"\n \n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also provide a per-field template via `uiSchema`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': CyclicSchemaExpandTemplate,\n};\n```\n\nor a string value from the `Registry`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': 'CustomCyclicSchemaExpandTemplate',\n};\n```\n\nThe following props are passed to the `CyclicSchemaExpandTemplate` as defined by `CyclicSchemaExpandProps` in `@rjsf/utils`:\n\n- `name`: The unique name of the field at the cycle boundary, usually the property name within its parent object.\n- `fieldPathId`: The `FieldPathId` of the field in the hierarchy; use `fieldPathId.$id` to get the HTML id string.\n- `onExpand`: Callback to call when the user wants to render one additional level; receives the field's id string.\n- `schema`: The schema object for the field at the cycle boundary.\n- `uiSchema`: The uiSchema object for this field.\n- `registry`: The `registry` object.\n\n## DescriptionFieldTemplate\n\nEach theme implements a `DescriptionFieldTemplate` used to render the description of a field.\nIf you want to customize how descriptions are rendered you can.\n\n```tsx\nimport { DescriptionFieldProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction DescriptionFieldTemplate(props: DescriptionFieldProps) {\n const { description, id } = props;\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `DescriptionFieldTemplate`:\n\n- `description`: The description of the field being rendered.\n- `id`: The id of the field in the hierarchy.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ErrorListTemplate\n\nThe `ErrorListTemplate` is the template that renders the all the errors associated with the fields in the `Form`, at the top.\nEach theme implements a `ErrorListTemplate` used to render its errors using components for the theme's toolkit.\nIf you want to customize how all the errors are rendered you can.\n\n```tsx\nimport { ErrorListProps, RJSFValidationError, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction ErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: RJSFValidationError, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `ErrorListTemplate`:\n\n- `schema`: The schema that was passed to `Form`\n- `uiSchema`: The uiSchema that was passed to `Form`\n- `errors`: An array of all errors in this `Form`.\n- `errorSchema`: The `ErrorSchema` constructed by `Form`\n\n## FallbackFieldTemplate\n\nThe `FallbackFieldTemplate` is the template that renders opt-in fallback UI to control fields of unknown or unhandled types. Usage of this feature is controlled by the [`useFallbackUiForUnsupportedType` Form prop](../api-reference/form-props.md#usefallbackuiforunsupportedtype).\n\n```tsx\nimport { FallbackFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'unknownType',\n title: 'My input',\n};\n\nfunction FallbackFieldTemplate(props: FallbackFieldTemplateProps) {\n const { typeSelector, schemaField } = props;\n return (\n
\n
{typeSelector}
\n
{schemaField}
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FallbackFieldTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `registry`: The `Registry` object\n 1\n\n## FieldErrorTemplate\n\nThe `FieldErrorTemplate` is the template that renders all the errors associated a single field.\nIf you want to customize how the errors are rendered you can.\n\n```tsx\nimport { FieldErrorProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldErrorTemplate(props: FieldErrorProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: string, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldErrorTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errors`: An array of all errors for this field\n- `errorSchema`: The `ErrorSchema` for this field\n- `registry`: The `Registry` object\n\n## FieldHelpTemplate\n\nThe `FieldHelpTemplate` is the template that renders the help associated a single field.\nIf you want to customize how the help is rendered you can.\n\n```tsx\nimport { FieldHelpProps, RJSFSchema, helpId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldHelpTemplate(props: FieldHelpProps) {\n const { help, fieldPathId } = props;\n const id = helpId(fieldPathId);\n return ;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldHelpTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `help`: The help information to be rendered\n- `registry`: The `Registry` object\n\n## FieldTemplate\n\nTo take control over the inner organization of each field (each form row), you can define a _field template_ for your form.\n\nA field template is basically a React stateless component being passed field-related props, allowing you to structure your form row as you like.\n\n```tsx\nimport { FieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction CustomFieldTemplate(props: FieldTemplateProps) {\n const { id, classNames, style, label, help, required, description, errors, children } = props;\n return (\n
\n \n {description}\n {children}\n {errors}\n {help}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CustomFieldTemplate from './CustomFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': CustomFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': 'CustomFieldTemplate',\n};\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](../api-reference/uiSchema.md#classnames) defined in your uiSchema.\n- `style`: An object containing the `StyleHTMLAttributes` defined in the `uiSchema`.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionFieldTemplate`](#descriptionfieldtemplate) defined in the `templates` passed to the `Form`).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `hideError`: A boolean value stating if the field is hiding its errors\n- `disabled`: A boolean value stating if the field is disabled.\n- `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.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `onChange`: The value change event handler; Can be called with a new value to change the value for this field.\n- `formData`: The formData for this field.\n- `registry`: The `registry` object.\n\n> Note: you can only define a single global field template for a form, but you can set individual field templates per property using `\"ui:FieldTemplate\"`.\n\n## GridTemplate\n\nThe `GridTemplate` is the template that renders a theme dependent Grid for either a row or column.\nWhile it has only two explicit properties, it extends the `GenericObjectTemplate` in order to support passing any of the properties associated with a Grid implementation for any theme.\nIf you want to customize how grids are rendered you can.\n\n```tsx\nimport { Grid2 } from '@mui/material';\nimport { GridTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\nimport classNames from 'classnames';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction GridTemplate(props: FieldHelpProps) {\n const { children, column, className, ...rest } = props;\n return (\n \n {children}\n \n );\n}\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to the `GridTemplate`:\n\n- `children`: The contents of the grid template\n- `column`: Optional flag indicating whether the grid element represents a column, necessary for themes which have components for Rows vs Column\n\n## MultiSchemaFieldTemplate\n\nEach theme implements a `MultiSchemaFieldTemplate` used to render the layout of a MultiSchemaField, i.e. a field described by a `oneOf` or `anyOf` schema.\nThe template typically renders a Widget used to select the schema to use, as well as a field for the selected schema.\n\n```tsx\nimport { MultiSchemaFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n myField: {\n oneOf: [\n {\n type: 'string',\n title: 'String Field',\n description: 'A field that accepts a string',\n },\n {\n type: 'number',\n title: 'Number Field',\n description: 'A field that accepts a number',\n },\n ],\n },\n },\n};\n\nfunction MultiSchemaFieldTemplate(props: MultiSchemaFieldTemplateProps) {\n const { selector, optionSchemaField } = props;\n return (\n
\n {selector}\n
\n {optionSchemaField}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `MultiSchemaFieldTemplate`:\n\n- `selector`: The rendered Widget used to select a multischema option.\n- `optionSchemaField`: The rendered SchemaField representing the selected option.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ObjectFieldTemplate\n\n```tsx\nimport { ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n title: 'Object title',\n description: 'Object description',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nfunction ObjectFieldTemplate(props: ObjectFieldTemplateProps) {\n return (\n
\n {props.title}\n {props.description}\n {props.properties.map((element) => (\n
{element.content}
\n ))}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ObjectFieldTemplate from './ObjectFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': ObjectFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': 'ObjectFieldTemplate',\n};\n```\n\nPlease see the [customObject.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customObject.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate` as defined by the `ObjectFieldTemplateProps` in `@rjsf/utils`:\n\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `disabled`: A boolean value stating if the object is disabled.\n- `properties`: An array of object representing the properties in the object. Each of the properties represent a child with properties described below.\n- `onAddProperty: () => void`: Callback to use in order to add an new additionalProperty to the object field (to be used with additionalProperties and patternProperties)\n- `readonly`: A boolean value stating if the object is read-only.\n- `required`: A boolean value stating if the object is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errorSchema`: The optional validation errors in the form of an `ErrorSchema`\n- `formData`: The form data for the object.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n- `hidden`: A boolean value stating if the property should be hidden.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.\n\n## OptionalDataControlsTemplate\n\nEach theme implements a `OptionalDataControlsTemplate` used to render the `Optional Data Controls` when that feature has been enabled\n\n```tsx\nimport { OptionalDataControlsTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nfunction OptionalDataControlsTemplate(props: OptionalDataControlsTemplateProps) {\n const { id, registry, label, onAddClick, onRemoveClick } = props;\n if (onAddClick) {\n return (\n \n );\n } else if (onRemoveClick) {\n return (\n \n );\n }\n return {label};\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `OptionalDataControlsTemplate` as defined by the `OptionalDataControlsTemplateProps` in `@rjsf/utils`:\n\n- `id`: The generated id for this Optional Data Control instance.\n- `label`: The label to use for the Optional Data Control\n- `onAddClick`: Optional callback to call when clicking on the Optional Data Control to add data\n- `onRemoveClick`: Optional callback to call when clicking on the Optional Data Control to remove data\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `registry`: The `registry` object.\n\n## TitleFieldTemplate\n\nEach theme implements a `TitleFieldTemplate` used to render the title of a fie\n\n","packages/docs/docs/advanced-customization/custom-themes.md":"# Custom Themes\n\nThe `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component.\nThis theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.\n\n## Usage\n\n```tsx\nimport React, { Component } from 'react';\nimport validator from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\nconst theme: ThemeProps = { widgets: { test: () =>
test
} };\n\nconst ThemedForm = withTheme(theme);\n\nconst Demo = () => ;\n```\n\n## Theme object properties\n\nThe Theme object consists of the same properties as the rjsf `Form` component (such as **widgets**, **fields** and **templates**).\nThe themed-Form component merges together any theme-specific **widgets**, **fields** and **templates** with the default **widgets**, **fields** and **templates**.\nFor instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name.\nThus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`.\nNote that you are not required to pass in either custom **widgets**, **fields** or **templates** when using the custom-themed HOC component;\nyou can essentially redefine the default Form by simply doing `const Form = withTheme({});`.\n\n### Widgets and fields\n\n**widgets** and **fields** should be in the same format as shown [here](./custom-widgets-fields.md).\n\nExample theme with custom widget:\n\n```tsx\nimport { WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst myWidgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst ThemeObject: ThemeProps = { widgets: myWidgets };\nexport default ThemeObject;\n```\n\nThe above can be similarly done for **fields** and **templates**.\n\n### Templates\n\nEach template should be passed into the theme object via the **templates** object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](./custom-templates.md#arrayfieldtemplate) and [ErrorListTemplate](./custom-templates.md#errorlisttemplate) in the theme object:\n\n```tsx\nimport { ArrayFieldTemplateProps, ErrorListProps } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nfunction MyArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nfunction MyErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
    \n {errors.map((error) => (\n
  • {error.stack}
    • \n ))}\n
\n );\n}\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n ErrorListTemplate: MyErrorListTemplate,\n },\n widgets: myWidgets,\n};\n\nexport default ThemeObject;\n```\n\n## Overriding other Form props\n\nJust as the theme can override **widgets**, **fields**, any of the **templates**, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.\n\n```tsx\nimport { ThemeProps } from '@rjsf/core';\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n },\n fields: myFields,\n showErrorList: false,\n widgets: myWidgets,\n};\n```\n\nThus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).\n","packages/docs/docs/advanced-customization/custom-widgets-fields.md":"# Custom Widgets and Fields\n\nThe API allows to specify your own custom _widget_ and _field_ components:\n\n- A _widget_ represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A _field_ usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n## Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `BooleanField`\nrenders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the\n`fields` and `widgets` props:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n default: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkbox',\n};\n\nconst CustomCheckbox = function (props: WidgetProps) {\n return (\n \n );\n};\n\nconst widgets: RegistryWidgetsType = {\n CheckboxWidget: CustomCheckbox,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```tsx\nimport { RegistryFieldsType, RegistryWidgetsType } from '@rjsf/utils';\nimport { FormProps } from '@rjsf/core';\n\nconst customFields: RegistryFieldsType = { StringField: CustomString };\nconst customWidgets: RegistryWidgetsType = { CheckboxWidget: CustomCheckbox };\n\nfunction MyForm(props: FormProps) {\n return ;\n}\n```\n\nThe default fields you can override are:\n\n- `ArrayField`\n- `ArraySchemaField`\n- `BooleanField`\n- `DescriptionField`\n- `OneOfField`\n- `AnyOfField`\n- `LayoutGridField`\n- `LayoutMultiSchemaField`\n- `LayoutHeaderField`\n- `NullField`\n- `NumberField`\n- `ObjectField`\n- `SchemaField`\n- `StringField`\n- `TitleField`\n- `UnsupportedField`\n- `FallbackField`\n- `CyclicSchemaField`\n\nThe default widgets you can override are:\n\n- `AltDateTimeWidget`\n- `AltDateWidget`\n- `CheckboxesWidget`\n- `CheckboxWidget`\n- `ColorWidget`\n- `DateTimeWidget`\n- `DateWidget`\n- `EmailWidget`\n- `FileWidget`\n- `HiddenWidget`\n- `PasswordWidget`\n- `RadioWidget`\n- `RangeWidget`\n- `SelectWidget`\n- `TextareaWidget`\n- `TextWidget`\n- `TimeWidget`\n- `UpDownWidget`\n- `URLWidget`\n\n## Raising errors from within a custom widget or field\n\nYou can raise custom 'live validation' errors by overriding the `onChange` method to provide feedback while users are actively changing the form data.\nIf you do set errors this way, you must also clear them this way by passing `undefined` to the `onChange()` for the `errorSchema` parameter.\n\n:::warning\n\nWhile these errors are retained during validation, it is still preferred for you to use the [`customValidate` Form prop](../api-reference/form-props.md#customvalidate) mechanism instead.\n\n:::\n\n```tsx\nimport { ErrorSchema, RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'text',\n default: 'hello',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'text',\n};\n\nconst CustomTextWidget = function (props: WidgetProps) {\n const { id, value } = props;\n const raiseErrorOnChange = ({ target: { value } }: ChangeEvent) => {\n let raiseError: ErrorSchema | undefined;\n if (value !== 'test') {\n raiseError = {\n __errors: ['Value must be \"test\"'],\n };\n }\n props.onChange(value, [], raiseError, id);\n };\n\n return ;\n};\n\nconst widgets: RegistryWidgetsType = {\n TextWidget: CustomTextWidget,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis creates a custom text widget that raises an error if the input value does not match 'test'.\n\n## Adding your own custom widgets\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `array`\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: Schema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this widget, used to provide unique `name`s and `id`s for the HTML field elements rendered by widgets;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema; Provided in support of custom widgets;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `hideLabel`: A boolean value, if true, will cause the label to be hidden. This is useful for nested fields where you don't want to clutter the UI. Customized via `label` in the `UiSchema`;\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: A [registry](#the-registry-object) object (read next).\n\n### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst widgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'myCustomWidget',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction MyCustomWidget(props: WidgetProps) {\n const { options } = props;\n const { color, backgroundColor } = options;\n return ;\n}\n\nMyCustomWidget.defaultProps = {\n options: {\n color: 'red',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': MyCustomWidget,\n 'ui:options': {\n backgroundColor: 'yellow',\n },\n};\n\n// renders red on yellow input\nrender(, document.getElementById('app'));\n```\n\n> Note: This also applies to [registered custom components](#custom-component-registration).\n\n### Customizing widgets' text input\n\nAll the widgets that render a text input use the `BaseInputTemplate` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInputTemplate` component in the `templates` property of `Form` (see [Custom Templates](./custom-templates.md#baseinputtemplate)).\n\n### Wrapping an existing widget to customize it\n\nSometimes you just need to customize the properties that are passed to an existing widget.\nThe way to do this varies based upon whether you are using core or some other theme (such as mui).\n\nHere is an example of modifying the `SelectWidget` to change the ordering of `enumOptions`:\n\n```tsx\nimport { WidgetProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Widgets } from '@rjsf/mui';\n\nimport myOptionsOrderFunction from './myOptionsOrderFunction';\n\nconst {\n widgets: { SelectWidget },\n} = getDefaultRegistry(); // To get widgets from core\n// const { SelectWidget } = Widgets; // To get widgets from a theme do this\n\nfunction MySelectWidget(props: WidgetProps) {\n const { options } = props;\n let { enumOptions } = options;\n // Reorder the `enumOptions` however you want\n enumOptions = myOptionsOrderFunction(enumOptions);\n return ;\n}\n```\n\n## Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a _latitude_ and a _longitude_:\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n required: ['lat', 'lon'],\n properties: {\n lat: { type: 'number' },\n lon: { type: 'number' },\n },\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n constructor(props: FieldProps) {\n super(props);\n this.state = { ...props.formData };\n }\n\n onChange(name) {\n return (event) => {\n this.setState(\n {\n [name]: parseFloat(event.target.value),\n },\n () => this.props.onChange(this.state),\n );\n };\n }\n\n render() {\n const { lat, lon } = this.state;\n return (\n
\n \n \n
\n );\n }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema: UiSchema = { 'ui:field': 'geo' };\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields: RegistryFieldsType = { geo: GeoPosition };\n\n// Render the form with all the properties we just defined passed\n// as props\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n> Note: Registered fields can be reused across the entire schema.\n\n### Field props\n\nA field component will always be passed the following props:\n\n- `schema`: The JSON subschema object for this field;\n- `uiSchema`: The [uiSchema](../api-reference/uiSchema.md) for this field;\n- `idSchema`: The FieldPathId of the field in the hierarchy\n- `formData`: The data for this field;\n- `errorSchema`: The tree of errors for this field and its children;\n- `registry`: A [registry](#the-registry-object) object (read next).\n- `required`: The required status of this field;\n- `disabled`: A boolean value stating if the field is disabled;\n- `readonly`: A boolean value stating if the field is read-only;\n- `autofocus`: A boolean value stating if the field should autofocus;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema\n- `rawErrors`: `An array of strings listing all generated error messages from encountered errors for this field\n- `onChange`: The field change event handler; called with the updated field value, the optional change path for the value (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed\n- `onBlur`: The input blur event handler; call it with the field id and value;\n- `onFocus`: The input focus event handler; call it with the field id and value;\n\n## The `registry` object\n\nThe `registry` is an object containing the registered core, theme and custom fields and widgets as well as the root schema, form context, schema utils.\n\n- `fields`: The set of all fields used by the `Form`. Includes fields from `core`, theme-specific fields and any [custom registered fields](#custom-field-components);\n- `widgets`: The set of all widgets used by the `Form`. Includes widgets from `core`, theme-specific widgets and any [custom registered widgets](#custom-component-registration), if any;\n- `templates`: The set of templates used by the `Form`. Includes templates from `core`, theme-specific templates and any custom registered templates\n- `rootSchema`: The root schema, as passed to the `Form`, which can contain referenced [definitions](../json-schema/definitions.md);\n- `schemaUtils`: The current implementation of the `SchemaUtilsType` (from `@rjsf/utils`) in use by the `Form`. Used to call any of the validation-schema-based utility functions.\n- `translateString`: The string translation function to use when displaying any of the RJSF strings in templates, fields or widgets\n- `globalFormOptions`: The global Form Options that are available for all templates, fields and widgets to access\n- `globalUiOptions`: The optional global UI Options that are available for all templates, fields and widgets to access\n\nThe registry is passed down the component tree, so you can access it from your custom field, custom widget, custom template and `SchemaField` components.\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSchemaField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n SchemaField: CustomSchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n\n### Custom ArraySchemaField\n\nEverything that was mentioned above for a `Custom SchemaField` applies, but this is only used to render the Array item `children` that are then passed to the `ArrayFieldItemTemplate`.\nBy default, `ArraySchemaField` is not actually implemented in the `fields` list since `ArrayField` falls back to `SchemaField` if `ArraySchemaField` is not provided.\nIf you want to customize how the individual items for an array are rendered, provide your implementation of `ArraySchemaField` as a `fields` override.\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomArraySchemaField = function (props: FieldProps) {\n const { index, registry } = props;\n const { SchemaField } = registry.fields;\n const name = `Index ${index}`;\n return ;\n};\n\nconst fields: RegistryFieldsType = {\n ArraySchemaField: CustomArraySchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom Field by Id\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the field component that applies to any schema or sub-schema based on the schema's `$id` value. This is useful when your custom field should be conditionally applied based on the schema rather than the property name or data type.\n\nTo provide a custom field in this way, the `fields` prop should be an object which contains a key that matches the `$id` value of the schema which should have a custom field; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomIdField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n '/schemas/my-id': CustomIdField,\n};\n\nconst schema: RJSFSchema = {\n $id: '/schemas/my-id',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Wrapping an existing field to customize it\n\nSometimes you just need to customize the properties that are passed to an existing field.\n\nHere is an example of wrapping the `ObjectField` to tweak the `onChange` handler to look for a specific kind of bad data:\n\n```tsx\nimport { useCallback } from 'react';\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nimport checkBadData from './checkBadData';\n\nconst {\n fields: { ObjectField },\n} = getDefaultRegistry();\n\nfunction MyObjectField(props: FieldProps) {\n const { onChange } = props;\n const onChangeHandler = useCallback(\n (newFormData: T | undefined, path: (number | string)[], es?: ErrorSchema, id?: string) => {\n let data = newFormData;\n let error = es;\n if (checkBadData(newFormData)) {\n // Format the `error` and fix the `data` here\n }\n onChange(data, path, error, id);\n },\n [onChange],\n );\n return ;\n}\n```\n","packages/docs/docs/advanced-customization/internals.md":"# Internals\n\nMiscellaneous internals of react-jsonschema-form are listed here.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. We currently support JSON Schema-07 by default, but we also support other JSON schema versions through the [custom schema validation](../usage/validation.md#custom-meta-schema-validation) feature. Due to the limitation of form widgets, there are some exceptions as follows:\n\n- `additionalItems` keyword for arrays\n\n This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n\n- `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`)\n\n The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties \"outside\" of the `anyOf/oneOf`.\n\n You can also use `oneOf` with [schema dependencies](../json-schema/dependencies.md#schema-dependencies) to dynamically add schema properties based on input data.\n\n The `allOf` keyword is supported; it uses [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema.\n\n- `\"additionalProperties\":false` produces incorrect schemas when used with [schema dependencies](../json-schema/dependencies.md#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `\"additionalProperties\":false` when you use schema dependencies. See [#848](https://github.com/rjsf-team/react-jsonschema-form/issues/848) [#902](https://github.com/rjsf-team/react-jsonschema-form/issues/902) [#992](https://github.com/rjsf-team/react-jsonschema-form/issues/992)\n\n## Handling of schema defaults\n\nThis library automatically fills default values defined in the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](../json-schema/dependencies.md#schema-dependencies).\n\nSince there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.\n\nCheck out the defaults example on the [live playground](https://rjsf-team.github.io/react-jsonschema-form/) to see this in action.\n\n### Merging of defaults into the form data\n\nThere are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.\n\nThis are the rules which are used when injecting the defaults:\n\n- When there is a scalar in the form data, nothing is changed.\n- When the value is `undefined` in the form data, the default is created in the form data.\n- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.\n- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.\n\nA boolean property that is listed in its parent's `required` array and has no `default` of its own is populated with `false`. You can turn this off using the experimental [`requiredBooleanDefault`](../api-reference/form-props.md#requiredbooleandefault) flag, so that the property stays `undefined` until the user answers it.\n\n### Merging of defaults within the schema\n\nIn the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together, with the deeper (descendant) default taking precedence for any overlapping properties by default. You can change this behavior using the experimental [`nestedDefaultsPrecedence`](../api-reference/form-props.md#nesteddefaultsprecedence) flag. If the parent node defines properties which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.\n\nFor arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.\n\n## Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, copy, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons).\nIf you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n> NOTE this only applies to the `@rjsf/core` theme\n\n```css\ni.glyphicon {\n display: none;\n}\n.btn-add::after {\n content: 'Add';\n}\n.array-item-copy::after {\n content: 'Copy';\n}\n.array-item-move-up::after {\n content: 'Move Up';\n}\n.array-item-move-down::after {\n content: 'Move Down';\n}\n.array-item-remove::after {\n content: 'Remove';\n}\n```\n\n## Submit form programmatically\n\nYou can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.\nThis method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onSubmit = ({ formData }) => console.log('Data submitted: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.submit();\n```\n\n## Update field value in form programmatically\n\nYou can use the reference to get your `Form` component and call the `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void` method to change the value of a field.\nThis method will dispatch the `onChange` event of the form.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onChange = ({ formData }) => console.log('Data updated to: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: {\n type: 'object',\n required: ['input'],\n properties: {\n input: {\n type: 'string',\n },\n },\n },\n },\n required: ['foo'],\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.setFieldValue('foo.input', 'value');\nformRef.current.setFieldValue(['foo'], { input: 'newvalue' });\nformRef.current.setFieldValue('', { foo: { input: 'another value' } });\nformRef.current.setFieldValue([], { foo: { input: 'more values' } });\n```\n","packages/docs/docs/advanced-customization/typescript.md":"# Typescript Support\n\nRJSF fully supports Typescript.\nThe [types and functions](../api-reference/utility-functions.md) exported by `@rjsf/utils` are fully typed (as needed) using one or more of the following 3 optional generics:\n\n- `T = any`: This represents the type of the `formData` and defaults to `any`.\n- `S extends StrictRJSFSchema = RJSFSchema`: This represents the type of the `schema` and extends the `StrictRJSFSchema` type and defaults to the `RJSFSchema` type.\n- `F extends FormContextType = any`: This represents the type of the `formContext`, extends the `FormContextType` type and defaults to `any`.\n\nEvery other library in the `@rjsf/*` ecosystem use these same generics in their functions and React component definitions.\nFor instance, in the `@rjsf/core` library the definitions of the `Form` component and the `withTheme()` and `getDefaultRegistry()` functions are as follows:\n\n```ts\nexport default class Form<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n> extends Component, FormState> {\n // ... class implementation\n}\n\nexport default function withTheme(\n themeProps: ThemeProps\n) {\n // ... function implementation\n}\n\nexport default function getDefaultRegistry<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n>(): Omit, 'schemaUtils'> {\n // ... function implementation\n}\n```\n\nOut of the box, the defaults for these generics will work for all use-cases.\nProviding custom types for any of these generics may be useful for situations where the caller is working with typed `formData`, `schema` or `formContext` props, Typescript is complaining and type casting isn't allowed.\n\n## Overriding generics\n\n### T\n\nThe generic `T` is used to represent the type of the `formData` property passed into `Form`.\nIf you are working with a simple, unchanging JSON Schema and you have defined a type for the `formData` you are working with, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formData: FormData = {};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} formData={formData} />, document.getElementById('app'));\n```\n\n### S\n\nThe generic `S` is used to represent the type of the `schema` property passed into `Form`.\nIf you are using something like the [Ajv utility types for schemas](https://ajv.js.org/guide/typescript.html#utility-types-for-schemas) typing system, you can override this generic as follows:\n\n```tsx\nimport { JSONSchemaType } from 'ajv';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} />, document.getElementById('app'));\n\n// Alternatively since you have the type, you could also use this\n// const validator = customizeValidator();\n// render((\n// schema={schema} validator={validator} />\n//), document.getElementById(\"app\"));\n```\n\n> NOTE: using this `Ajv typing system` has not been tested extensively with RJSF, so use carefully\n\n### F\n\nThe generic `F` is used to represent the type of the `formContext` property passed into `Form`.\nIf you have a type for this data, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formContext: FormContext = {\n myCustomWidgetData: {\n enableCustomFeature: true,\n },\n};\n\nconst validator = customizeValidator();\n\nrender(\n schema={schema} validator={validator} formContext={formContext} />,\n document.getElementById('app')\n);\n```\n\n## Overriding generics in core\n\nAs shown in previous examples, overriding the default `Form` from `@rjsf/core` is pretty straight forward.\nUsing the `withTheme()` function is just as easy:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst theme: ThemeProps = {\n widgets: { test: () =>
test
},\n};\n\nconst ThemedForm = withTheme(theme);\n\nconst validator = customizeValidator();\n\nconst Demo = () => ;\n```\n\n## Overriding generics in other themes\n\nSince all the other themes in RJSF are extensions of `@rjsf/core`, overriding parts of these themes with custom generics is a little different.\nThe exported `Theme` and `Form` from any of the themes have been created using the generic defaults, and as a result, do not take generics themselves.\nIn order to override generics, special `generateForm()` and `generateTheme()` functions are exported for your use.\n\n### Overriding a Theme\n\nIf you are doing something like the following to create a new theme based on `@rjsf/mui` to extend one or more `templates`:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\nimport { Theme } from '@rjsf/mui';\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst Demo = () => ;\n```\n\nThen you would use the new `generateTheme()` and `generateForm()` functions as follows:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { generateTheme } from '@rjsf/mui';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst Theme: ThemeProps = generateTheme();\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst validator = customizeValidator();\n\n// You could also do since they are effectively the same:\n// const ThemedForm = generateForm(myTheme);\n\nconst Demo = () => ;\n```\n\n> NOTE: The same approach works for extending `widgets` and `fields` as well.\n","packages/docs/docs/api-reference/LayoutGridField.md":"# LayoutGridField\n\nThe `LayoutGridField` will render a schema, uiSchema and formData combination out into a `GridTemplate` in the shape\ndescribed in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in\nthe uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):\n\n```json\n{\n \"field1\" : {\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": { ... }\n }\n }\n}\n```\n\nSee the [LayoutGridField usage](../usage/layout-grid.md) for more detailed walk-through on how to use the component. This page is condensed\nversion of the `uiSchema` APIs for faster reference.\n\n## `ui:row`\n\nThe outermost level of a `LayoutGridField` is the `ui:row` that defines the nested rows, columns, and/or condition\nelements (i.e. \"grid elements\") in the grid. This definition is either a simple \"grid elements\" OR an object with\nnative `GridTemplate` implementation-specific props and a `children` array of \"grid elements\". E.g. (as JSON objects):\n\nSimple `ui:row` definition, without additional `GridTemplate` props:\n\n```json\n{\n \"ui:row\": [\n { \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ... },\n ...\n ]\n}\n```\n\nComplex `ui:row` definition, with additional `GridTemplate` (this example uses `@mui/material/Grid2` native props):\n\n```json\n{\n \"ui:row\": {\n \"spacing\": 2,\n \"size\": {\n \"md\": 4\n },\n \"alignContent\": \"flex-start\",\n \"className\": \"GridRow\",\n \"children\": [\n {\n \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ...\n },\n ...\n ]\n }\n }\n```\n\n> NOTE: Special note about the native `className` prop values. All className values will automatically be looked up in\n> the `formContext.lookupMap` in case they have been defined using a CSS-in-JS approach. In other words, from the\n> example above, if the `Form` was constructed with a `layoutGridLookupMap` set to `{ GridRow: cssInJs.GridRowClass }`\n> then when rendered, the native `GridTemplate` will get the `className` with the value from\n> `cssInJs.GridRowClass`. This automatic lookup will happen for any of the \"grid elements\" when rendering with\n> `GridTemplate` props. If multiple className values are present, for example:\n> `{ className: 'GridRow GridColumn' }`, the classNames are split apart, looked up individually, and joined\n> together to form one className with the values from `cssInJs.GridRowClass` and `cssInJs.GridColumnClass`. See the\n> [example](../usage/layout-grid.md#named-lookup-support-for-classname) in the usage documentation.\n\n## `ui:col`\n\nThe `ui:col` grid element is used to specify the list of columns within a grid row. A `ui:col` element can take on\nseveral forms:\n\n1. a simple list of dotted-path field names within the root field;\n2. a list of objects containing the dotted-path field `name` any other props that are gathered into `ui:options` for the field;\n3. a list with a one-off `render` functional component with or without a non-field `name` identifier and any other to-be-spread props; and\n4. an object with native `GridTemplate` implementation specific props and a `children` array with 1) or 2) or even a nested `ui:row` or a `ui:condition` containing a `ui:row` (although this should be used carefully). E.g. (as JSON objects):\n\nSimple `ui:col` definition, without additional `GridTemplate` props and form 1 only children:\n\n```json\n{\n \"ui:col\": [\"innerField\", \"inner.grandChild\", ...]\n}\n```\n\nComplicated `ui:col` definition, without additional `GridTemplate` props and form 2 only children:\n\n```json\n{\n \"ui:col\": [\n { \"name\": \"innerField\", \"fullWidth\": true },\n { \"name\": \"inner.grandChild\", \"fullWidth\": false },\n ...\n ]\n}\n```\n\nMore complicated `ui:col` definition, without additional `GridTemplate` props and form 2 children, one being a\none-off `render` functional component without a non-field `name` identifier\n\n```json\n{\n \"ui:col\": [\n \"innerField\",\n {\n \"render\": \"WizardNavButton\",\n \"isNext\": true,\n \"size\": \"large\"\n }\n ]\n}\n```\n\nMost complicated `ui:col` definition, additional `GridTemplate` props and form 1, 2 and 3 children (this example\nuses @mui/material/Grid2 native props):\n\n```json\n{\n \"ui:col\": {\n \"size\": { \"md\": 4 },\n \"className\": \"GridColumn\",\n \"children\": [\n \"innerField\",\n { \"name\": \"inner.grandChild\", \"fullWidth\": true },\n { \"name\": \"customRender\", \"render\": \"CustomRender\", \"toSpread\": \"prop-value\" },\n { \"ui:row|ui:condition\": ... },\n ...\n ]\n }\n}\n```\n\n> NOTE: If a `name` prop does not exist or its value does not match any field in a schema, then it is assumed to be a\n> custom `render` component. If the `render` prop does not exist, a null render will occur. If `render` is a\n> string, its value will be looked up in the `formContext.lookupMap` first before defaulting to a null render. If the\n> resulting looked up `render` is not a function (React components are functions), then it will be a null render.\n\n## `ui:columns`\n\nThe `ui:columns` grid element is syntactic sugar to specify a set of `ui:col` columns that all share the same set of\nnative `GridTemplate` props. In other words rather than writing the following configuration that renders a\n`` element with 3 `` nodes and 2\n`` nodes within it (one for each of the fields contained in the `children`\nlist):\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"inner.grandChild\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [{ \"name\": \"inner.grandChild2\" }]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\nOne can write this instead:\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:columns\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\", \"inner.grandChild\", { \"name\": \"inner.grandChild2\", \"fullWidth\": true }]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\", \"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\n> NOTE: This syntax differs from `\"ui:col\": { \"className\": \"col-md-6\", \"children\": [\"innerField2\", \"inner.grandChild3\"] }` in that\n> the `ui:col` will render the two children fields inside a single ``\n> element.\n\n## `ui:condition`\n\nThe final grid element, `ui:condition`, allows for conditionally displaying \"grid elements\" within a row based on the\ncurrent value of a field as it relates to a (list of) hard-coded value(s). There are four elements that make up a\n`ui:condition`:\n\n1. the dotted-path `field` name within the root field that makes up the left-side of the condition;\n2. the hard-coded `value` (single or list) that makes up the right-side of the condition;\n3. the `operator` that controls how the left and right sides of the condition are compared; and\n4. the `children` array that defines the \"grid elements\" to display if the condition passes.\n\nA `ui:condition` uses one of three `operators` when deciding if a condition passes:\n\n1. The `all` operator will pass when the right-side and left-side contains all the same value(s);\n2. the `some` operator will pass when the right-side and left-side contain as least one value in common;\n3. the `none` operator will pass when the right-side and left-side do not contain any values in common. E.g. (as JSON objects):\n\nHere is how to render an if-then-else for `field2` which is an enum that has 3 known values and supports allowing\nany other value:\n\n```json\n{\n \"ui:row\": [\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"all\",\n \"value\": \"value1\",\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"some\",\n \"value\": [\"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"none\",\n \"value\": [\"value1\", \"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ]\n }\n }\n ]\n}\n```\n","packages/docs/docs/api-reference/dynamic-ui-schema-examples.md":"# Dynamic uiSchema Examples\n\n## Backward Compatibility Examples\n\n### Example 1: Traditional Static uiSchema (No Changes Required)\n\n```typescript\nimport { UiSchema } from '@rjsf/utils';\n\n// This continues to work exactly as before\nconst uiSchema: UiSchema = {\n guests: {\n items: {\n name: { 'ui:placeholder': 'Enter guest name' },\n age: { 'ui:widget': 'updown' },\n relationship: { 'ui:widget': 'select' },\n },\n },\n};\n```\n\n### Example 2: Dynamic uiSchema with Function\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface GuestData {\n name?: string;\n age?: number;\n relationship?: 'child' | 'adult' | 'senior';\n guardianName?: string;\n mealPreference?: string;\n}\n\n// New functionality - dynamic UI based on item data\nconst uiSchema: UiSchema = {\n guests: {\n items: (itemData: GuestData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Note: For newly added items, `itemData` will be undefined or contain default values.\n // Using optional chaining (`?.`) is recommended to handle this case gracefully.\n\n // Base UI schema for all items\n const baseUiSchema: UiSchema = {\n name: { 'ui:placeholder': `Guest ${index + 1} name` },\n relationship: { 'ui:widget': 'select' },\n };\n\n // Conditionally modify UI based on data\n if (itemData?.relationship === 'child') {\n return {\n ...baseUiSchema,\n age: {\n 'ui:widget': 'updown',\n 'ui:help': 'Age is required for children',\n 'ui:options': { min: 0, max: 17 },\n },\n guardianName: {\n 'ui:placeholder': 'Parent/Guardian name',\n },\n mealPreference: { 'ui:widget': 'hidden' },\n };\n }\n\n if (itemData?.relationship === 'adult') {\n return {\n ...baseUiSchema,\n age: { 'ui:widget': 'hidden' },\n guardianName: { 'ui:widget': 'hidden' },\n mealPreference: {\n 'ui:widget': 'select',\n 'ui:placeholder': 'Select meal preference',\n },\n };\n }\n\n // Default for new items or unknown relationships\n return baseUiSchema;\n },\n },\n};\n```\n\n### Example 3: Using Form Context\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ParticipantData {\n name?: string;\n email?: string;\n workshop?: string;\n}\n\ninterface MyFormContext extends FormContextType {\n eventType?: 'conference' | 'workshop' | 'webinar';\n}\n\nconst uiSchema: UiSchema = {\n participants: {\n items: (itemData: ParticipantData | undefined, index: number, formContext?: MyFormContext): UiSchema => {\n // Access form-wide settings\n const isConference = formContext?.eventType === 'conference';\n\n return {\n name: { 'ui:placeholder': 'Participant name' },\n email: { 'ui:widget': 'email' },\n // Show workshop selection only for conference events\n workshop: isConference ? { 'ui:widget': 'select' } : { 'ui:widget': 'hidden' },\n };\n },\n },\n};\n```\n\n### Example 4: Falsy Return Values\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ItemData {\n needsCustomUI?: boolean;\n field1?: string;\n field2?: string;\n}\n\nconst uiSchema: UiSchema = {\n items: {\n items: (itemData: ItemData | undefined, index: number): UiSchema | null | undefined => {\n // Only apply custom UI to specific items\n if (itemData?.needsCustomUI) {\n return {\n field1: { 'ui:widget': 'textarea' },\n field2: { 'ui:help': 'This item needs special attention' },\n };\n }\n\n // Return null or undefined to use default UI rendering\n // This is useful for conditionally applying custom UI\n return null;\n },\n },\n};\n```\n\n### Example 5: Dynamic UI for Fixed Arrays\n\nFor fixed/tuple arrays (where schema.items is an array), the dynamic function can be applied to each position:\n\n```typescript\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\ninterface DetailsData {\n age?: number;\n role?: string;\n}\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: [\n { type: 'string', title: 'First Name' },\n { type: 'string', title: 'Last Name' },\n { type: 'object', title: 'Details', properties: { age: { type: 'number' }, role: { type: 'string' } } },\n ],\n};\n\nconst uiSchema: UiSchema = {\n items: [\n { 'ui:placeholder': 'Enter first name' }, // Static UI for first item\n { 'ui:placeholder': 'Enter last name' }, // Static UI for second item\n // Dynamic UI for third item based on its data\n (itemData: DetailsData | undefined, index: number): UiSchema => {\n if (itemData?.role === 'admin') {\n return {\n age: { 'ui:widget': 'hidden' },\n role: { 'ui:help': 'Admin role selected' },\n };\n }\n return {\n age: { 'ui:widget': 'updown' },\n role: { 'ui:widget': 'select' },\n };\n },\n ],\n};\n```\n\n## Schema Example\n\n```typescript\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n guests: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: { type: 'string', title: 'Name' },\n age: { type: 'number', title: 'Age' },\n relationship: {\n type: 'string',\n title: 'Relationship',\n enum: ['adult', 'child', 'senior'],\n },\n guardianName: { type: 'string', title: 'Guardian Name' },\n mealPreference: {\n type: 'string',\n title: 'Meal Preference',\n enum: ['vegetarian', 'vegan', 'standard', 'gluten-free'],\n },\n },\n required: ['name', 'relationship'],\n },\n },\n },\n};\n```\n\n## Key Benefits\n\n1. **Backward Compatible**: Existing forms with object-based `uiSchema.items` continue to work without any changes\n2. **Progressive Enhancement**: Developers can opt-in to dynamic behavior when needed\n3. **Flexible**: Access to item data, index, and form context enables complex UI logic\n4. **Safe**: Built-in error handling prevents the entire form from crashing if your function throws an error. When an error occurs for a specific item, it will be caught and logged to the developer console, and the UI for that item will fall back to the default rendering. This ensures the rest of the form remains functional while making debugging easier.\n5. **On-Demand Execution**: The function is executed on-demand during the render cycle. However, as it runs for each array item, performance should be carefully managed for large lists (see Performance Considerations below).\n\n## Key Behaviors\n\n- **Falsy Returns**: If your function returns a falsy value (e.g., `null` or `undefined`), the UI for that specific item will fall back to its default rendering. This allows you to conditionally apply custom UI only when needed.\n- **Error Handling**: If your function throws an error, it will be caught and logged to the console. The form will continue to work, using default UI for the affected item.\n- **New Items**: When a new item is added to the array, `itemData` will be `undefined` or contain default values from the schema. Always use optional chaining (`?.`) to safely access properties.\n\n## Performance Considerations\n\nWhen using dynamic `uiSchema.items` functions, keep in mind:\n\n- The function is executed **on every render** for **each array item**\n- For large arrays, this can impact performance if the function performs expensive operations\n- Best practices:\n - Keep the function logic lightweight and fast\n - Avoid heavy computations or external API calls within the function\n - Consider memoizing results if the same inputs produce the same outputs\n - For complex logic, pre-compute values and store them in formContext or component state\n\nExample of a performance-optimized approach:\n\n```typescript\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema, FormContextType, IChangeEvent } from '@rjsf/utils';\n\ninterface ItemData {\n type?: string;\n field?: any;\n}\n\ninterface ExpensiveDataConfig {\n widget: string;\n}\n\ninterface MyFormProps {\n schema: RJSFSchema;\n formData?: any;\n}\n\n// In your React component that renders the form:\nfunction MyFormComponent({ schema, formData }: PropsWithChildren) {\n // Pre-compute expensive data once, and only re-compute if dependencies change\n const expensiveData = useMemo>(() => computeExpensiveData(), [/* dependencies */]);\n\n const defaultConfig: ExpensiveDataConfig = { widget: 'text' };\n\n // Define the uiSchema inside the component so it can access the memoized data\n const uiSchema: UiSchema = {\n myArrayField: { // Target your specific array field\n items: (itemData: ItemData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Use the pre-computed data - this is very fast\n const config = expensiveData[itemData?.type || ''] || defaultConfig;\n\n return {\n field: { 'ui:widget': config.widget }\n };\n }\n }\n };\n\n return ;\n}\n\n// Placeholder for the expensive computation function\ndeclare function computeExpensiveData(): Record;\n```\n","packages/docs/docs/api-reference/form-props.md":"---\ntitle: Props\n---\n\n# <Form /> props\n\n## acceptCharset\n\nThe value of this prop will be passed to the `accept-charset` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-accept-charset).\n\n## action\n\nThe value of this prop will be passed to the `action` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action).\n\nNote that this just renders the `action` attribute in the HTML markup. There is no real network request being sent to this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()` and then calls the [`onSubmit`](#onSubmit) function, where you could send a request programmatically with `fetch` or similar.\n\n## autoComplete\n\nThe value of this prop will be passed to the `autocomplete` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete).\n\n## className\n\nThe value of this prop will be passed to the `class` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## children\n\nYou can provide custom buttons to your form via the `Form` component's `children`. If no children are provided, by default a `Submit` button will be rendered.\n\nFor other ways to modify the default `Submit` button, see both the [Submit Button Options](./uiSchema.md#submitbuttonoptions) and the [SubmitButton Template](../advanced-customization/custom-templates.md#submitbutton) documentation.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(\n \n
\n \n \n
\n ,\n document.getElementById('app'),\n);\n```\n\n> **Warning:** There needs to be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n## customValidate\n\nFormerly the `validate` prop.\nThe `customValidate` prop requires a function that specifies custom validation rules for the form.\nSee [Validation](../usage/validation.md) for more information.\n\n## experimental_componentUpdateStrategy\n\nExperimental feature to specify an alternative component update strategy that accepts one of the following value:\nReact's default `Component` rendering strategy is to re-render on every state change, see `shouldComponentUpdate` docs.\n`PureComponent`'s strategy uses shallow equality. One can also always update (not recommended for performance reasons, but can be useful for testing)\n\n| Option | Description |\n| ---------- | ------------------------------------------------- |\n| customDeep | Legacy behavior - uses RJSF's deepEquals function |\n| shallow | shallow equality |\n| always | component always rerenders |\n\n## experimental_defaultFormStateBehavior\n\nExperimental features to specify different form state behavior.\nCurrently, this only affects the handling of optional array fields where `minItems` is set and handling of setting defaults based on the value of `emptyObjectFields`.\n\n> **Warning:** This API is experimental and unstable, therefore breaking changes may be shipped in minor or patch releases. If you want to use this feature, we recommend pinning exact versions of `@rjsf/\\*` packages in your package.json file or be ready to update your use of it when necessary.\n\nThe following subsections represent the different keys in this object, with the tables explaining the values and their meanings.\n\n### arrayMinItems\n\nThis optional subsection is an object with two optional fields, `populate` and `mergeExtraDefaults`.\nWhen not specified, it defaults to `{ populate: 'all', mergeExtraDefaults: false }`.\n\n#### arrayMinItems.populate\n\nOptional enumerated flag controlling how array minItems are populated, defaulting to `all`:\n\n| Flag Value | Description |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `all` | Legacy behavior - populate minItems entries with default values initially and include empty array when no values have been defined. |\n| `requiredOnly` | Ignore `minItems` on a field when calculating defaults unless the field is required. |\n| `never` | Ignore `minItems` on a field when calculating defaults for required and non-required. Value will set only if defined `default` and from `formData` |\n\n#### arrayMinItems.computeSkipPopulate\n\nThe signature and documentation for this property is as follow:\n\n##### computeSkipPopulate <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nA function that determines whether to skip populating the array with default values based on the provided validator, schema, and root schema.\nIf the function returns `true`, the array will not be populated with default values.\nIf the function returns `false`, the array will be populated with default values according to the `populate` option.\n\n###### Parameters\n\n- validator: ValidatorType<T, S, F> - An implementation of the `ValidatorType` interface that is used to detect valid schema conditions\n- schema: S - The schema for which resolving a condition is desired\n- [rootSchema]: S - The root schema that will be forwarded to all the APIs\n\n###### Returns\n\n- boolean: A boolean indicating whether to skip populating the array with default values.\n\n##### Example\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n stringArray: {\n type: 'array',\n items: { type: 'string' },\n minItems: 1,\n },\n numberArray: {\n type: 'array',\n items: { type: 'number' },\n minItems: 1,\n },\n },\n required: ['stringArray', 'numberArray'],\n};\n\nconst computeSkipPopulateNumberArrays = (validator, schema, rootSchema) =>\n // These conditions are needed to narrow down the type of the schema.items\n !Array.isArray(schema?.items) &&\n typeof schema?.items !== 'boolean' &&\n schema?.items?.type === 'number',\n\nrender(\n ,\n document.getElementById('app')\n);\n```\n\n#### arrayMinItems.mergeExtraDefaults\n\nOptional boolean flag, defaulting to `false` when not specified.\nWhen `formData` is provided and does not contain `minItems` worth of data, this flag controls whether the extra data provided by the defaults is appended onto the existing `formData` items to ensure the `minItems` condition is met.\nWhen `false` (legacy behavior), only the `formData` provided is merged into the default form state, even if there are fewer than the `minItems`.\nWhen `true`, the defaults are appended onto the end of the `formData` until the `minItems` condition is met.\n\n### emptyObjectFields\n\nOptional enumerated flag controlling how empty object fields are populated, defaulting to `populateAllDefaults`:\n\n| Flag Value | Description |\n| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `populateAllDefaults` | Legacy behavior - set default when there is a primitive value, an non-empty object field, or the field itself is required |\n| `populateRequiredDefaults` | Only sets default when a value is an object and its parent field is required, or it is a primitive value and it is required |\n| `skipDefaults` | Does not set defaults |\n| `skipEmptyDefaults` | Does not set an empty default. It will still apply the default value if a default property is defined in your schema |\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: { type: 'string' },\n minItems: 3,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### allOf\n\nOptional enumerated flag controlling how empty defaults are populated when `allOf` schemas are provided, defaulting to `skipDefaults`:\n\n| Flag Value | Description |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------- |\n| `skipDefaults` | Skip parsing defaults from `allOf` schemas nested inside the schema defaults are computed from, with the exceptions below |\n| `populateDefaults` | Generate default values for properties in the `allOf` schema including `if-then-else` syntax |\n\n`skipDefaults` only skips the `allOf` schemas nested inside the schema that defaults are computed from, not that schema's own `allOf`.\nWhich schema that is depends on what the form is doing:\n\n- When the form computes defaults from the root schema, a root-level `allOf` provides its defaults with either value.\n- Some actions compute defaults from a subschema as if it were the root, such as adding an array item or optional data, or switching a `oneOf` or `anyOf` option, so that subschema's own `allOf` provides its defaults with either value. When switching options, though, the `if` of an `if-then-else` in the new option's `allOf` is checked against the data of the option being left, so under `skipDefaults` its `then` default is filled in only when that data matches the `if`.\n- The option picked on the initial render is not computed as if it were the root, even when its `oneOf` or `anyOf` is in the root schema, so under `skipDefaults` its `allOf` is left out until the user switches away from that option and back.\n\nThe branch of an `if-then-else` is picked from the form data, not from the computed defaults, except in a `dependencies` entry, as the last item below says:\n\n- When the `if` lists a property in `required` and only a default provides that property, the `then` default is left out until the form data holds the value, for instance on the initial render.\n- Without `required`, a missing property still satisfies the `if`'s `properties`, so such an `if` passes with no data, and its `then` default is filled in even when the `if` does not match the defaulted value.\n- With one `allOf` entry per `enum` value and no form data, the default `allOf` merger merges the `then` defaults of all the entries, and the first entry that defaults a property wins. An `experimental_customMergeAllOf` that throws on the conflicting `default`s drops the whole `allOf` instead.\n\nAn `allOf` in an object property or in an array's `items` is skipped as a whole, plain property defaults included, so it usually needs `populateDefaults` to provide its defaults.\nThis is specific to `allOf`:\n\n- An `if-then-else` placed directly in a nested object schema is resolved with either value, unless `emptyObjectFields` is `skipEmptyDefaults`. For example, under `skipDefaults`, `items: { type: 'object', if, then }` fills in the `then` default, while `items: { type: 'object', allOf: [{ if, then }] }` does not.\n- Adding a direct `if` to that `items` schema resolves its whole `allOf` too, unless `emptyObjectFields` is `skipEmptyDefaults`.\n- With an `experimental_customMergeAllOf` built on a deep merger, such as `createDeepAllOfMerge` from `@x0k/json-schema-merge` given a shallow merge built with that library's `createMerger` and `createShallowAllOfMerge`, merging an `allOf` also turns a property's `allOf: [{ if, then }]` into a direct `if-then-else`, so that property's `then` default is filled in under `skipDefaults`, unless `emptyObjectFields` is `skipEmptyDefaults`. That happens wherever an `allOf` is merged: the root's own `allOf`, or the `allOf` of an object or `items` schema that also has a direct `if`, but not a nested `allOf` on its own.\n- A `dependencies` entry in a nested object schema is resolved once its property has a value, its `allOf` and `if-then-else` included, even when `emptyObjectFields` is `skipEmptyDefaults`. A default counts as that value, and the entry's `if` is checked against it, so an `if` that lists the property in `required` passes with no form data, while one that does not match the default fails. For example, under `skipDefaults`, `items: { type: 'object', properties: { animal: { default: 'Cat' } }, dependencies: { animal: { allOf: [{ if, then }] } } }` fills in the `then` default. A root `dependencies` entry counts a default only while the form data is empty: once the form data holds any value, the entry is applied only when the form data holds its property.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Example',\n type: 'object',\n properties: {\n animalInfo: {\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n allOf: [\n {\n if: {\n properties: {\n animal: {\n const: 'Cat',\n },\n },\n },\n then: {\n properties: {\n food: {\n type: 'string',\n default: 'meat',\n enum: ['meat', 'grass', 'fish'],\n },\n },\n required: ['food'],\n },\n },\n ],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### constAsDefaults\n\nOptional enumerated flag controlling how const values are merged into the form data as defaults when dealing with undefined values, defaulting to `always`.\nThe defaulting behavior for this flag will always be controlled by the `emptyObjectField` flag value.\nFor instance, if `populateRequiredDefaults` is set and the const value is not required, it will not be set.\n\n| Flag Value | Description |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `always` | A const value will always be merged into the form as a default. If there is are const values in a `oneOf` (for instance to create an enumeration with title different from the values), the first const value will be defaulted |\n| `skipOneOf` | If const is in a `oneOf` it will NOT pick the first value as a default |\n| `never` | A const value will never be used as a default |\n\n### mergeDefaultsIntoFormData\n\nOptional enumerated flag controlling how the defaults are merged into the form data when dealing with undefined values, defaulting to `useFormDataIfPresent`.\n\nNOTE: If there is a default for a field and the `formData` is unspecified, the default ALWAYS merges.\n\n| Flag Value | Description |\n| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| `useFormDataIfPresent` | Legacy behavior - Do not merge defaults if there is a value for a field in `formData` even if that value is explicitly set to `undefined` |\n| `useDefaultIfFormDataUndefined` | If the value of a field within the `formData` is `undefined`, then use the default value instead |\n\n### nestedDefaultsPrecedence\n\nOptional enumerated flag controlling how defaults defined on multiple levels are merged together for overlapping properties, defaulting to `descendantWins`.\n\n| Flag Value | Description |\n| -----------------| --------------------------------------------------------------------------------------------------|\n| `descendantWins` | The innermost (descendant) default value definition takes precedence over its ancestor's defaults |\n| `ancestorWins` | The outermost (ancestor) default value definition takes precedence over any descendant's defaults |\n\n#### Example\n\nIn the following example, the `animal` property is a descendant of the root schema and both define a default value for `animal`. By default, the `animal`'s default value `Cat` would take precedence over its ancestor's `Fish`. However, since `nestedDefaultsPrecedence` is set to `ancestorWins`, the root schema's default value takes precedence and `animal` is set to `Fish` by default.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n default: {\n animal: 'Fish',\n },\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### requiredBooleanDefault\n\nOptional enumerated flag controlling whether a boolean listed in its parent's `required` array, with no `default` of its own, is populated with `false`, defaulting to `populateFalse`.\nAn explicit schema `default`, a parent default and an existing `formData` value always take precedence; this flag only decides what happens when none of them provides a value.\n\n| Flag Value | Description |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| `populateFalse` | A required boolean with no `default` is set to `false` |\n| `skip` | No value is synthesized; the property stays `undefined` until the user answers it, so `required` remains a validation concern |\n\n#### Example\n\nIn the following example, `agree` is required but has no `default`. By default it would start as `false`, and the form would report `{ agree: false }` through `onChange` on mount. With `requiredBooleanDefault` set to `skip`, `formData` stays `{}` until the user answers, and validation reports `agree` as missing until then. This is the behavior to choose when a boolean question is rendered with an explicit \"unanswered\" state, for example a `- - -` / Yes / No select, rather than a checkbox.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n agree: {\n type: 'boolean',\n title: 'Do you agree?',\n },\n },\n required: ['agree'],\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## experimental_customMergeAllOf\n\nThe `experimental_customMergeAllOf` function allows you to provide a custom implementation for merging `allOf` schemas. This can be particularly useful in case the where the default merge library ([@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/)) doesn't satisfy your functional or performance requirements.\n\nBy providing your own implementation, you can potentially achieve significant performance improvements. For instance, if your use case only requires a subset of JSON Schema features, you can implement a faster, more tailored merging strategy.\n\nIf you're looking for alternative `allOf` merging implementations, you might consider [allof-merge](https://github.com/udamir/allof-merge).\n\n**Warning:** This is an experimental feature. Only use this if you fully understand the implications of custom `allOf` merging and are prepared to handle potential edge cases. Incorrect implementations may lead to unexpected behavior or validation errors.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst customMergeAllOf = (schema: RJSFSchema): RJSFSchema => {\n // Your custom implementation here\n};\n\nrender(\n
,\n document.getElementById('app'),\n);\n```\n\n## disabled\n\nIt's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`.\n\n## readonly\n\nIt's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to make some fields read-only, see the `ui:readonly` parameter in `uiSchema`.\n\n## enctype\n\nThe value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).\n\n## extraErrors\n\nThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation.\nBy default, these are non-blocking errors, meaning that you can still submit the form when these are the only errors displayed to the user.\nSee [Validation](../usage/validation.md) for more information.\n\n## extraErrorsBlockSubmit\n\nIf set to true, causes the `extraErrors` to become blocking when the form is submitted.\n\n## fields\n\nDictionary of registered fields in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n## focusOnFirstError\n\nIf set to true, then the first field with an error will receive the focus when the form is submitted with errors.\n\nYou can also provide a custom callback function to handle what happens when this function is called.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, RJSFValidationError } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst focusOnError = (error: RJSFValidationError) => {\n console.log('I need to handle focusing this error');\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.\n\nSee [AntD Customization](themes/antd/uiSchema.md#formcontext) for formContext customizations for the `antd` theme.\nSee [Semantic UI Customization](themes/semantic-ui/uiSchema.md#formcontext) for formContext customizations for the `semantic-ui` theme.\n\n## formData\n\nThe data for the form, used to load a \"controlled\" form with its current data. If you want an \"uncontrolled\" form with initial data, then use `initialFormData` instead.\n\n## id\n\nThe value of this prop will be passed to the `id` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## idPrefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of ``\n\n## idSeparator\n\nTo avoid using a path separator that is present in field names, it is possible to change the separator used for ids (the default is `_`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n first: {\n type: 'string',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of `` when rendering `first`.\n\n## initialFormData\n\nThe initial data for the form, used to fill an \"uncontrolled\" form with existing data on the initial render and when `reset()` is called programmatically.\n\n## nameGenerator\n\nThe `nameGenerator` prop allows you to customize how HTML `name` attributes are generated for form fields. This is essential when submitting form data to backend frameworks that expect specific naming conventions for structured data.\n\n**Default behavior:** When no `nameGenerator` is provided, the `name` attribute will equal the `id` attribute (e.g., `root_tasks_0_title`).\n\nRJSF provides two built-in generators:\n\n**`bracketNameGenerator`** - Generates bracket notation for PHP/Rails (e.g., `root[tasks][0][title]`). Automatically appends `[]` for multi-value fields like checkboxes.\n\n**`dotNotationNameGenerator`** - Generates dot notation for other frameworks (e.g., `root.tasks.0.title`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { bracketNameGenerator, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n firstName: { type: 'string' },\n tasks: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n title: { type: 'string' },\n },\n },\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also create a custom generator by implementing the `NameGeneratorFunction` type, which receives `path` (array of path segments), `idPrefix` (typically `'root'`), and optional `isMultiValue` (boolean for multi-value fields).\n\n## liveOmit\n\nFlag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to\nto `true` and the form's data is updated by the user.\n\nIf no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for\nthe flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live omit will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## liveValidate\n\nFlag that describes when live validation will be performed. Live validation means that the form will perform\nvalidation and show any validation errors whenever the form data is updated, rather than just on submit.\n\nIf no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for\nthe flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live validation will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## method\n\nThe value of this prop will be passed to the `method` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method).\n\n## name\n\nThe value of this prop will be passed to the `name` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name).\n\n## noHtml5Validate\n\nIf set to true, turns off HTML5 validation on the form. Set to `false` by default.\n\n## noValidate\n\nIf set to true, turns off all validation. Set to `false` by default.\n\n> NOTE: In a future major release, this flag may be deleted replaced by making `validator` prop optional\n\n## omitExtraData\n\nIf set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.\n\n## onBlur\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n## onChange\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same first argument as `onSubmit` any time a value is updated in the form.\nIt will also receive, as the second argument, the `id` of the field which experienced the change.\nGenerally, this will be the `id` of the field for which input data is modified.\nIn the case of adding/removing of new fields in arrays or objects with `additionalProperties` or `patternProperties` and the rearranging of items in arrays, the `id` will be that of the array or object itself, rather than the item/field being added, removed or moved.\n\n## onError\n\nTo react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onError = (errors) => console.log('I have', errors.length, 'errors to fix');\n\nrender(, document.getElementById('app'));\n```\n\n## onFocus\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## onSubmit\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid.\nIt will be passed a result object having a `formData` attribute, which is the valid form data you're usually after.\nThe original event will also be passed as a second parameter:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onSubmit = ({ formData }, e) => console.log('Data submitted: ', formData);\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, you may need to set the `omitExtraData` and/or `liveOmit` props.\n\n## removeEmptyOptionalObjects\n\n> **Deprecated**: This prop no longer has any effect and will be removed in a future release. The behavior of pruning optional empty objects is now built into [`omitExtraData`](#omitextradata) — enable that prop instead.\n\nWhen a JSON Schema has a required field inside an optional object, any user interaction with that optional object \"activates\" it. Even if the user clears all the fields within that object, the empty object property (e.g., `{ test: {} }` or `{ test: { field1: \"\" } }`) remains in the `formData`. Because the object contains required fields that are now empty, the form becomes unsubmittable.\n\nPreviously, setting `removeEmptyOptionalObjects` to `true` caused the form to recursively prune these optional empty objects from the `formData` during `onChange`, `onBlur`, and `onSubmit`. This pruning is now performed automatically by `omitExtraData`.\n\n## schema\n\n**Required**! Form schema. We support JSON schema draft-07 by default. See [Schema Reference](https://json-schema.org/draft-07/json-schema-release-notes.html) for more information.\n\n## showErrorList\n\nWhen this prop is set to `top` or `bottom`, a list of errors (or the custom error list defined in the `ErrorList`) will also show at the `bottom` or `top` of the form. When set to false, only inline input validation errors will be shown. Set to `top` by default. See [Validation](../usage/validation.md) for more information.\n\n## tagName\n\nIt's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.\n\n```tsx\n\n```\n\nYou can also provide a class/function component.\n\n```tsx\nconst CustomForm = props => \n// ...\n\n```\n\n## target\n\nThe value of this prop will be passed to the `target` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-target).\n\n## templates\n\nDictionary of registered templates in the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## transformErrors\n\nA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation. See [Validation](../usage/validation.md) for more information.\n\n## translateString\n\nOptional string translation function, if provided, allows users to change the translation of the RJSF internal strings.\nSome strings contain replaceable parameter values as indicated by `%1`, `%2`, etc.\nThe number after the `%` indicates the order of the parameter.\nThe ordering of parameters is important because some languages may choose to put the second parameter before the first in its translation. In addition to replaceable parameters, some of the strings support the use of markdown and simple html.\n\nOne can use the [documentation](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts) of the `TranslatableString` enums to determine which enum values contain replaceable parameters and which support markdown and simple html.\n\nOne could use this function to alter one or more of the existing english strings to better suit one's application or fully translate all strings into a different language.\nBelow is an example of changing a few of the english strings to something else:\n\n```ts\nimport { TranslatableString, englishStringTranslator, replaceStringParameters } from '@rjsf/utils';\n\nfunction fixupSomeEnglishStrings(stringToTranslate: TranslatableString, params?: string[]): string {\n switch (stringToTranslate) {\n case TranslatableString.NewStringDefault:\n return ''; // Use an empty string for the new additionalProperties string default value\n case TranslatableString.KeyLabel:\n return replaceStringParameters('%1 Key Name', params); // Add \"Name\" onto the end of the WrapIfAdditionalTemplate key label\n default:\n return englishStringTranslator(stringToTranslate, params); // Fallback to the default english\n }\n}\n```\n\n## uiSchema\n\nForm uiSchema. See [uiSchema Reference](uiSchema.md) for more information.\n\n## useFallbackUiForUnsupportedType\n\nIf set to true, when an unsupported schema type is encountered, the form will render a fallback UI instead of displaying an error. The fallback UI will display a widget that allows the user to select a JSON Schema primitive type, and a field containing the form data that matches the selected type. Set to false by default.\n\n## validator\n\n**Required**! An implementation of the `ValidatorType` interface that is needed for form validation to work.\n`@rjsf/validator-ajv8` exports the implementation of this interface from RJSF version 4.\n\n## widgets\n\nDictionary of registered widgets in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n","packages/docs/docs/api-reference/themes/antd/uiSchema.md":"# AntD Customization\n\n## formContext\n\nYou can customize the look of the form by passing options to Ant-Design theme fields.\n\nThe formContext antd object accepts `descriptionLocation`, `readonlyAsDisabled` properties.\n\n`descriptionLocation` can be `'below' | 'tooltip'`, the default is `'below'` which places the description below the form item.\nYou can set it to `tooltip` that put the description inside the tooltip.\nNote that you should have antd 4.7+ to use `'tooltip'`.\n\nSetting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as disabled.\n\n```tsx\n\n```\n\nThese are the `formContext` properties that you can modify to adjust the `antd` presentation:\n\n- `descriptionLocation`: Where to display the description, either 'below' or 'tooltip', defaults to 'below'\n- `readonlyAsDisabled`: Whether to make the antd theme treat readOnly fields as disabled, defaults to true\n\n## Using Antd v5 theme\n\nYou can use AntD v5 styling by wrapping your application with `StyleProvider` from `@ant-design/cssinjs`.\n\nBy default, `@rjsf/antd` components are using the v4 styling.\n\n```tsx\nimport { StyleProvider } from '@ant-design/cssinjs';\n\nconst Component = () => {\n return (\n \n \n \n );\n};\n```\n","packages/docs/docs/api-reference/themes/chakra-ui/uiSchema.md":"# Chakra-UI Customization\n\nWhen using `@rjsf/chakra-ui` there are a couple of ways to customize the feel of the form.\n\n## Styling\n\nYou can use `ChakraProvider`, where you can customize the field components at a theme level.\nAnd, `uiSchema` allows for the use of a `\"chakra\"` `\"ui:option\"` to customize the styling of the form widgets.\n\n```json\n{\n \"yourField\": {\n \"ui:options\": {\n \"chakra\": {\n \"p\": \"1rem\",\n \"color\": \"blue.200\",\n \"sx\": {\n \"margin\": \"0 auto\"\n }\n }\n }\n }\n}\n```\n\nIt accepts the theme accessible [style props](https://chakra-ui.com/docs/features/style-props) provided by [Chakra](https://chakra-ui.com/docs/getting-started) and [Emotion](https://emotion.sh/docs/introduction).\n\n### Limitations\n\n- The `chakra` option is only available for the Chakra-UI theme.\n- The props are given to the parent component in the individual widget. To pass styles to the inner components, use the [`sx` prop](https://chakra-ui.com/docs/features/the-sx-prop).\n","packages/docs/docs/api-reference/themes/mui/uiSchema.md":"# MUI Customization\n\nYou can customize the underlying Material UI (MUI) components used by `@rjsf/mui` by passing props directly through the `uiSchema`. This is extremely useful for applying simple customizations (like adding an `endAdornment` to an input field, tweaking margins, or changing variants) without having to build a completely custom Widget or Template.\n\n## Basic Usage\n\nThe `@rjsf/mui` package looks for a `mui` key inside the `ui:options` of your `uiSchema`. Any top-level properties defined here will be applied to the primary MUI wrapper component for that field (e.g. `TextField` for inputs, `FormGroup` for checkboxes, `Paper`/`Grid` for object/array wrappers).\n\n```json\n{\n \"myField\": {\n \"ui:options\": {\n \"mui\": {\n \"variant\": \"filled\",\n \"fullWidth\": false,\n \"sx\": {\n \"backgroundColor\": \"background.paper\",\n \"padding\": 2\n }\n }\n }\n }\n}\n```\n\n## `slotProps` vs `rjsfSlotProps`\n\n`@rjsf/mui` distinguishes between two kinds of slot customization:\n\n- **`slotProps`**: Passed directly to MUI's native `slotProps` API on a component (e.g., `TextField`'s `htmlInput`, `input`, `inputLabel` targets). These are standard MUI customization points.\n- **`rjsfSlotProps`**: Used by RJSF template components (e.g., `ArrayFieldTemplate`, `ObjectFieldTemplate`) to target their specific sub-components (e.g., `paper`, `grid`, `box`). This key is explicitly extracted before spreading, which **prevents prop bleeding** — ensuring configuration is not accidentally passed to unintended child components.\n\n### Using `slotProps` (for MUI widgets like `BaseInputTemplate`)\n\n```json\n{\n \"myPriceField\": {\n \"ui:options\": {\n \"mui\": {\n \"slotProps\": {\n \"input\": {\n \"startAdornment\": \"$\"\n }\n }\n }\n }\n }\n}\n```\n\n### Using `rjsfSlotProps` (for structural templates)\n\n```json\n{\n \"myArrayField\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayPaper\": {\n \"elevation\": 10\n }\n }\n }\n }\n }\n}\n```\n\n## Customizing Templates (e.g. Object and Array wrappers)\n\nMUI theme customizations are natively passed down into both your standard fields and their wrapping structural templates (like `ArrayFieldTemplate` or `ObjectFieldTemplate`) (see [table below](#components-and-their-rjsfslotprops-targets)).\n\nIf you wish to specifically target the _individual array items_ handled by `ArrayFieldItemTemplate` instead of the whole array container, you nest these overrides by targeting the `items` inside the schema:\n\n```json\n{\n \"myArrayField\": {\n \"items\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayItemGridContainer\": {\n \"spacing\": 2\n }\n }\n }\n }\n }\n }\n}\n```\n\n### Components and their `rjsfSlotProps` targets\n\nDifferent templates and widgets expose different `rjsfSlotProps` targets based on their underlying MUI composition.\n\n| RJSF Component | `rjsfSlotProps` targets available | Description |\n| ---------------------------- | --------------------------------- | ------------------------------------------------------------------------------------- |\n| **BaseInputTemplate** | _(uses native `slotProps`)_ | Uses MUI's `slotProps.htmlInput`, `slotProps.input`, `slotProps.inputLabel` directly. |\n| **FieldTemplate** | `fieldFormControl` | Props passed to the outer `FormControl` wrapper. |\n| | `fieldTypography` | Props passed to the `Typography` component used for the description. |\n| **ObjectFieldTemplate** | `objectGridContainer` | Props passed to the outer `Grid` container. |\n| | `objectGridItem` | Props passed to each property's `Grid` item. |\n| | `objectAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `objectAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| **ArrayFieldTemplate** | `arrayBox` | Props passed to the inner `Box` container holding the array items. |\n| | `arrayPaper` | Props passed to the outer `Paper` wrapper. |\n| | `arrayAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `arrayAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| | `arrayAddButtonBox` | Props passed to the `Box` wrapping the Add button. |\n| **ArrayFieldItemTemplate** | `arrayItemGridContainer` | Props passed to the outer `Grid` container for the item row. |\n| | `arrayItemGridItem` | Props passed to the content `Grid` item. |\n| | `arrayItemOuterBox` | Props passed to the outer `Box`. |\n| | `arrayItemPaper` | Props passed to the `Paper` elevation component. |\n| | `arrayItemInnerBox` | Props passed to the inner `Box` holding the children. |\n| | `arrayItemToolbarGrid` | Props passed to the `Grid` holding the toolbar buttons. |\n| **CheckboxesWidget** | `formGroup` | Props passed to the `FormGroup` container. |\n| | `checkbox` | Props passed to individual `Checkbox` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each checkbox. |\n| **CheckboxWidget** | `checkbox` | Props passed to the single `Checkbox` component. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` component wrapping the checkbox. |\n| **RadioWidget** | `radioGroup` | Props passed to the `RadioGroup` component. |\n| | `radio` | Props passed to the individual `Radio` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each radio. |\n| **SelectWidget** | `inputLabel` | Props passed to the native MUI `InputLabel` component. |\n| | `select` | Props passed to the native MUI `Select` component. |\n| **ErrorList** | `errorBox` | Props passed to the inner `Box`. |\n| | `errorList` | Props passed to the `List` container. |\n| | `errorListItem` | Props passed to individual `ListItem` components wrapping each error. |\n| | `errorListItemIcon` | Props passed to the `ListItemIcon` next to each error. |\n| | `errorListItemText` | Props passed to the `ListItemText` displaying the error. |\n| | `errorPaper` | Props passed to the outer `Paper` wrapper. |\n| | `errorTypography` | Props passed to the `Typography` displaying the \"Errors\" title. |\n| **FieldErrorTemplate** | `fieldErrorList` | Props passed to the `List` container. |\n| | `fieldErrorListItem` | Props passed to individual `ListItem` components. |\n| | `fieldErrorFormHelperText` | Props passed to the `FormHelperText` displaying the error text. |\n| **FieldHelpTemplate** | `helpFormHelperText` | Props passed to the `FormHelperText` used for help text. |\n| **DescriptionField** | `descTypography` | Props passed to the `Typography` component. |\n| **TitleField** | `titleBox` | Props passed to the outer `Box` wrapper. |\n| | `titleDivider` | Props passed to the `Divider` element. |\n| | `titleTypography` | Props passed to the `Typography` component used for the title. |\n| | `titleGridContainer` | Props passed to `Grid` container when title has optional data controls. |\n| | `titleGridItem` | Props passed to the `Grid` item containing the title. |\n| | `titleOptionalDataGridItem` | Props passed to the `Grid` item containing the optional data control. |\n| **MultiSchemaFieldTemplate** | `multiBox` | Props passed to the wrapper `Box`. |\n| | `multiFormControl` | Props passed to the wrapper `FormControl`. |\n| **SubmitButton** | `submitBox` | Props passed to the `Box` wrapping the submit button. |\n| | `submitButton` | Props passed to the `Button` element. |\n| **WrapIfAdditionalTemplate** | `wrapGridContainer` | Props passed to the outer `Grid` container. |\n| | `wrapKeyGridItem` | Props passed to the `Grid` item containing the key `TextField`. |\n| | `wrapChildrenGridItem` | Props passed to the `Grid` item containing the field children. |\n| | `wrapRemoveButtonGridItem` | Props passed to the `Grid` item containing the remove button. |\n","packages/docs/docs/api-reference/themes/primereact/uiSchema.md":"# PrimeReact Customization\n\nYou may set PrimeReact-specific options in the `uiSchema` object using the `\"prime\"` `\"ui:option\"`.\n\n```json\n{\n \"password\": {\n \"ui:options\": {\n \"prime\": {\n \"feedback\": true,\n \"weakLabel\": \"Too weak\",\n \"mediumLabel\": \"Could be stronger\",\n \"strongLabel\": \"Strong password\",\n \"toggleMask\": true\n }\n }\n }\n}\n```\n\n## Components\n\nThe `@rjsf/primereact` theme renders to the following PrimeReact components:\n\n- [`InputText`](https://primereact.org/inputtext/) as the default widget\n- [`AutoComplete`](https://primereact.org/autocomplete/) as the default with `examples`\n- [`Checkbox`](https://primereact.org/checkbox/) for boolean fields and `checkboxes` widget\n- [`ColorPicker`](https://primereact.org/colorpicker/) as `color` widget\n- [`Password`](https://primereact.org/password/) as `password` widget\n- [`RadioButton`](https://primereact.org/radiobutton/) as `radio` widget\n- [`Slider`](https://primereact.org/slider/) as `range` widget\n- [`Dropdown`](https://primereact.org/dropdown/) as `select` widget\n- [`MultiSelect`](https://primereact.org/multiselect/) as `select` widget with `multiple` option\n- [`InputTextarea`](https://primereact.org/inputtextarea/) as `textarea` widget\n- [`InputNumber`](https://primereact.org/inputnumber/) as `updown` widget\n\nPlease refer to the [PrimeReact documentation](https://primereact.org/) for the available PrimeReact-specific options\nof each component.\n","packages/docs/docs/api-reference/themes/semantic-ui/uiSchema.md":"# Semantic-UI Customization\n\nThere are various options to pass to semantic theme fields.\n\nNote that every semantic property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {semantic:{[property]: [value]}}}`\n\nIn other words, the following uiSchema is equivalent:\n\n> Note: All fields have the following settings below as their default\n\n```\nfluid: Take on the size of its container.\ninverted: Format to appear on dark backgrounds.\n```\n\n```json\n{\n \"ui:options\": {\n \"semantic\": {\n \"fluid\": true,\n \"inverted\": false,\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\"\n }\n }\n }\n}\n```\n\n#### Semantic Widget Optional Properties\n\n- [Semantic props for TextWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for CheckboxWidget](https://react.semantic-ui.com/modules/checkbox/)\n- [Semantic props for SelectWidget](https://react.semantic-ui.com/modules/dropdown/)\n- [Semantic props for RangeWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for RadioWidget](https://react.semantic-ui.com/addons/radio/)\n- [Semantic props for PasswordWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for UpDownWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for TextAreaWidget](https://react.semantic-ui.com/addons/text-area/)\n\n## errorOptions\n\nThe uiSchema semantic object accepts an `errorOptions` property for each field of the schema:\n\n```\nsize: determines the size of the error message dialog\npointing: determines the direction of the arrow on the error message dialog\n```\n\nBelow are the current defaults\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n errorOptions: {\n size: 'small',\n pointing: 'above',\n },\n },\n },\n};\n```\n\n## semantic options uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the semantic uiSchema value within the `ui:options` property:\n\n```\nwrapItem: wrap each array item in a Segment\nhorizontalButtons: vertical buttons instead of the default horizontal\n```\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n wrapItem: true,\n horizontalButtons: false,\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nThe formContext semantic object accepts `wrapContent` ,`wrapLabel` properties.\n\n```\nwrapContent: wrap all inputs field content in a div, for custom styling\nwrapLabel: wrap all labels in a div, for custom styling via CSS\n```\n\n```tsx\n\n```\n","packages/docs/docs/api-reference/uiSchema.md":"# uiSchema\n\nJSON Schema is limited for describing how a given data type should be rendered as a form input component. That's why this library introduces the concept of uiSchema.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.\n\nNote that almost every property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {[property]: [value]}}`, or `{\"ui:[property]\": value}`.\n\nIn other words, the following `uiSchema`s are equivalent:\n\n```json\n{\n \"ui:title\": \"Title\",\n \"ui:description\": \"Description\",\n \"ui:classNames\": \"my-class\",\n \"ui:submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n}\n```\n\n```json\n{\n \"ui:options\": {\n \"title\": \"Title\",\n \"description\": \"Description\",\n \"classNames\": \"my-class\",\n \"submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n }\n}\n```\n\nFor a full list of what is supported in the `uiSchema` see the `UiSchema` type in [@rjsf/utils/types.ts](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\nBe sure to pay attention to the hierarchical intersection to these other types: `UIOptionsBaseType` and `TemplatesType`.\n\n## Exceptions to the equivalence\n\nThere are 4 properties that exist in a `UiSchema` that will not be found in an inner `ui:options` object.\n\n### `ui:globalOptions`\n\nThe set of globally relevant `UiSchema` options that are read from the root-level `UiSchema` and stored in the `registry` for use everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': { copyable: true },\n};\n```\n\n### `ui:definitions`\n\nThe `ui:definitions` property allows you to define reusable UI customizations for schema `$ref` references. This is particularly useful for:\n\n- **Recursive schemas** - Define uiSchema once for a self-referencing schema node\n- **Reused definitions** - Apply consistent UI to schemas used in multiple places\n- **oneOf/anyOf branches** - Provide different uiSchema for branches that reference different definitions\n\nThe keys in `ui:definitions` must match the exact `$ref` path used in the schema (e.g., `#/definitions/address` or `#/$defs/node`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n },\n },\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' }, // Recursive reference\n },\n },\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/address': {\n street_address: { 'ui:placeholder': 'Street and number' },\n city: { 'ui:placeholder': 'City name' },\n },\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Enter node name' },\n children: { 'ui:options': { orderable: false } },\n },\n },\n // Local overrides take precedence over ui:definitions\n shipping_address: {\n street_address: { 'ui:placeholder': 'Shipping street (overrides definition)' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n#### Local Overrides\n\nYou can override specific properties from `ui:definitions` by providing values at the field path. Local values are merged with definitions, with local values taking precedence.\n\n#### oneOf/anyOf with Same Property Names\n\nWhen using `oneOf` or `anyOf` with branches that have properties with the same name, each branch's `$ref` maps to its own entry in `ui:definitions`, ensuring correct UI is applied:\n\n```tsx\nconst schema: RJSFSchema = {\n definitions: {\n person: { type: 'object', properties: { name: { type: 'string' } } },\n company: { type: 'object', properties: { name: { type: 'string' } } },\n },\n type: 'object',\n properties: {\n contact: {\n oneOf: [\n { title: 'Person', $ref: '#/definitions/person' },\n { title: 'Company', $ref: '#/definitions/company' },\n ],\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/person': {\n name: { 'ui:placeholder': 'Full name (e.g., John Doe)' },\n },\n '#/definitions/company': {\n name: { 'ui:placeholder': 'Company name (e.g., Acme Inc.)' },\n },\n },\n};\n```\n\n### `ui:rootFieldId` (deprecated)\n\n> DEPRECATED: Use `Form.idPrefix` instead, will be removed in a future major version\n\nBy default, this library will generate ids unique to the form for all rendered widgets.\nIf you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:rootFieldId': 'myform',\n};\n```\n\nThis will make all widgets have an id prefixed with `myform`.\n\n### `ui:field`\n\nThe `ui:field` property overrides the `Field` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a field that is used to look up an implementation from the `fields` list or an actual one-off `Field` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md#custom-field-components) for more information about how to use this property.\n\n### `ui:fieldReplacesAnyOrOneOf`\n\nBy default, any field that is rendered for an `anyOf`/`oneOf` schema will be wrapped inside the `AnyOfField` or `OneOfField` component.\nThis default behavior may be undesirable if your custom field already handles behavior related to choosing one or more subschemas contained in the `anyOf`/`oneOf` schema.\nBy providing a `true` value for this flag in association with a custom `ui:field`, the wrapped components will be omitted, so just one instance of the custom field will be rendered.\nIf the flag is omitted or set to `false`, your custom field will be wrapped by `AnyOfField`/`OneOfField`.\n\n### `ui:options`\n\nThe `ui:options` property cannot be nested inside itself and thus is the last exception.\n\n## `ui:XXX` or `ui:options.XXX`\n\nAll the properties that follow can be specified in the `uiSchema` in either of the two equivalent ways.\n\n> NOTE: The properties specific to array items can be found [here](../json-schema/arrays.md#array-item-uiSchema-options). For advanced dynamic UI schema capabilities for array items, see the [Dynamic UI Schema Examples](./dynamic-ui-schema-examples.md).\n\n### widget\n\nThe `ui:widget` property overrides the `Widget` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a widget that is used to look up an implementation from the `widgets` list or an actual one-off `Widget` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information about how to use this property.\n\n### classNames\n\nThe uiSchema object accepts a `ui:classNames` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:classNames': 'task-title foo-bar',\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### style\n\nThe uiSchema object accepts a `ui:style` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:style': { color: 'red' },\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### allowClearTextInputs\n\nThe optional `ui:allowClearTextInputs` uiSchema directive enables a clear/reset button for text-based input widgets.\nWhen set to true, a clear button will be displayed when the input field has a value and is not readonly or disabled.\nWhen omitted, no clear button will be displayed for text input fields.\n\nWhen clicked, the property value will be set to the `ui:emptyValue`, if defined.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:allowClearTextInputs': true,\n};\n```\n\nIt can also be enabled globally by setting the `allowClearTextInputs` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n allowClearTextInputs: true,\n },\n};\n```\n\n### autocomplete\n\nIf you want to mark a text input, select or textarea input to use the HTML autocomplete feature, set the `ui:autocomplete` uiSchema directive to a valid [HTML autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autocomplete': 'on',\n};\n```\n\n### autocapitalize\n\nTo control automatic capitalization on virtual keyboards for a text input, set the `ui:autocapitalize` uiSchema\ndirective to a valid [HTML autocapitalize value](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize#value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:autocapitalize': 'words',\n};\n```\n\n### autofocus\n\nIf you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autofocus': true,\n};\n```\n\n### description\n\nSometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:description': 'The best password',\n};\n```\n\n### deprecatedHandling\n\nThe `ui:deprecatedHandling` uiSchema directive controls how a field marked as `deprecated` in the JSON Schema is rendered.\n\nAccepts one of three values:\n\n- `'label'` (default): The field is rendered normally with `\"(deprecated)\"` appended to its label.\n- `'disable'`: The field is rendered but all its child widgets are disabled.\n- `'hide'`: The field is completely hidden from the form.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n legacyField: {\n 'ui:options': {\n deprecatedHandling: 'disable',\n },\n },\n};\n```\n\nIt can also be set globally by specifying the `deprecatedHandling` option in the `ui:globalOptions` uiSchema directive, which applies the chosen behavior to every deprecated field in the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n anotherOldField: { type: 'number', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n deprecatedHandling: 'hide',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### disabled\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### enableMarkdownInDescription\n\nThe `ui:enableMarkdownInDescription` uiSchema directive enables the support of Markdown syntax within the description of\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInDescription': true,\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInDescription` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInDescription: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableMarkdownInHelp\n\nThe `ui:enableMarkdownInHelp` uiSchema directive enables the support of Markdown syntax within the help displayed for\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInHelp': true,\n 'ui:help': '**bolded** text in the help',\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInHelp` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInHelp: true,\n },\n 'ui:help': '**bolded** text in the help',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableOptionalDataFieldForType\n\nThe `ui:enableOptionalDataFieldForType` uiSchema directive enables support for displaying the `Optional Data Controls` feature.\nThe intention of this feature is to allow developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields (see [examples](#add-optional-data-controls) below).\n\nThis directive takes, as its value, an array in one of four forms:\n\n1. `[]` - Disables the feature at a global or field level\n2. `['array']` - Enables the feature only for optional arrays at a global or field level\n3. `['object']` - Enables the feature only for optional object at a global or field level\n4. `['array', 'object']`- Enables the feature for both optional object and arrays at a global or field level\n\nIt can be specified in either the `ui:globalOptions` to turn the feature on for everything or in a specific field's `uiSchema`\nTo work properly this option must be coupled with the [emptyObjectFields](./form-props.md#emptyobjectfields) experimental feature on `Form` using the `populateRequiredDefaults` or `skipDefaults` options.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"undefined\" value in `formData` will NOT render any of the container's UI elements.\nInstead the object/array container's field title will have an \"Add optional data\" icon button that, when clicked will cause an empty container data element to be added to `formData`.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"defined\" value in `formData` will render all of the container's UI elements as normal AND the object/array container's field title will have a \"Remove optional data\" icon button that, when clicked will set the data for field in the `formData` to \"undefined\".\n\nHere is an example of what the UI will look like when enabled using the following `Form` configuration:\n\n```tsx\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n#### Add Optional Data Controls\n\n![add optional data controls](./OptionalDataControlsAdd.png)\n\n#### Remove Optional Data Controls\n\n![remove optional data controls](./OptionalDataControlsRemove.png)\n\n### emptyValue\n\nThe `ui:emptyValue` uiSchema directive provides the value to store when the input for a field is emptied, whether by typing or by clicking the `ui:allowClearTextInputs` clear button. It defaults to `undefined`, which omits the field from the form data entirely.\n\n### enumDisabled\n\nTo disable an option, use the `enumDisabled` property in uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': ['two'],\n};\n```\n\n### enumNames\n\nAllows a user to provide labels for enum values in the schema. Can be an array (matched by index) or a map (matched by value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchemaArray: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchemaMap: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n```\n\n### enumOrder\n\nControls the display order of enum options. Use `'*'` to represent remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n```\n\n### filePreview\n\nThe `FileWidget` can be configured to show a preview of an image or a download link for non-images using this flag.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\nconst uiSchema: UiSchema = {\n 'ui:options': {\n filePreview: true,\n },\n};\n```\n\n### help\n\nSometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:help': 'Hint: Make it strong!',\n};\n```\n\n![](https://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s) (after contextualized errors, if any).\n\n### hideError\n\nThe `ui:hideError` uiSchema directive will, if set to `true`, hide the default error display for the given field AND all of its child fields in the hierarchy.\n\nIf you need to enable the default error display of a child in the hierarchy after setting `hideError: true` on the parent field, simply set `hideError: false` on the child.\n\nThis is useful when you have a custom field or widget that utilizes either the `rawErrors` or the `errorSchema` to manipulate and/or show the error(s) for the field/widget itself.\n\n### inputType\n\nTo change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n inputType: 'tel',\n },\n};\n```\n\n### label\n\nField labels are rendered by default.\nLabels may be omitted on a per-field by setting the `label` option to `false` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThey can also be omitted globally by setting the `label` option to `false` in the `ui:globalOptions` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### optionValueFormat\n\nControls how enum-backed widgets (`select`, `radio`, `checkboxes`) encode option values in their DOM `value` attributes. Accepts `'indexed'` (default) or `'realValue'`.\n\n- `'indexed'`: options are encoded as their array index (e.g. `value=\"0\"`, `value=\"1\"`). This is the historical behavior and keeps non-primitive enum values (objects, arrays) addressable without stringifying them.\n- `'realValue'`: primitive option values are stringified directly (e.g. `value=\"admin\"`, `value=\"42\"`, `value=\"true\"`). This enables native HTML form submission and browser autocomplete since the submitted value matches the enum value. Non-primitive values (objects, arrays) still fall back to their index because `String(obj)` would produce `\"[object Object]\"`.\n\nThe form data passed to `onChange` is always the typed enum value; this option only affects the DOM-level encoding. Can be specified in `ui:globalOptions` to apply to all enum-backed fields, or per-field in `ui:options`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n role: { type: 'string', enum: ['admin', 'editor', 'viewer'] },\n },\n};\n\n// Form-wide\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n optionValueFormat: 'realValue',\n },\n};\n\n// Or per-field\nconst fieldUiSchema: UiSchema = {\n role: {\n 'ui:options': {\n optionValueFormat: 'realValue',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### order\n\nThis property allows you to reorder the properties that are shown for a particular object. See [Objects](../json-schema/objects.md) for more information.\n\n### placeholder\n\nYou can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', format: 'uri' };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'http://',\n};\n\nrender(, document.getElementById('app'));\n```\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', enum: ['First', 'Second'] };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'Choose an option',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### readonly\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only. This is equivalent to setting the `readOnly` property in the schema.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### rows\n\nYou can set the initial height of a textarea widget by specifying `rows` option.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n widget: 'textarea',\n rows: 15,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### title\n\nSometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:title': 'Your password',\n};\n```\n\n### submitButtonOptions\n\nSometimes it's convenient to change the behavior of the submit button for the form. This is the purpose of the `ui:submitButtonOptions` uiSchema directive:\n\nYou can pass any other prop to the submit button if you want, by default, this library will set the following options / props mentioned below for all submit buttons:\n\n#### `norender` option\n\nYou can set this property to `true` to remove the submit button completely from the form. Nice option, if the form is just for viewing purposes.\n\n#### `submitText` option\n\nYou can use this option to change the text of the submit button. Set to \"Submit\" by default.\n\n#### `props` section\n\nYou can pass any other prop to the submit button if you want, via this section.\n\n##### `disabled` prop\n\nYou can use this option to disable the submit button.\n\n##### `className` prop\n\nYou can use this option to specify a class name for the submit button.\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:submitButtonOptions': {\n props: {\n disabled: false,\n className: 'btn btn-info',\n },\n norender: false,\n submitText: 'Submit',\n },\n};\n```\n\n## `duplicateKeySuffixSeparator` option\n\nWhen using `additionalProperties`, key collision is prevented by appending a unique integer suffix to the duplicate key.\nFor example, when you add a key named `myKey` to a form where `myKey` is already defined, then your new key will become `myKey-1`.\nYou can use `ui:duplicateKeySuffixSeparator` to override the default separator, `\"-\"` with a string of your choice on a per-field basis.\n\nYou can also set this in the `ui:globalOptions` to have the same separator used everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n 'ui:globalOptions': {\n duplicateKeySuffixSeparator: '_',\n },\n};\n```\n\n## Using uiSchema with oneOf, anyOf\n\n### anyOf\n\nThe uiSchema will work with elements inside an `anyOf` as long as the uiSchema defines the `anyOf` key at the same level as the `anyOf` within the `schema`.\nBecause the `anyOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `anyOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n anyOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n### oneOf\n\nThe uiSchema will work with elements inside an `oneOf` as long as the uiSchema defines the `oneOf` key at the same level as the `oneOf` within the `schema`.\nBecause the `oneOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `oneOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n oneOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n## Theme Options\n\n- [AntD Customization](themes/antd/uiSchema.md)\n- [Chakra-UI Customization](themes/chakra-ui/uiSchema.md)\n- [MUI Customization](themes/mui/uiSchema.md)\n- [PrimeReact Customization](themes/primereact/uiSchema.md)\n- [Semantic-UI Customization](themes/semantic-ui/uiSchema.md)\n","packages/docs/docs/api-reference/utility-functions.md":"# RJSF utility functions, constants and types\n\nIn version 5, the utility functions from `@rjsf/core/utils` were refactored into their own library called `@rjsf/utils`.\nThese utility functions are separated into two distinct groups.\nThe first, larger, group are the [functions](#non-validator-utility-functions) that do NOT require a `ValidatorType` interface be provided as one of their parameters.\nThe second, smaller, group are the [functions](#validator-based-utility-functions) that DO require a `ValidatorType` interface be provided as a parameter.\nThere is also a helper [function](#schema-utils-creation-function) used to create a `SchemaUtilsType` implementation from a `ValidatorType` implementation and `rootSchema` object.\n\n## Constants\n\nThe `@rjsf/utils` package exports a set of constants that represent all the keys into various elements of a RJSFSchema or UiSchema that are used by the various utility functions.\nIn addition to those keys, there is the special `ADDITIONAL_PROPERTY_FLAG` flag that is added to a schema under certain conditions by the `retrieveSchema()` utility.\n\nThese constants can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/constants.ts).\n\n## Types\n\nAdditionally, the Typescript types used by the utility functions represent nearly all the types used by RJSF.\nThose types are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\n\n**`ObjectPath`** — Used by the path utilities (`getByPath`, `setByPath`, `hasByPath`, `unsetByPath`) to address a value inside a plain object. It is `string | number | FieldPathList`. A bare **string is always a single literal key**: `'a.b'` means the key `'a.b'`, never the nested path `a` → `b`. To walk a dotted path string, split it explicitly with [toPath()](#topath) first, or pass a `FieldPathList` (`(string | number)[]`) of segments. Reads and existence checks resolve **own** properties only, so inherited members never appear as form data.\n\n**`SchemaFieldPath`** — Used when navigating a JSON Schema subtree (for example with `getFromSchema` and `findFieldInSchema` on `SchemaUtilsType`, documented under [Validator-based utility functions](#validator-based-utility-functions)). It is `string | FieldPathList`: either a dotted path or an array of segments with the same rules as `FieldPathList` (`(string | number)[]`). A numeric segment denotes an array index or an object key that is numeric. Navigation skips only `undefined` or empty-string segments, so segment **`0`** is always honored (this avoids the bug from treating `0` as a falsy path unit).\n\n## Enums\n\nThere are enumerations in `@rjsf/utils` that are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese enums can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts).\n\n## Non-Validator utility functions\n\n### allowAdditionalItems()\n\nChecks the schema to see if it is allowing additional items, by verifying that `schema.additionalItems` is an object.\nThe user is warned in the console if `schema.additionalItems` has the value `true`.\n\n#### Parameters\n\n- schema: S - The schema object to check\n\n#### Returns\n\n- boolean: True if additional items is allowed, otherwise false\n\n### ariaDescribedByIds()\n\nReturn a list of element ids that contain additional information about the field that can be used to as the aria description of the field.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n- [includeExamples=false]: boolean - Optional flag, if true, will add the `examplesId` into the list\n\n#### Returns\n\n- string: The string containing the list of ids for use in an `aria-describedBy` attribute\n\n### asNumber()\n\nAttempts to convert the string into a number. If an empty string is provided, then `undefined` is returned.\nIf a `null` is provided, it is returned.\nIf the string ends in a `.` then the string is returned because the user may be in the middle of typing a float number.\nIf a number ends in a pattern like `.0`, `.20`, `.030`, string is returned because the user may be typing number that will end in a non-zero digit.\nOtherwise, the string is wrapped by `Number()` and if that result is not `NaN`, that number will be returned, otherwise the string `value` will be.\n\n#### Parameters\n\n- value: string | null - The string or null value to convert to a number\n\n#### Returns\n\n- undefined | null | string | number: The `value` converted to a number when appropriate, otherwise the `value`\n\n### bracketNameGenerator()\n\nGenerates bracketed names for form fields.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [isMultiValue]: boolean | undefined - Optional flag, if true, will append `[]` to the end of the name for multi-value fields (e.g., checkboxes, multi-select)\n\n#### Returns\n\n- string: The generated bracketed name (e.g., `root[tasks][0][title]`, or `root[hobbies][]` for multi-value fields)\n\n### buttonId()\n\nReturn a consistent `id` for the `btn` button element\n\n#### Parameters\n\n- id: FieldPathId | string - The id of the parent component for the option\n- btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove' - The button type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the button from the given `id` and `btn` type\n\n### canExpand<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks whether the field described by `schema`, having the `uiSchema` and `formData` supports expanding.\nThe UI for the field can expand if it has additional properties, is not forced as non-expandable by the `uiSchema` and the `formData` object doesn't already have `schema.maxProperties` elements.\n\n#### Parameters\n\n- schema: S - The schema for the field that is being checked\n- [uiSchema=\\{}]: UiSchema<T, S, F> - The uiSchema for the field\n- [formData]: T | undefined - The formData for the field\n\n#### Returns\n\n- boolean: True if the schema element has additionalProperties or patternProperties keywords, is expandable, and not at the maxProperties limit\n\n### createErrorHandler<T = any>()\n\nGiven a `formData` object, recursively creates a `FormValidation` error handling structure around it\n\n#### Parameters\n\n- formData: T - The form data around which the error handler is created\n\n#### Returns\n\n- FormValidation<T>: A `FormValidation` object based on the `formData` structure\n\n### dataURItoBlob()\n\nGiven the `FileReader.readAsDataURL()` based `dataURI` extracts that data into an actual Blob along with the name\nof that Blob if provided in the URL. If no name is provided, then the name falls back to `unknown`.\n\n#### Parameters\n\n- dataURI: string - The `DataUrl` potentially containing name and raw data to be converted to a Blob\n\n#### Returns\n\n- \\{ blob: Blob, name: string }: An object containing a Blob and its name, extracted from the URI\n\n### dateRangeOptions<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns a list of options for a date range between `start` and `stop`.\nIf the start date is greater than the end date, then the date range is reversed.\nIf `start` and `stop` are negative numbers (or zero), then they will be treated as relative to the current year.\n\n#### Parameters\n\n- start: number - The starting point of the date range\n- stop: number - The ending point of the date range\n\n#### Returns\n\n- EnumOptionsType<S>[]: The list of EnumOptionsType for the date range between `start` and `stop`\n\n#### Throws\n\n- Error when `start` and `stop` aren't both %lt;= 0 or > 0\n\n### deepEquals()\n\nImplements a deep equals that treats all functions as equivalent and tracks circular references, so self-referential inputs do not recurse infinitely.\n\n#### Parameters\n\n- a: any - The first element to compare\n- b: any - The second element to compare\n\n#### Returns\n\n- boolean: True if the `a` and `b` are deeply equal, false otherwise\n\n### descriptionId()\n\nReturn a consistent `id` for the field description element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field description element from the given `id`\n\n### dotNotationNameGenerator()\n\nGenerates dot-notation names for form fields. Multi-value fields are handled the same as single-value fields in dot notation.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [_isMultiValue]: boolean | undefined - Optional flag (unused in dot notation)\n\n#### Returns\n\n- string: The generated dot-notation name (e.g., `root.tasks.0.title`)\n\n### englishStringTranslator()\n\nTranslates a `TranslatableString` value `stringToTranslate` into english.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `stringToTranslate` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\nstringToTranslate: TranslatableString - The `TranslatableString` value to convert to english\n[params]: string[] - The optional list of replaceable parameter values to substitute to the english string\n\n#### Returns\n\n- string: The `stringToTranslate` itself with any replaceable parameter values substituted\n\n### enumOptionsDeselectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nRemoves the enum option value at the `valueIndex` from the currently `selected` (list of) value(s).\nIf `selected` is a list, then that list is updated to remove the enum option value with the `valueIndex` in `allEnumOptions`.\nIf it is a single value, then if the enum option value with the `valueIndex` in `allEnumOptions` matches `selected`, undefined is returned, otherwise the `selected` value is returned.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value to be removed from the selected list or single value\n- [selected]: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined - The current (list of) selected value(s)\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated `selected` list with the `value` removed from it\n\n### enumOptionSelectedValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nComputes the value to pass to a select element's `value` attribute.\nWhen `format` is `'realValue'`, converts form data values to strings.\nWhen `format` is `'indexed'` (the default), resolves to index-based values via `enumOptionsIndexForValue`.\nReturns `emptyValue` when the current value is empty.\n\n#### Parameters\n\n- value: any - The current form data value\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- multiple: boolean - Whether the select allows multiple selections\n- [format='indexed']: OptionValueFormat - How option values are encoded on the DOM\n- emptyValue: any - The value to return when the selection is empty\n\n#### Returns\n\n- any: The value to use for the select element's `value` attribute\n\n### enumOptionsIndexForValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the index(es) of the options in `allEnumOptions` whose value(s) match the ones in `value`.\nAll the `enumOptions` are filtered based on whether they are a \"selected\" `value` and the index of each selected one is then stored in an array.\nIf `multiple` is true, that array is returned, otherwise the first element in the array is returned.\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The single value or list of values for which indexes are desired\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [multiple=false]: boolean - Optional flag, if true will return a list of index, otherwise a single one\n\n#### Returns\n\n- string | string[] | undefined: A single string index for the first `value` in `allEnumOptions`, if not `multiple`. Otherwise, the list of indexes for (each of) the value(s) in `value`.\n\n### enumOptionsIsSelected<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetermines whether the given `value` is (one of) the `selected` value(s).\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] - The value being checked to see if it is selected\n- selected: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The current selected value or list of values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- boolean: true if the `value` is one of the `selected` ones, false otherwise\n\n### enumOptionsSelectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nAdd the `value` to the list of `selected` values in the proper order as defined by `allEnumOptions`.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value that should be selected\n- selected: EnumOptionsType<S>[\"value\"][] - The current list of selected values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated list of selected enum values with `value` added to it in the proper location\n\n### enumOptionsValueForIndex<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the value(s) from `allEnumOptions` at the index(es) provided by `valueIndex`.\nIf `valueIndex` is not an array AND the index is not valid for `allEnumOptions`, `emptyValue` is returned.\nIf `valueIndex` is an array, AND it contains an invalid index, the returned array will have the resulting undefined values filtered out, leaving only valid values or in the worst case, an empty array.\n\n#### Parameters\n\n- valueIndex: string | number | Array<string | number> - The index(es) of the value(s) that should be returned\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [emptyValue]: EnumOptionsType<S>[\"value\"] | undefined - The value to return when the non-array `valueIndex` does not refer to a real option\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined: The single or list of values specified by the single or list of indexes if they are valid. Otherwise, `emptyValue` or an empty list.\n\n### enumOptionValueDecoder<S extends StrictRJSFSchema = RJSFSchema>()\n\nDecodes a string from a DOM value attribute back to a typed enum value.\nWhen `format` is `'realValue'`, does a reverse lookup: finds the enum option whose `String(value)` matches the input string and returns the original typed value.\nFor object/array values that were encoded as indices, falls back to index resolution.\nWhen `format` is `'indexed'` (the default), uses index-based resolution via `enumOptionsValueForIndex`.\n\n#### Parameters\n\n- value: string | string[] - The string value(s) from the DOM\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- [format='indexed']: OptionValueFormat - How the values were encoded on the DOM\n- emptyValue: unknown - The value to return for empty/missing selections\n\n#### Returns\n\n- unknown: The original typed enum value(s)\n\n### enumOptionValueEncoder()\n\nEncodes an enum option value into a string for a DOM value attribute.\nWhen `format` is `'realValue'`, primitive values are converted via `String()`.\nNon-primitive values (objects, arrays) fall back to the index since `String()` would produce `\"[object Object]\"`.\nWhen `format` is `'indexed'` (the default), returns the index as a string.\n\n#### Parameters\n\n- value: unknown - The typed enum value\n- index: number - The option's position in the enumOptions array\n- [format='indexed']: OptionValueFormat - How to encode the value for the DOM attribute\n\n#### Returns\n\n- string: The string to use as the DOM value attribute\n\n### logUnsupportedDefaultForEnum<S extends StrictRJSFSchema = RJSFSchema>()\n\nLogs a warning when a single-select enum widget has a schema default that is not one of its enum options.\nMulti-select widgets are ignored because they do not use the same single-value default handling.\n\n#### Parameters\n\n- id: string - The field id used in the warning message\n- schema: S - The schema whose default value is checked\n- [enumOptions]: EnumOptionsType<S>[] - The enum options available to the widget\n- [multiple=false]: boolean - Whether the widget allows multiple selections\n\n### errorId()\n\nReturn a consistent `id` for the field error element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field error element from the given `id`\n\n### examplesId()\n\nReturn a consistent `id` for the field examples element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field examples element from the given `id`\n\n### findSchemaDefinition<S extends StrictRJSFSchema = RJSFSchema>()\n\nGiven the name of a `$ref` from within a schema, using the `rootSchema`, look up and return the sub-schema using the path provided by that reference.\nIf `#` is not the first character of the reference, or the path does not exist in the schema, then throw an Error.\nOtherwise, return the sub-schema. Also deals with nested `$ref`s in the sub-schema.\n\n#### Parameters\n\n- $ref: string - The ref string for which the schema definition is desired\n- [rootSchema={}]: S - The root schema in which to search for the definition\n\n#### Returns\n\n- S: The sub-schema within the `rootSchema` which matches the `$ref` if it exists\n\n#### Throws\n\n- Error indicating that no schema for that reference exists\n\n### getByPath<R = unknown>()\n\nGets the value at `path` of `obj`, returning `defaultValue` when the resolved value is `undefined`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment must be an **own** property, matching [hasByPath()](#hasbypath), so the two can be used as a guard/read pair.\nInherited members are never resolved: `getByPath({}, 'toString')` returns `defaultValue` rather than `Function.prototype.toString`. For the plain form data and schemas RJSF navigates, an inherited member is never data, and the own-property rule also makes prototype internals such as `__proto__` unreachable unless they are genuine own data keys.\n\nAn empty segment list resolves to nothing, so `defaultValue` is returned rather than `obj` itself; this matches [hasByPath()](#hasbypath), which is `false` for an empty path.\n\nThe value at a runtime-computed path cannot be known statically, so `R` is the caller's declaration of the expected type (like `Map.get()`); it defaults to `unknown`, which forces narrowing when no type is given.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments at which to get the value\n- [defaultValue]: R - The value returned when the resolved value is `undefined`\n\n#### Returns\n\n- R: The resolved value, otherwise `defaultValue`\n\n#### Example\n\n```typescript\ngetByPath({ a: { b: 1 } }, ['a', 'b']); // 1\ngetByPath({ 'a.b': 1 }, 'a.b'); // 1, a bare string is one literal key\ngetByPath({ a: { b: 1 } }, toPath('a.b')); // 1\ngetByPath({ a: {} }, ['a', 'missing'], 'fallback'); // 'fallback'\ngetByPath({}, 'toString', 'fallback'); // 'fallback', inherited members are not read\ngetByPath({ a: 1 }, [], 'fallback'); // 'fallback', an empty path resolves to nothing\n```\n\n### getChangedFields(a: unknown, b: unknown, deep?: boolean)\n\nCompares two objects and returns the names of the fields that have changed.\nThis function iterates over each field of object `a`, using `_.isEqual` to compare the field value with the corresponding field value in object `b`.\nIf the values are different, the field name will be included in the returned array.\n\nWhen `deep` is true, a field holding a nested object or a same-length array is descended into and the dotted path of the deepest field that changed is returned instead of the name of the top-level field holding it.\nA key that contains a `.` or a `[` is descended into like any other: the path it produces cannot be told apart from a path through nested keys, and neither can the entry an `ErrorSchema` keeps for it, since [toErrorSchema()](#toerrorschema) spells such a name out as a path in the same way.\n\n#### Parameters\n\n- a: unknown - The first object, representing the original data to compare.\n- b: unknown - The second object, representing the updated data to compare.\n- [deep=false]: boolean - Optional flag that, when true, returns the dotted path of the deepest field that changed.\n\n#### Returns\n\n- string[] : An array of field names that have changed.\n\n#### Example\n\n```typescript\nconst a = { name: 'John', age: 30 };\nconst b = { name: 'John', age: 31 };\nconst changedFields = getChangedFields(a, b);\nconsole.log(changedFields); // Output: ['age']\n```\n\n#### Example (deep)\n\n```typescript\nconst a = { items: [{ qux: '', corge: '' }] };\nconst b = { items: [{ qux: 'a', corge: '' }] };\nconsole.log(getChangedFields(a, b)); // Output: ['items']\nconsole.log(getChangedFields(a, b, true)); // Output: ['items.0.qux']\n```\n\n### getDecimalSeparator(languages?: string | string[])\n\nDetermines the locale-specific decimal separator.\nIt uses the provided locale or the first locale in navigator.languages (if available) and falls back to \"en\".\n\n#### Parameters\n\n- languages?: string | string[] - Optional array of locales or a single locale string.\n\n#### Returns\n\n- string : The decimal separator character (typically '.' or ',').\n\n#### Example\n\n```typescript\nconst separator = getDecimalSeparator('fr');\nconsole.log(separator); // Output: ','\n```\n\n### getDiscriminatorFieldFromSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the `discriminator.propertyName` when defined in the `schema` if it is a string. A warning is generated when it is not a string.\nReturns `undefined` when a valid discriminator is not present.\n\n#### Parameters\n\n- schema: S - The schema from which the discriminator is potentially obtained\n\n#### Returns\n\n- string | undefined: The `discriminator.propertyName` if it exists in the schema, otherwise `undefined`\n\n### getDateElementProps()\n\nGiven date & time information with optional yearRange & format, returns props for DateElement\n\n#### Parameters\n\n- date: DateObject - Object containing date with optional time information\n- time: boolean - Determines whether to include time or not\n- [yearRange=[1900, new Date().getFullYear() + 2]]: [number, number] - Controls the list of years to be displayed\n- [format='YMD']: DateElementFormat - Controls the order in which day, month and year input element will be displayed\n\n#### Returns\n\n- Array of props for DateElement\n\n### getInputProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nUsing the `schema`, `defaultType` and `options`, extract out the props for the `` element that make sense.\n\n#### Parameters\n\n- schema: S - The schema for the field provided by the widget\n- [defaultType]: string | undefined - The default type, if any, for the field provided by the widget\n- [options={}]: UIOptionsType<T, S, F> - The UI Options for the field provided by the widget\n- [autoDefaultStepAny=true]: boolean - Determines whether to auto-default step=any when the type is number and no step\n\n#### Returns\n\n- InputPropsType: The extracted `InputPropsType` object\n\n### getOptionMatchingSimpleDiscriminator()\n\nCompares the value of `discriminatorField` within `formData` against the value of `discriminatorField` within schema for each `option`. Returns index of first `option` whose discriminator matches formData. Returns `undefined` if there is no match.\n\nThis function does not work with discriminators of `\"type\": \"object\"` and `\"type\": \"array\"`\n\n#### Parameters\n\n- [formData]: T | undefined - The current formData, if any, used to figure out a match\n- options: S[] - The list of options to find a matching options from\n- [discriminatorField]: string | undefined - The optional name of the field within the options object whose value is used to determine which option is selected\n\n#### Returns\n\n- number | undefined: index of the matched option\n\n### getOptionValueFormat()\n\nResolves the effective `optionValueFormat` for enum-backed widgets.\nProvides a single source of truth for the default DOM encoding format (`'indexed'`) used by `SelectWidget`, `RadioWidget`, and `CheckboxesWidget`.\nWidgets should call this helper once and pass the result to `enumOptionValueEncoder`, `enumOptionValueDecoder`, and `enumOptionSelectedValue` rather than reading `options.optionValueFormat` directly.\n\n#### Parameters\n\n- [options]: \\{ optionValueFormat?: OptionValueFormat } | undefined - The widget options (typically from the `options` prop, already resolved from `ui:options` and `ui:globalOptions`)\n\n#### Returns\n\n- OptionValueFormat: The resolved `OptionValueFormat`, defaulting to `'indexed'` when not set\n\n### getPropertySchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the sub-schema declared for `property` in the `properties` of `schema`, falling back to an empty schema when the schema has no such property.\nCallers treat the properties of a schema as schemas of the same type `S`, which the `JSONSchema7` typing of `properties` cannot express, so this function owns that single assertion rather than repeating it at every lookup.\n\n#### Parameters\n\n- schema: S | undefined - The schema, if any, from which to read the property sub-schema\n- property: string - The name of the property whose sub-schema is desired\n\n#### Returns\n\n- S: The sub-schema for `property`, or an empty schema when it is not declared\n\n### getSchemaType()\n\nGets the type of a given `schema`.\nIf the type is not explicitly defined, then an attempt is made to infer it from other elements of the schema as follows:\n\n- schema.const: Returns the `guessType()` of that value\n- schema.enum: Returns `string`\n- schema.properties: Returns `object`\n- schema.additionalProperties: Returns `object`\n- schema.patternProperties: Returns `object`\n- type is an array with a length of 2 and one type is 'null': Returns the other type\n\n#### Parameters\n\n- schema: S - The schema for which to get the type\n\n#### Returns\n\n- string | string[] | undefined: The type of the schema\n\n### getSubmitButtonOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nExtracts any `ui:submitButtonOptions` from the `uiSchema` and merges them onto the `DEFAULT_OPTIONS`\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - the UI Schema from which to extract submit button props\n\n#### Returns\n\n- UISchemaSubmitButtonOptions: The merging of the `DEFAULT_OPTIONS` with any custom ones\n\n### getTemplate<Name extends keyof TemplatesType<T, S, F>, T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nReturns the template with the given `name` from either the `uiSchema` if it is defined or from the `registry`\notherwise. NOTE, since `ButtonTemplates` are not overridden in `uiSchema` only those in the `registry` are returned.\n\n#### Parameters\n\n- name: Name - The name of the template to fetch, restricted to the keys of `TemplatesType`\n- registry: Registry<T, S, F> - The `Registry` from which to read the template\n- [uiOptions=\\{}]: UIOptionsType<T, S, F> - The `UIOptionsType` from which to read an alternate template\n\n#### Returns\n\n- TemplatesType<T, S, F>[Name] - The template from either the `uiSchema` or `registry` for the `name`\n\n### getTestIds()\n\nReturns an object of test IDs that can only be used in test mode.\nIf the function is called in a test environment (`NODE_ENV === 'test'`, this is set by jest) then a Proxy object will be returned.\nIf a key within the returned object is accessed, if the value already exists the object will return that value, otherwise it will create that key\nwith a generated `uuid` value and return the generated ID.\nIf it is called outside of a test environment, the function will return an empty object, therefore returning `undefined` for any property within the object and excluding the prop from the rendered output of the component in which it is used.\nTo use this helper, you will want to generate a separate object for each component to avoid potential overlapping of ID names.\nYou will also want to export the object for use in tests, because the keys will be generated in the component file, and used in the test file.\nWithin the component file, add: `export const TEST_IDS = getTestIds();`\nThen pass `TEST_IDS.examplePropertyName` as the value of the test ID attribute of the intended component.\nThis will allow you to use `TEST_IDS.examplePropertyName` within your tests, while keeping the test IDs out of your rendered output.\n\n#### Returns\n\n- TestIdShape: An object that auto-generates test ids upon request the first time and then returns the same value on subsequent calls\n\n### getUiOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGet all passed options from ui:options, and ui:<optionName>, returning them in an object with the `ui:` stripped off.\nAny `globalOptions` will always be returned, unless they are overridden by options in the `uiSchema`.\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - The UI Schema from which to get any `ui:xxx` options\n- [globalOptions={}]: GlobalUISchemaOptions - The optional Global UI Schema from which to get any fallback `xxx` options\n\n#### Returns\n\n- UIOptionsType<T, S, F> An object containing all of the `ui:xxx` options with the `ui:` stripped off along with all `globalOptions`\n\n### getWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGiven a schema representing a field to render and either the name or actual `Widget` implementation, returns the\nReact component that is used to render the widget. If the `widget` is already a React component, then it is wrapped\nwith a `MergedWidget`. Otherwise an attempt is made to look up the widget inside of the `registeredWidgets` map based\non the schema type and `widget` name. If no widget component can be found an `Error` is thrown.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- Widget<T, S, F>: The `Widget` component to use\n\n#### Throws\n\n- An error if there is no `Widget` component that can be returned\n\n### hasByPath()\n\nDetermines whether `obj` has an **own** property at `path`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment is checked with `Object.hasOwn()`, so inherited properties report `false` — `hasByPath({}, 'toString')` is `false`. [getByPath()](#getbypath) applies the same own-property rule, so the two can be used as a guard/read pair.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments to check for\n\n#### Returns\n\n- boolean: True if the own property exists at `path`, otherwise false\n\n#### Example\n\n```typescript\nhasByPath({ a: { b: undefined } }, ['a', 'b']); // true, the key exists\nhasByPath({ a: { b: 1 } }, 'a.b'); // false, there is no key named 'a.b'\nhasByPath({}, 'toString'); // false, inherited properties are not own properties\n```\n\n### hashObject()\n\nStringifies an `object` and returns the hash of the resulting string.\nSorts object fields in consistent order before stringify to prevent different hash ids for the same object.\n\n#### Parameters\n\n- object: object - The object for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified object\n\n### hashString()\n\nHashes a string using the algorithm based on Java's hashing function.\n\n#### Parameters\n\n- string: string - The string for which to get the hash\n\n#### Returns\n\n- string: The resulting hash of the string in hex format\n\n### guessType()\n\nGiven a specific `value` attempts to guess the type of a schema element. In the case where we have to implicitly\ncreate a schema, it is useful to know what type to use based on the data we are defining.\n\n#### Parameters\n\n- value: any - The value from which to guess the type\n\n#### Returns\n\n- string: The best guess for the object type\n\n### hashForSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nStringifies the schema and returns the hash of the resulting string.\n\n#### Parameters\n\n- schema: S - The schema for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified schema\n\n### hasWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nDetects whether the `widget` exists for the `schema` with the associated `registryWidgets` and returns true if it does, or false if it doesn't.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- boolean: True if the widget exists, false otherwise\n\n### helpId()\n\nReturn a consistent `id` for the field help element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field help element from the given `id`\n\n### isConstant<S extends StrictRJSFSchema = RJSFSchema>()\n\nThis function checks if the given `schema` matches a single constant value.\nThis happens when either the schema has an `enum` array with a single value or there is a `const` defined.\n\n#### Parameters\n\n- schema: S - The schema for a field\n\n#### Returns\n\n- boolean: True if the `schema` has a single constant value, false otherwise\n\n### isCustomWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks to see if the `uiSchema` contains the `widget` field and that the widget is not `hidden`\n\n#### Parameters\n\n- uiSchema: UiSchema<T, S, F> - The UI Schema from which to detect if it is customized\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isFixedItems<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetects whether the given `schema` contains fixed items.\nThis is the case when `schema.items` is a non-empty array that only contains objects.\n\n#### Parameters\n\n- schema: S - The schema in which to check for fixed items\n\n#### Returns\n\n- boolean: True if there are fixed items in the schema, false otherwise\n\n### isFormDataAvailable<T = any>()\n\nDetermines whether the given `formData` represents valid form data, such as a primitive type, an array, or a non-empty object.\n\n#### Parameters\n\n- formData: T - The data to check\n\n#### Returns\n\n- boolean: True if `formData` is not undefined, null, a primitive type or an array or an empty object\n\n### isObject()\n\nDetermines whether a `thing` is an object for the purposes of RSJF.\nIn this case, `thing` is an object if it has the type `object` but is NOT null, an array or a File.\n\n#### Parameters\n\n- thing: any - The thing to check to see whether it is an object\n\n#### Returns\n\n- boolean: True if it is a non-null, non-array, non-File object\n\n### isPlainObject()\n\nDetermines whether `thing` is a plain object, i.e. one created by the `Object` constructor or with a `null` prototype.\nUnlike [isObject()](#isobject), class instances such as `Error` are not plain objects, which matters when recursively walking a structure whose nested values are expected to be plain data.\n\n#### Parameters\n\n- thing: unknown - The thing to check to see whether it is a plain object\n\n#### Returns\n\n- boolean: True if it is a plain object, otherwise false. When true, `thing` is narrowed to `Record`\n\n### isRootSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nHelper to check whether a JSON schema object is the root schema. The schema is a root schema with root `properties`\nkey or a root `$ref` key. If the `schemaToCompare` has a root `oneOf` property, the function will\nreturn false. Else if `schemaToCompare` and `rootSchema` are the same object or equal, the function will return\n`true`. Else if the `rootSchema` has a $ref, it will be resolved using `schemaUtils.resolveSchema` utility. If the\nresolved schema matches the `schemaToCompare` the function will return `true`. Otherwise, it will return false.\n\n#### Parameters\n\n- registry: Registry<T, S, F> - The `Registry` used to get the `rootSchema` and `schemaUtils`\n- schemaToCompare: S - The JSON schema object to check. If `schemaToCompare` is an root schema, the function will return true.\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isValueEmpty()\n\nReturns true when a form value is considered empty: `null`, `undefined`, or `''` (empty string), an empty array (`[]`), or a plain object whose every own value is itself empty (checked recursively). Scalar values such as `0` and `false` are not considered empty.\n\n#### Parameters\n\n- value: unknown - The value to check\n\n#### Returns\n\n- boolean: True if the value is considered empty, false otherwise\n\n### labelValue()\n\nHelper function that will return the value to use for a widget `label` based on `hideLabel`.\nThe `fallback` is used as the return value from the function when `hideLabel` is true.\nDue to the implementation of theme components, it may be necessary to return something other than `undefined` to cause the theme component to not render a label.\nSome themes require may `false` and others may require an empty string.\n\n#### Parameters\n\n- [label]: string | ReactElement | undefined - The label string or component to render when not hidden\n- [hideLabel]: boolean| undefined - Flag, if true, will cause the label to be hidden\n- [fallback]: undefined | false | '' - One of 3 values, `undefined` (the default), `false` or an empty string\n\n- #### Returns\n\n- string | boolean | undefined: `fallback` if `hideLabel` is true, otherwise `label`\n\n### localToUTC()\n\nConverts a local Date string into a UTC date string\n\n#### Parameters\n\n- dateString: string - The string representation of a date as accepted by the `Date()` constructor\n\n#### Returns\n\n- string | undefined: A UTC date string if `dateString` is truthy, otherwise undefined\n\n### lookupFromFormContext<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, R = unknown>()\n\nGiven a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`.\nThis might be contained within the lookup map in the formContext.\nIf no such value exists, return the `fallback` value.\n\n#### Parameters\n\n- regOrFc: Registry<T, S, F> | Registry<T, S, F>['formContext'] - The @rjsf registry or form context in which the lookup will occur\n- toLookup: string - The name of the field in the lookup map in the form context to get the value for\n- [fallback]: R - The fallback value to use if the form context does not contain a value for `toLookup`\n\n#### Returns\n\n- R: The value associated with `toLookup` in the form context or `fallback`\n\n### mergeDefaultsWithFormData<T = any>()\n\nMerges the `defaults` object of type `T` into the `formData` of type `T`\n\nWhen merging defaults and form data, we want to merge in this specific way:\n\n- objects are deeply merged\n- arrays are merged in such a way that:\n - when the array is set in form data, only array entries set in form data are deeply merged; additional entries from the defaults are ignored unless `mergeExtraArrayDefaults` is true, in which case the extras are appended onto the end of the form data\n - when the array is not set in form data, the default is copied over\n- scalars are overwritten/set by form data\n\n#### Parameters\n\n- [defaults]: T | undefined - The defaults to merge\n- [formData]: T | undefined - The form data into which the defaults will be merged\n- [mergeExtraArrayDefaults=false]: boolean - If true, any additional default array entries are appended onto the formData\n- [defaultSupercedesUndefined=false]: boolean - If true, an explicit undefined value will be overwritten by the default value\n\n#### Returns\n\n- T | undefined: The resulting merged form data with defaults\n\n### mergeObjects()\n\nRecursively merge deeply nested objects.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n- [concatArrays=false]: boolean | \"preventDuplicates\" - Optional flag that, when true, will cause arrays to be concatenated. Use \"preventDuplicates\" to merge arrays in a manner that prevents any duplicate entries from being merged.\n\n#### Returns\n\n@returns - A new object that is the merge of the two given objects\n\n### mergeSchemas()\n\nRecursively merge deeply nested schemas.\nThe difference between mergeSchemas and mergeObjects is that mergeSchemas only concats arrays for values under the 'required' keyword, and when it does, it doesn't include duplicate values. NOTE: Uses shallow comparison for the duplicate checking.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n\n#### Returns\n\n- GenericObjectType: The merged schema object\n\n### optionalControlsId()\n\nReturn a consistent `id` for the optional data controls `element`\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- element: 'Add' | 'Msg' | 'Remove' - The element type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the optional data controls element from the given `id` and `element` type\n\n### optionId()\n\nReturn a consistent `id` for the `optionIndex`s of a `Radio` or `Checkboxes` widget\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- optionIndex: number - The index of the option for which the id is desired\n\n#### Returns\n\n- string: An id for the option index based on the parent `id`\n\n### noop()\n\nA function that does nothing and returns `undefined`, useful as a placeholder for an optional callback or as the implementation of a mocked function.\n\n#### Returns\n\n- void\n\n### optionsList<T = any, S extends StrictRJSFSchema = RJSFSchema,F extends FormContextType = any>()\n\nGets the list of options from the `schema`. If the schema has an enum list, then those enum values are returned.\nThe labels for the options will be extracted from `ui:enumNames` in the `uiSchema` if provided, otherwise the label will be the same as the `value`. If `ui:enumOrder` is provided, the options will be reordered accordingly.\n\nIf the schema has a `oneOf` or `anyOf`, then the value is the list of either:\n\n-\n- The `const` values from the schema if present\n- If the schema has a discriminator and the label using either the `schema.title` or the value. If a `uiSchema` is\n provided, and it has the `ui:enumNames` matched with `enum` or it has an associated `oneOf` or `anyOf` with a list of\n objects containing `ui:title` then the UI schema values will replace the values from the schema.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the options list\n- [uiSchema]: UiSchema<T, S, F> - The optional uiSchema from which to get alternate labels for the options\n\n#### Returns\n\n- \\{ schema?: S, label: string, value: any }: The list of options from the schema\n\n### orderProperties()\n\nGiven a list of `properties` and an `order` list, returns a list that contains the `properties` ordered correctly.\nIf `order` is not an array, then the untouched `properties` list is returned.\nOtherwise `properties` is ordered per the `order` list.\nIf `order` contains a '_' then any `properties` that are not mentioned explicity in `order` will be places in the location of the `_`.\n\n#### Parameters\n\n- properties: string[] - The list of property keys to be ordered\n- order: string[] - An array of property keys to be ordered first, with an optional '\\*' property\n\n#### Returns\n\n- string[]: A list with the `properties` ordered\n\n#### Throws\n\n- Error when the properties cannot be ordered correctly\n\n### pad()\n\nReturns a string representation of the `num` that is padded with leading \"0\"s if necessary\n\n#### Parameters\n\n- num: number - The number to pad\n- width: number - The width of the string at which no lead padding is necessary\n\n#### Returns\n\n- string: The number converted to a string with leading zero padding if the number of digits is less than `width`\n\n### parseDateString()\n\nParses the `dateString` into a `DateObject`, including the time information when `includeTime` is true\n\n#### Parameters\n\n- dateString: string - The date string to parse into a DateObject\n- [includeTime=true]: boolean - Optional flag, if false, will not include the time data into the object\n\n#### Returns\n\n- DateObject: The date string converted to a `DateObject`\n\n#### Throws\n\n- Error when the date cannot be parsed from the string\n\n### rangeSpec<S extends StrictRJSFSchema = RJSFSchema>()\n\nExtracts the range spec information `{ step?: number, min?: number, max?: number }` that can be spread onto an HTML input from the range analog in the schema `{ multipleOf?: number, minimum?: number, maximum?: number }`.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the range spec\n\n#### Returns\n\n- RangeSpecType: A range specification from the schema\n\n### replaceStringParameters()\n\nPotentially substitutes all replaceable parameters with the associated value(s) from the `params` if available.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `inputString` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\n- inputString: string - The string which will be potentially updated with replacement parameters\n- [params]: string[] - The optional list of replaceable parameter values to substitute into the english string\n\n#### Returns\n\n- string: The updated string with any replacement specifiers replaced\n\n### resolveDefaultWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nComputes the widget name a field falls back to when no `ui:widget` is specified, along with the `enumOptions` (if any) that back a `select`-like fallback.\nThe default is `select` when `schema` has enumerable options, the schema's `format` when a widget is registered for it, or `text` otherwise.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- uiSchema: UiSchema<T, S, F> | undefined - The uiSchema for the field\n- schemaUtils: SchemaUtilsType<T, S, F> - The `SchemaUtilsType` used to detect whether `schema` has enumerable options\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- \\{ defaultWidget: string, enumOptions: EnumOptionsType<S>[] | undefined }: The default widget name and the `enumOptions`, if any, computed along the way\n\n### resolveUiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nResolves the uiSchema for a given schema, considering `ui:definitions` stored in the registry.\nCalled at runtime for each field. When the schema contains a `$ref`, looks up the corresponding uiSchema definition from `registry.uiSchemaDefinitions` and merges it with local overrides.\nFor schemas with `oneOf`/`anyOf` branches, also populates `uiSchema[keyword][i]` for branches whose `$ref` matches a definition, so `MultiSchemaField` can read dropdown option titles.\n\nResolution order (later sources override earlier):\n\n1. `ui:definitions[$ref]` - base definition from registry\n2. `localUiSchema` - local overrides at current path\n\n#### Parameters\n\n- schema: S - The JSON schema (may contain `$ref` or `RJSF_REF_KEY`)\n- localUiSchema: UiSchema<T, S, F> | undefined - The uiSchema at the current path (local overrides)\n- registry: Registry<T, S, F> - The registry containing `uiSchemaDefinitions`\n\n#### Returns\n\n- UiSchema<T, S, F>: The resolved uiSchema with definitions merged in\n\n### schemaHasNestedConditional<S extends StrictRJSFSchema = RJSFSchema>()\n\nRecursively checks whether the given raw `schema` contains a `dependencies` or `if` keyword anywhere below its top level, e.g. inside a nested object's `properties`, a `$ref`, an array's tuple `items`, or a `patternProperties` entry.\n`retrieveSchema()` only resolves the `dependencies`/`if` declared directly on the schema it is given, so a root-level retrieved schema never reflects a conditional branch switch that happens deeper in the tree.\n`Form` uses this to detect when a comparison of root-level retrieved schemas can't be trusted to decide whether sanitization is needed.\n\n#### Parameters\n\n- schema: S | boolean | undefined - The raw schema node to search\n- rootSchema: S - The root schema, used to resolve any `$ref`s encountered while searching\n- atRoot: boolean = true - Whether `schema` is the root of the search, whose own `dependencies`/`if` don't count\n- seenRefs: string[] = [] - The `$ref`s already resolved along this branch of the search, to guard against cycles\n\n#### Returns\n\n- boolean: True if a `dependencies` or `if` keyword exists below the root of the schema\n\n### schemaRequiresTrueValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nCheck to see if a `schema` specifies that a value must be true. This h\n\n","packages/docs/docs/api-reference/validator-ajv8.md":"# @rjsf/validator-ajv8 APIs\n\nIn RJSF version 6, the original, embedded AJV 6 validator implementation from earlier versions was removed in favor of the `@rjsf/validator-ajv8` package.\n`@rjsf/validator-ajv8` uses the AJV 8 package, including adding support for using precompiled validators.\nBelow are the exported API functions that are provided by this package.\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Types\n\nThere are a few Typescript types that are exported by `@rjsf/validator-ajv8` in support of the APIs.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ajv8/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional meta schemas the validator can access\n - `customFormats`: Additional custom format validators\n - `ajvOptionsOverrides`: Config overrides passed to the AJV constructor\n - `ajvFormatOptions`: Options for `ajv-formats`; pass `false` to disable format support entirely\n - `AjvClass`: The AJV class to construct (e.g. `Ajv2019`, `Ajv2020`)\n - `extenderFn`: A function called to extend the AJV instance (e.g. `ajvErrors()`)\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n\n#### Returns\n\n- AJV8Validator<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nThe function used to compile a schema into an output file in the form that allows it to be used as a precompiled validator.\nThe main reasons for using a precompiled validator is reducing code size, improving validation speed and, most importantly, avoiding dynamic code compilation when prohibited by a browser's Content Security Policy.\nFor more information about AJV code compilation see: https://ajv.js.org/standalone.html\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validators functions\n- output: string - The name of the file into which the precompiled validator functions will be generated\n- [options={}]: CustomValidatorOptionsType - The set of `CustomValidatorOptionsType` information used to alter the AJV validator used for compiling the schema. They are the same options that are passed to the `customizeValidator()` function in order to modify the behavior of the regular AJV-based validator.\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n","packages/docs/docs/api-reference/validator-ata.md":"# @rjsf/validator-ata APIs\n\n`@rjsf/validator-ata` is an alternative to `@rjsf/validator-ajv8`, backed by [`ata-validator`](https://www.npmjs.com/package/ata-validator) instead of AJV.\nThe public surface mirrors the AJV package, so swapping the import is enough for the form to keep working: `customizeValidator()`, `ValidatorType`, custom formats, `transformErrors`, `customValidate`, and `suppressDuplicateFiltering` all behave the same.\n\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options (`AjvClass`, `ajvFormatOptions`, `ajvOptionsOverrides`) are not accepted. The closest equivalent is `ataOptionsOverrides`, which is spread on top of the default `ata-validator` options.\n- The `ata-validator` format set is always installed, so there is no opt-in flag for formats.\n- `ata-validator`'s error params are frozen, so the pre-quote pass that `validator-ajv8` runs for `ajv-i18n` is unnecessary. Localizers that mutate `message` in place still work as-is.\n- Precompiled validators (`compileSchemaValidators` / `createPrecompiledValidator`) are supported. `ata-validator`'s `bundleStandalone` output is adapted into the validator function map the precompiled consumer expects. Error output matches the non-precompiled validator, including per-field errors for schema-valued `additionalProperties` (with `ata-validator` `>= 0.17.4`); an invalid `anyOf` reports a single error on the field, the same as the runtime path. One constraint carries over from the standalone (AOT) path: custom formats must be a RegExp or pre-anchored string pattern, since a function checker cannot be serialized into the bundle and is rejected at compile time.\n\n## Types\n\nThere are a few TypeScript types that are exported by `@rjsf/validator-ata` in support of the APIs. These types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ata/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional schemas registered for cross-schema `$ref` resolution\n - `customFormats`: Custom format checkers; values can be functions, RegExps, or pre-anchored regex source strings\n - `ataOptionsOverrides`: Overrides spread on top of the default `ata-validator` options (e.g. `coerceTypes`, `removeAdditional`, `verbose`, `abortEarly`)\n - `extenderFn`: A function called against the constructed `Validator` instance for additional setup; returning a different instance is supported\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of `ata-validator` `ValidationError`s after running the form validation\n\n#### Returns\n\n- ValidatorType<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nCompiles a schema into an output file that can be loaded later as a precompiled validator.\nThe main reasons for using a precompiled validator are reducing code size, improving startup time by skipping schema compilation, and avoiding dynamic code generation when a browser's Content Security Policy forbids it.\nUnder the hood this calls `ata-validator`'s `bundleStandalone` and wraps the result in the map the precompiled consumer expects.\n\n> NOTE: Custom formats passed through `options.customFormats` must be a RegExp or a pre-anchored string pattern. A function checker cannot be serialized into the standalone bundle and is rejected at compile time.\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validator functions\n- output: string - The name of the file into which the precompiled validator functions are generated\n- [options={}]: CustomValidatorOptionsType - The `CustomValidatorOptionsType` options accepted by `customizeValidator()`, with limits: `extenderFn`, extra schemas without an `$id` and the `ataOptionsOverrides` keys `coerceTypes`, `removeAdditional` and `keywords` cannot be carried into the generated file and are ignored with a warning, the generated file never fills in `default` values, and `suppressDuplicateFiltering` belongs to `createPrecompiledValidator()`. See the precompiled section of `usage/validation.md`\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize the list of `ata-validator` `ValidationError`s after running the form validation\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for the full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n","packages/docs/docs/api-reference/validator-cfworker.md":"# @rjsf/validator-cfworker APIs\n\n`@rjsf/validator-cfworker` is an additional, eval-free validator option for CSP-constrained applications. It is backed by [`@cfworker/json-schema`](https://github.com/cfworker/cfworker/tree/main/packages/json-schema), interprets schemas without `eval` or `new Function`, and defaults to JSON Schema draft 2020-12.\n\nIt is not an AJV replacement. See the package [README](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/validator-cfworker) for the unsupported-keyword matrix and current upstream-state notes.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options and extensions such as `AjvClass`, `$data`, `discriminator`, and `ajv-errors`'s `errorMessage` are not supported.\n- `$dynamicRef` and `$dynamicAnchor` are not currently supported by the underlying engine.\n- Error messages differ from AJV, and there is no `ajv-i18n` localizer equivalent. Use `transformErrors` to customize messages.\n- Precompiled-validator mode is not part of this initial package.\n- The wrapper normalizes `undefined` form-data values before validation and caches validators by schema id to make repeated RJSF `isValid()` calls safe.\n\n## Types\n\nThe package exports `CustomValidatorOptionsType`, `CFWorkerValidationError`, `CFWorkerFormatChecker`, and `SuppressDuplicateFilteringType` from [`src/types.ts`](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-cfworker/src/types.ts).\n\n## APIs\n\n### `customizeValidator()`\n\nCreates a `ValidatorType` backed by `@cfworker/json-schema`.\n\n#### Parameters\n\n- `options.additionalMetaSchemas`: additional schemas registered for cross-schema `$ref` resolution\n- `options.customFormats`: format checkers expressed as functions, regular expressions, or regular-expression source strings\n- `options.draft`: `'4'`, `'7'`, `'2019-09'`, or `'2020-12'`; defaults to `'2020-12'`\n- `options.extenderFn`: hook called with every newly constructed engine validator\n- `options.shortCircuit`: stop at the first error; defaults to `false`\n- `options.suppressDuplicateFiltering`: `'none'`, `'anyOf'`, `'oneOf'`, or `'all'`\n\n#### Returns\n\n- `ValidatorType`: the customized validator implementation\n\n```ts\nimport { customizeValidator } from '@rjsf/validator-cfworker';\n\nconst validator = customizeValidator({\n draft: '2020-12',\n customFormats: { slug: /^[a-z0-9-]+$/ },\n});\n```\n","packages/docs/docs/contributing.md":"# Contributing\n\n## Development server\n\nWe are using `Vite` to power our `playground`, which caches all the built `@rjsf/*` distributions.\nIn order to test the `playground` locally after a new clone or fresh pull from `main`, run the following from the root directory of the monorepo:\n\n```bash\npnpm install\npnpm run build\ncd packages/playground\npnpm start\n```\n\nThis will start the live development server showcasing components at [localhost:8080](http://localhost:8080).\n\nWhenever you make changes to source code, stop the running playground and return to the root directory and rerun `pnpm run build`.\nThanks to `nx` caching, this should only rebuild what is necessary.\nAfter the build is complete, return to the root of the `playground` and restart the server via `pnpm start`.\n\n### First time step\n\nIf this is the first time you have cloned the repo, run the `pnpm run prepare` script that will set up `husky` to provide a git precommit hook that will format and lint any code you have added to a PR.\n\n### Optional development process\n\nWith the large number of packages, sometimes running `pnpm run build` or `pnpm start` from the root directory will overwhelm an underpowered computer.\nIf that is the situation for you, you can instead use `pnpm run build-serial` to build the packages one at a time instead of all at once.\nAlso, if you are only working on one package, you can `pnpm run build` and `pnpm run test` from within the subdirectory.\nFinally, you can simply `pnpm start` inside of the `playground` directory to test changes if you have already built all of your packages, without needing to watch all of the packages via the root directory `pnpm start`.\n\n### Troubleshooting build failures\n\nSometimes your local builds fail and you can't figure out why. This is most likely to happen after rebase to `main` due\nto `package.json` changes upstream. There are two commands you can use to (hopefully) get your environment back to a\nworking state. Try running the following two commands:\n\n```bash\npnpm run refresh-node-modules\npnpm run clean-build\n```\n\nThe first command will delete all of the `node_modules` directories in the environment and then rerun `pnpm install`.\nThe second command cleans up the typescript build cache files before retrying the build.\n\nWorst case scenario when neither of those commands work, try running `pnpm run nuke-build-env` and then rerun the two commands.\n\n## Cloud builds\n\nWhen building in environments with limited memory, such as Netlify, it's recommended to use `pnpm run build-serial` that builds the packages serially.\n\n## Coding style\n\nAll the JavaScript/Typescript code in this project conforms to the [prettier](https://github.com/prettier/prettier) coding style.\nCode is automatically prettified upon commit using precommit hooks, assuming you followed the `First time step` above.\n\nYou can also run `pnpm cs-format` within any package directory you are changing.\n\n## Documentation\n\nWe use [Docusaurus](https://docusaurus.io/) to build our documentation. To run documentation locally, run:\n\n```bash\ncd packages/docs\npnpm start\n```\n\nDocumentation will be served on [localhost:3000](http://localhost:3000).\n\n## Tests\n\nYou can run all tests from the root directory OR from `packages` subdirectory using the following command:\n\n```bash\npnpm run test\n```\n\n### Snapshot testing\n\nAll the themes, including `core` use snapshot testing (NOTE: `core` also has extensive non-snapshot tests).\nThe source-code of these snapshot tests reside in the `core` package in the `testSnap` directory and are shared with all the themes.\nIn order to support the various themes, the code for the tests are actually functions that take two parameters:\n\n- `Form`: ComponentType<FormProps> - The component from the theme implementation\n- `[customOptions]`: \\{ [key: string]: TestRendererOptions } - an optional map of `react-test-renderer` `TestRendererOptions` implementations that some themes need to be able properly run\n\nThere are functions in the `testSnap` directory: `arrayTests`, `formTests` and `objectTests`, each with its own definition of `customOptions`\n\nEach theme will basically run these functions by creating a `Xxx.test.tsx` file (where `Xxx` is `Array`, `Form` or `Object`) that looks like the following:\n\n```tsx\nimport { arrayTests } from '@rjsf/snapshot-tests'; // OR\n// import { formTests } from '@rjsf/snapshot-tests';\n// import { objectTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\narrayTests(Form); // OR\n// formTests(Form);\n// objectTests(Form);\n```\n\nAnytime you add a new feature, be sure to update the appropriate `xxxTests()` function in the `testSnap` directory and do `pnpm run test` from the root directory to update all the snapshots.\nIf you add a theme-only feature, it is ok to update the appropriate `Xxx.test.tsx` file to add (or update) the theme-specific `describe()` block.\nFor example:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { arrayTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\nformTests(Form);\n\ndescribe('Theme specific tests', () => {\n it('test a theme-specific option', () => {\n const schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n };\n const uiSchema: UiSchema = {\n // Enable the theme specific feature\n };\n const tree = renderer.create().toJSON();\n expect(tree).toMatchSnapshot();\n });\n});\n```\n\nSee the `antd` `Form.test.tsx` for a specific example of this.\n\n### Code coverage\n\nCode coverage reports are currently available only for the `@rjsf/core` theme package.\nThey are generated using [nyc](https://github.com/istanbuljs/nyc) each time the `pnpm test-coverage` script is run.\nThe full report can be seen by opening `./coverage/lcov-report/index.html`.\n\n#### Utils and validator-ajv8 code coverage\n\n100% code coverage is required by the `@rjsf/utils` and `@rjsf/validator-ajv8` tests.\nIf you make changes to those libraries, you will have to maintain that coverage, otherwise the tests will fail.\n\n> NOTE: All three of these directories share the same tests for verifying `validator` based APIs. See the documentation in the `getTestValidator()` functions for more information.\n\n## Releasing\n\nTo release, go to the main branch (NOT a fork) and then create a new branch with the version number (with an `rc` prefix instead of `v`).\nFor instance if you are about to create the new `6.100.10` branch, then you would run the following commands:\n\n```bash\ngit checkout -b rc6.100.10\npnpm exec nx release version --git-tag\ngit commit -m \"Releasing 6.100.10\"\ngit push\npnpm run update-version-tags\n```\n\nMake sure you use [semver](https://semver.org/) for version numbering when selecting the version.\nThe `pnpm exec nx release version --git-tag` command will update the `package*.json` files and create a new version tag.\nCommitting and pushing the branch will allow you to create the PR on GitHub.\nThe `pnpm run update-version-tags` will push the tags up to GitHub.\n\nThen, make a PR to main. Merge the PR into main -- make sure you use \"merge commit\", not squash and merge, so that\nthe original commit where the tag was based on is still present in the main branch.\n\nThen, create a release in the GitHub \"Releases\" tab, select the new tag that you have added,\nand add a description of the changes in the new release. You can copy\nthe latest changelog entry in `CHANGELOG.md` to make the release notes, and update as necessary.\n\nThis will trigger a GitHub Actions pipeline that will build and publish all packages to npm.\n\nThe package is published through an automation token belonging to the\n[rjsf-bot](https://www.npmjs.com/~rjsf-bot) user on npm. This token\nis stored as the `NPM_TOKEN` secret on GitHub Actions.\n\n### Releasing docs\n\nDocs are automatically published to GitHub Pages when the `main` branch is updated.\n\nWe are currently in the process of automatically configuring versionable documentation on our new docs site.\n\n### Releasing the playground\n\nThe playground automatically gets deployed from GitHub Pages.\n\nIf you need to manually publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/), though, run:\n\n```bash\ncd packages/playground\npnpm run publish-to-gh-pages\n```\n\n### Releasing a new package\n\nPublishing a new `@rjsf/*` package requires additional setup. The package must first be published locally, then in the NPM web app, you must set up \"Trusted Publishing\" so future releases can be published via GitHub Actions. The steps to accomplish this are:\n\n1. Create the new release as described above. Existing packages will be published, but the jobs to publish new package(s) will fail.\n2. Locally, check out the release tag (e.g. `git checkout v6.8.0`). You may need to `git fetch --tags`. Make sure your `git status` is clean.\n3. `cd packages/new-package`\n4. `pnpm login` (login to an account with RJSF publishing privileges)\n5. `pnpm publish --no-git-checks`.\n\nThe new package will be released. Then, set up Trusted Publishing:\n\n1. Navigate to the new package in NPM (e.g. `https://www.npmjs.com/package/@rjsf/new-package`)\n2. Go to Settings -> Trusted Publisher -> GitHub Actions\n3. Set up the fields to match an existing package (e.g. look at `@rjsf/core`).\n 1. Organization or user: `rjsf-team`\n 2. Repository: `react-jsonschema-form`\n 3. Workflow filename: `release.yml`\n 4. Allow `npm publish`\n","packages/docs/docs/json-schema/arrays.md":"# Arrays\n\nArrays are defined with a type equal to `array`, and array items' schemas are specified in the `items` keyword.\n\n## Arrays of a single field\n\nArrays of a single field type can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Arrays of objects\n\nArrays of objects can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema = {\n items: {\n 'ui:widget': 'textarea',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n> NOTE: The `items` property in `uiSchema` can also accept a function for dynamic UI schema generation based on array item data. See [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) for advanced use cases.\n\n## The `additionalItems` keyword\n\nThe `additionalItems` keyword allows the user to add additional items of a given schema. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n additionalItems: {\n type: 'boolean',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Array item uiSchema options\n\nAny of these options can be set globally if they are contained within the `ui:globalOptions` block.\nThey can also be overridden on a per-field basis inside a `ui:options` block as shown below.\n\n### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n orderable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n addable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `copyable` option\n\nA copy button is **NOT** shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance.\nYou can turn this **ON** with the `copyable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n copyable: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n removable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Multiple-choice list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. There are two alternative widgets for picking multiple elements from a list of choices. Typically, this applies when a schema has an `enum` list for the `items` property of an `array` field, and the `uniqueItems` property set to `true`.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Custom widgets\n\nIn addition to [ArrayFieldTemplate](../advanced-customization/custom-templates.md#arrayfieldtemplate) you use your own widget by providing it to the uiSchema with the property of `ui:widget`.\n\nExample:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSelectComponent = (props) => {\n return (\n \n );\n};\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'CustomSelect',\n};\n\nconst widgets = {\n CustomSelect: CustomSelectComponent,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## Specifying the minimum or maximum number of items\n\nNote that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also specify the maximum number of items in an array using the `maxItems` property.\n\n## Inline checkboxes\n\nBy default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n 'ui:options': {\n inline: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/json-schema/definitions.md":"# Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which allows you to re-use parts of your schema:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n state: { type: 'string' },\n },\n required: ['street_address', 'city', 'state'],\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nNote that this library only supports local definition referencing. The value in the `$ref` keyword should be a [JSON Pointer](https://tools.ietf.org/html/rfc6901) in URI fragment identifier format.\n\n## uiSchema for Schema Definitions\n\nTo customize the UI for schemas referenced via `$ref`, use the `ui:definitions` property in your uiSchema. This works for both reused and recursive schemas.\n\nSee [ui:definitions](../api-reference/uiSchema.md#uidefinitions) for full details and more examples.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' },\n },\n },\n },\n },\n type: 'object',\n properties: {\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Node name' },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/json-schema/dependencies.md":"# Dependencies\n\nreact-jsonschema-form supports the `dependencies` keyword from an earlier draft of JSON Schema (note that this is not part of the latest JSON Schema spec, though). Dependencies can be used to create dynamic schemas that change fields based on what data is entered.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined, making them both required if either is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n billing_address: ['credit_card'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))_\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: {\n properties: {\n billing_address: { type: 'string' },\n },\n required: ['billing_address'],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))_\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Person',\n type: 'object',\n properties: {\n 'Do you have any pets?': {\n type: 'string',\n enum: ['No', 'Yes: One', 'Yes: More than one'],\n default: 'No',\n },\n },\n required: ['Do you have any pets?'],\n dependencies: {\n 'Do you have any pets?': {\n oneOf: [\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['No'],\n },\n },\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: One'],\n },\n 'How old is your pet?': {\n type: 'number',\n },\n },\n required: ['How old is your pet?'],\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: More than one'],\n },\n 'Do you want to get rid of any?': {\n type: 'boolean',\n },\n },\n required: ['Do you want to get rid of any?'],\n },\n ],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.\n","packages/docs/docs/json-schema/objects.md":"# Objects\n\n## Object properties\n\nObjects are defined with a type equal to `object` and properties specified in the `properties` keyword.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Required properties\n\nYou can specify which properties are required using the `required` attribute:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n required: ['name'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Specifying property order\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'string' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', 'foo'],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', '*'],\n};\n```\n\n## Additional and pattern properties\n\nThe `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n additionalProperties: {\n type: 'number',\n enum: [1, 2, 3],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this way, an add button for new properties is shown by default.\n\nYou can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.\n\nThe `patternProperties` keyword allows the user to add properties with names that match one or more of the specified regular expressions\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n patternProperties: {\n '^foo+$': {\n type: 'number',\n enum: [1, 2, 3],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nAlso in this case, an add button for new properties is shown by default.\n\n### `expandable` option\n\nYou can turn support for `additionalProperties` and `patternProperties` off with the `expandable` option in `uiSchema`:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n expandable: false,\n },\n};\n```\n","packages/docs/docs/json-schema/oneof.md":"# oneOf, anyOf, and allOf\n\nreact-jsonschema-form supports custom widgets for oneOf, anyOf, and allOf.\n\n- A schema with `oneOf` is valid if _exactly one_ of the subschemas is valid.\n- A schema with `anyOf` is valid if _at least one_ of the subschemas is valid.\n- A schema with `allOf` is valid if _all_ of the subschemas are valid.\n\n## oneOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n ipsum: {\n type: 'string',\n },\n },\n required: ['ipsum'],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## anyOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n lorem: {\n type: 'string',\n },\n ipsum: {\n type: 'string',\n },\n },\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## allOf\n\nWhen `allOf` is specified in a schema, react-jsonschema-form uses the [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) library to merge the specified subschemas to create a combined subschema that is valid. For example, the below schema evaluates to a combined subschema of `{type: \"boolean\"}`:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Field',\n allOf: [\n {\n type: ['string', 'boolean'],\n },\n {\n type: 'boolean',\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/json-schema/single.md":"# Single fields\n\nThe simplest example of a JSON Schema contains only a single field. The field type is determined by the `type` parameter.\n\n## Field types\n\nThe base field types in JSON Schema include:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `null`\n\nHere is an example of a string field:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Titles and descriptions\n\nFields can have titles and descriptions specified by the `title` keyword in the schema and the `description` keyword in the schema, respectively. These two can also be overridden by the `ui:title` and `ui:description` keywords in the uiSchema.\n\nDescription can render markdown. This feature is disabled by default. It needs to be enabled by the `ui:enableMarkdownInDescription` keyword and setting to `true`. Read more about markdown options in the `markdown-to-jsx` official [docs](https://markdown-to-jsx.quantizor.dev/).\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My form',\n description: 'My description',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Deprecated fields\n\nThe JSON Schema `deprecated` keyword can be used to indicate that a field is no longer supported.\n\nThe `deprecated` keyword is a JSON Schema Draft 2019-09 feature. You may need to configure your schema validator to properly recognize it. See the [Validation](../usage/validation.md#ajvclass) documentation for more details.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n deprecated: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, RJSF will append ` (deprecated)` to the field label. You can customize this behavior using the `deprecatedHandling` option in the uiSchema. See [deprecatedHandling](../api-reference/uiSchema.md#deprecatedhandling) for more details.\n\n## Enumerated values\n\nAll base schema types support the `enum` attribute, which restricts the user to select among a list of options. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom labels for `enum` fields\n\nJSON Schema supports the following approaches to enumerations using `oneOf`/`anyOf`; react-jsonschema-form supports it as well.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n anyOf: [\n {\n type: 'number',\n title: 'one',\n enum: [1],\n },\n {\n type: 'number',\n title: 'two',\n enum: [2],\n },\n {\n type: 'number',\n title: 'three',\n enum: [3],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n oneOf: [\n { const: 1, title: 'one' },\n { const: 2, title: 'two' },\n { const: 3, title: 'three' },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you use `enum` in your JSON Schema, you may instead specify `ui:enumNames` in your `uiSchema`, which RJSF can use to label an enumeration. `ui:enumNames` can be an array (matched by index) or a map (matched by value):\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Ordering `enum` fields\n\nTo control the display order of enum options, use `ui:enumOrder`. Use `'*'` to represent all remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Disabled attribute for `enum` fields\n\nTo disable an option, use the `ui:enumDisabled` property in the uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n enum: [true, false],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': [true],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Nullable types\n\nJSON Schema supports specifying multiple types in an array; however, react-jsonschema-form only supports a restricted subset of this -- nullable types, in which an element is either a given type or equal to null.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: ['string', 'null'],\n};\n\nrender(, document.getElementById('app'));\n```\n","packages/docs/docs/migration-guides/v2.x upgrade guide.md":"# 2.x Upgrade Guide\n\n## Changes from v1 -> v2\n\n### Breaking changes\n\n- We now officially support the @rjsf/material-ui theme. We use a monorepo with Lerna and have published two packages (@rjsf/core and @rjsf/material-ui) with this version number. Note that react-jsonschema-form has been renamed to @rjsf/core ([#1642](https://github.com/rjsf-team/react-jsonschema-form/pull/1642))\n- Combine all themes into a single playground ([#1539](https://github.com/rjsf-team/react-jsonschema-form/pull/1539), [#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607), [#1623](https://github.com/rjsf-team/react-jsonschema-form/pull/1623))\n- Remove ui:order console warning about extraneous properties ([#1508](https://github.com/rjsf-team/react-jsonschema-form/pull/1508))\n- Capitalized Yes and No defaults ([#1395](https://github.com/rjsf-team/react-jsonschema-form/pull/1395))\n- Fix id of oneof and anyof select ([#1212](https://github.com/rjsf-team/react-jsonschema-form/pull/1212)). The oneof select id is now suffixed by \\_\\_oneof_select and the anyof select by \\_\\_anyof_select.\n- React 16+ is now a peer dependency ([#1408](https://github.com/rjsf-team/react-jsonschema-form/pull/1408))\n- We no longer actively support Node version < 8 ([#1462](https://github.com/rjsf-team/react-jsonschema-form/pull/1462))\n- Removed setState, setImmediate, safeRenderCompletion helpers/hacks ([#1454](https://github.com/rjsf-team/react-jsonschema-form/pull/1454), [#1720](https://github.com/rjsf-team/react-jsonschema-form/pull/1720))\n- Inject defaults in arrays ([#1499](https://github.com/rjsf-team/react-jsonschema-form/pull/1499))\n\n### Features\n\n- Add material-ui theme in the main repo ([#1420](https://github.com/rjsf-team/react-jsonschema-form/pull/1420)) (note: has not been fully integrated yet -- this will be fully integrated when we publish multiple packages with lerna - [#1501](https://github.com/rjsf-team/react-jsonschema-form/pull/1501))\n- Add extraErrors prop for async validation ([#1444](https://github.com/rjsf-team/react-jsonschema-form/pull/1444))\n- Add support for overriding UnsupportedField ([#1660](https://github.com/rjsf-team/react-jsonschema-form/pull/1660))\n\n### Fixes\n\n- Fix issue with false as formData on radio components ([#1438](https://github.com/rjsf-team/react-jsonschema-form/pull/1438))\n- Security patches ([#1458](https://github.com/rjsf-team/react-jsonschema-form/pull/1458), [#1459](https://github.com/rjsf-team/react-jsonschema-form/pull/1459))\n- Memo components in custom widgets and fields. ([#1447](https://github.com/rjsf-team/react-jsonschema-form/pull/1447))\n- Introduce Form autoComplete attribute and deprecate autocomplete ([#1483](https://github.com/rjsf-team/react-jsonschema-form/pull/1483))\n- Rewrite mergeSchemas to fix schema dependencies merging ([#1476](https://github.com/rjsf-team/react-jsonschema-form/pull/1476))\n- Update arrays correctly when changing index ([#1485](https://github.com/rjsf-team/react-jsonschema-form/pull/1485))\n- Update anyOf schema to correctly update items in an array ([#1491](https://github.com/rjsf-team/react-jsonschema-form/pull/1491))\n- Update schema to re-render when idschema changes ([#1493](https://github.com/rjsf-team/react-jsonschema-form/pull/1493))\n- Make sure BooleanField supports an overridable DescriptionField ([#1594](https://github.com/rjsf-team/react-jsonschema-form/pull/1594))\n- Export typings ([#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607))\n","packages/docs/docs/migration-guides/v3.x upgrade guide.md":"# 3.x Upgrade Guide\n\n## Breaking changes\n\n### Node support\n\nDropped support for Node 8, 9, 10. Minimum supported version of Node.js is now 12.\n\n### Dereferenced schemas for `anyOf`/`allOf` options\n\n`MultiSchemaField`'s `options` interface is different. Before, an option could include a `$ref`. Now, any option with a reference will be resolved/dereferenced when given as props for `MultiSchemaField`.\n\n### Help field IDs\n\nIDs for [Help fields](../api-reference/uiSchema.md#help) are now suffixed by `__help` so that the IDs are unique. Previously, their IDs would be nonexistent or the same as the fields that they were describing.\n\n### Bring your own polyfills\n\ncore-js@2 has been removed from @rjsf/core. See more about [the rationale here](https://github.com/rjsf-team/react-jsonschema-form/pull/2211#issue-563700810).\n\nIf you're using a framework like [Create React App](https://create-react-app.dev/docs/supported-browsers-features#supported-browsers), [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/browser-support/), [Next.js](https://nextjs.org/docs/basic-features/supported-browsers-features), or transpiling code through something like `@babel/preset-env`, polyfills are already included there and you won't have to do anything.\n\nIf you were directly depending on @rjsf/core's @babel/runtime pulling in core-js@2, just `npm install core-js` and using a side effectful import at the top of your entry point (`import 'core-js'`) might be enough.\n\nFor a slightly more elaborate setup, [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#how-does-it-work) is probably a good second choice.\n\nFrom `@babel/preset-env`'s docs\n\n> We leverage [`browserslist`, `compat-table`, and `electron-to-chromium`] to maintain mappings of which version of our supported target environments gained support of a JavaScript syntax or browser feature, as well as a mapping of those syntaxes and features to Babel transform plugins and core-js polyfills.\n","packages/docs/docs/migration-guides/v4.x upgrade guide.md":"# 4.x Upgrade Guide\n\n## Breaking changes\n\n### React version\n\nNo longer actively supporting React version < 16.3. The minimum supported version of React is now 16.3. [Discussion can be found here](https://github.com/rjsf-team/react-jsonschema-form/pull/2605#discussion_r792685354)\n\n### @rjsf/material-ui package - Minimum version of material-ui 4\n\nIf you are using the material-ui 4 theme, @material-ui/core and @material-ui/icons packages should be updated to the latest versions. The minimum versions supported for @material-ui/core and @material-ui/icons are 4.12.0 and 4.11.1 respectively. This change is required for [support for the material-ui version 5 theme](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/material-ui)\n","packages/docs/docs/migration-guides/v5.x upgrade guide.md":"# 5.x Upgrade Guide\n\n## Breaking changes\n\nThere were several significant **breaking changes** in RJSF version 5 that were necessary in order to support the following new features:\n\n- Schema validation was decoupled from `@rjsf/core` to resolve issue [#2693](https://github.com/rjsf-team/react-jsonschema-form/issues/2693). Additionally, in order to break a circular dependency in the validation refactor, the `@rjsf/core/utils.js` file was split out into its own `@rjsf/utils` package as was suggested in [#1655](https://github.com/rjsf-team/react-jsonschema-form/issues/1655).\n- The theme for Material UI version 5 (i.e. `@rjsf/mui`) was split out of the theme for version 4 (i.e. `@rjsf/material-ui`) to resolve the following issues: [#2762](https://github.com/rjsf-team/react-jsonschema-form/issues/2762), [#2858](https://github.com/rjsf-team/react-jsonschema-form/issues/2858), [#2905](https://github.com/rjsf-team/react-jsonschema-form/issues/2905), [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945)\n- As part of the fix for [#2526](https://github.com/rjsf-team/react-jsonschema-form/issues/2526) all the existing templates in the previous version were moved into a new `templates` dictionary, similar to how `widgets` and `fields` work. This `templates` dictionary was added to the `Registry` and also the `Form` props, replacing the `ArrayFieldTemplate`, `FieldTemplate`, `ObjectFieldTemplate` and `ErrorList` props. In addition, several of the `fields` and `widgets` based components were moved into the `templates` dictionary as they were more like templates than true `Field`s or `Widget`s. Also fixes [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945)\n- Fixed `anyOf` and `oneOf` getting incorrect, potentially duplicate ids when combined with array [#2197](https://github.com/rjsf-team/react-jsonschema-form/issues/2197)\n- `CheckboxesWidget`, `RadioWidget` and `SelectWidget` in all themes now use indexes into `enumOptions[]` rather than `option.value` to allow for objects in `enumOptions` - [#1494](https://github.com/rjsf-team/react-jsonschema-form/issues/1494)\n\n### Node support\n\nVersion 5 is dropping official support for Node 12 as it is no longer a [maintained version](https://nodejs.org/en/about/releases/).\nPlease use Node 18 when making any changes to `package.json` and `package-lock.json` files.\nAll PR and branch builds are running against Node 14, 16 and 18.\n\n### React version\n\nRJSF is no longer actively supporting React version < 16.14.x.\nReact 17 is officially supported on all the themes where the underlying theme library also supports React 17.\n\nUnfortunately, there is required work pending to properly support React 18, so use it at your own risk.\n\n### New packages\n\nThere are four new packages added in RJSF version 5:\n\n- `@rjsf/utils`: All of the [utility functions](../api-reference/utility-functions.md) previously imported from `@rjsf/core/utils` as well as the Typescript types for RJSF version 5.\n - The following new utility functions were added: `ariaDescribedByIds()`, `createSchemaUtils()`, `descriptionId()`, `enumOptionsDeselectValue()`, `enumOptionsIndexForValue()`, `enumOptionsIsSelected()`, `enumOptionsSelectValue()`, `enumOptionsValueForIndex()`, `errorId()`, `examplesId()`, `getClosestMatchingOption()`, `getFirstMatchingOption()`, `getInputProps()`, `helpId()`, `mergeValidationData()`, `optionId()`, `sanitizeDataForNewSchema()` and `titleId()`\n- `@rjsf/validator-ajv6`: The [ajv](https://github.com/ajv-validator/ajv)-v6-based validator refactored out of `@rjsf/core@4.x`, that implements the `ValidatorType` interface defined in `@rjsf/utils`.\n- `@rjsf/validator-ajv8`: The [ajv](https://github.com/ajv-validator/ajv)-v8-based validator that is an upgrade of the `@rjsf/validator-ajv6`, that implements the `ValidatorType` interface defined in `@rjsf/utils`. See the ajv 6 to 8 [migration guide](https://ajv.js.org/v6-to-v8-migration.html) for more information.\n- `@rjsf/mui`: Previously `@rjsf/material-ui/v5`, now provided as its own theme.\n\n### `id` BREAKING CHANGES\n\nIn many of the themes the `id`s for the `Title`, `Description` and `Examples` blocks were update to all have a consistent value of `xxx__title`, `xxx__description` and `xxx__examples`, respectively, where `xxx` is the id of the field.\nIn addition, some of the `id`s for various input values were updated to be consistent across themes or to fix small bugs.\nFor instance, the values for radio buttons in the `RadioWidget` and checkboxes in the `CheckboxesWidget` are of the form `xxx-${option.value}`, where `xxx` is the id of the field.\n\n### `enumOptions[]` widgets BREAKING CHANGES\n\nSchemas may have `enumOptions[]` where values are objects rather than primitive types. Examples of such schemas have been added to the playground. These schemas did not work in RJSF prior to v5.\nIn every theme, the `enumOptions[]` rendering widgets `CheckboxesWidget`, `RadioWidget` and `SelectWidget` previously used the `enumOptions[].value` to as the value used for the underlying `checkbox`, `radio` and `select.option` elements.\nNow, these `CheckboxesWidget`, `RadioWidget` and `SelectWidget` components use the index of the `enumOptions[]` in the list as the value for the underlying elements.\nIf you need to build a custom widget for this kind of `enumOptions`, there are a set of `enumOptionsXXX` functions in `@rjsf/utils` to support your implementation.\n\n### `@rjsf/core` BREAKING CHANGES\n\n#### Types\n\nIn version 4, RJSF exported all its types directly from `@rjsf/core`.\nIn version 5, only the types for the `Form` component and the `withTheme()` HOC are exported directly from `@rjsf/core`.\nAll the rest of the types for RJSF are now exported from the new `@rjsf/utils` package.\n\nNOTE: The types in `@rjsf/utils` have been improved significantly from those in version 4 and as a result may require you to fix your Typescript typings and add some casts.\n\nSome of the most notable changes are:\n\n- `RJSFSchema` has replaced the use of `JSON7Schema` for future compatibility reasons.\n - Currently `RJSFSchema` is simply an alias to `JSON7Schema` so this change is purely a naming one.\n - It is highly recommended to update your use of `JSON7Schema` with `RJSFSchema` so that when the RJSF begins supporting a newer JSON Schema version out-of-the-box, your code won't be affected.\n- `RJSFSchemaDefinition` has replaced the use of `JSONSchema7Definition` for the same reasons.\n\n- The use of the generic `T` (defaulting to `any`) for the `formData` type has been expanded to cover all type hierarchies that use `formData`.\n- `StrictRJSFSchema` and `RJSFSchema` have replaced the use of `JSON7Schema` for future compatibility reasons.\n - `RJSFSchema` is `StrictRJSFSchema` joined with the `GenericObjectType` (i.e. `{ [key: string]: any }`) to allow for additional syntax related to newer draft versions\n - All definitions of `schema` and `rootSchema` elements have been replaced with a generic that is defined as `S extends StrictRJSFSchema = RJSFSchema`\n - It is highly recommended to update your use of `JSON7Schema` with `RJSFSchema` since that is the default for the new generic used for `schema` and `rootSchema`\n- A new generic `F` (extending `FormContextType` defaulting to `any`) was added for the `formContext` type, and all types in the hierarchy that use `formContext` have had that generic added to them.\n- The new `CustomValidator`, `ErrorTransformer`, `ValidationData`, `ValidatorType` and `SchemaUtilsType` types were added to support the decoupling of the validation implementation.\n- The new `TemplatesType`, `ArrayFieldDescriptionProps`, `ArrayFieldTitleProps`, `UnsupportedFieldProps`, `IconButtonProps`, `SubmitButtonProps` and `UIOptionsBaseType` were added to support the consolidation (and expansion) of `templates` in the `Registry` and `Form`.\n- **BREAKING CHANGE** The `DescriptionField` and `TitleField` props were removed from the `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps` as they can now be derived from the `templates` or `uiSchema` via the new `getTemplate()` utility function.\n- **BREAKING CHANGE** The `fields` prop was removed from the `FieldTemplateProps` as you can simply use `registry.fields` instead.\n- **BREAKING CHANGE** The `showErrorList` prop was changed to accept `false`, `\"top\"` or `\"bottom\"`. `true` is no longer a valid value. The default value is `\"top\"`, which has identical behavior to the default value/`true` in v4.\n You can view all these [types](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts) on GitHub.\n\n#### Form props\n\nIn version 5, the `Form` component's two optional props `additionalMetaSchemas` and `customFormats` were replaced with the new, required `validator` prop, in order to support the decoupling of the validation implementation.\nThis new `validator` prop is expected to be an implementation of the `ValidatorType` interface.\nThe new `@rjsf/validator-ajv6` package contains the refactored implementation of the version 4 validator; It was provided for backwards compatibility with RJSF v4, and it is deprecated. \nThe new `@rjsf/validator-ajv8` package contains the refactored implementation of the version 4 validator, that has been converted to use the `Ajv 8` validator and has more capabilities than the `Ajv 6` one. See the [Ajv migration guide](https://ajv.js.org/v6-to-v8-migration.html) for more information.\n\nThere are two ways to use this new package to provide a `validator` for a `Form`.\nFirst, you can simply import the default validator from the package and pass it to a `Form`.\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nSecond, if you were actually providing one (or both) of the removed optional props to your `Form`, you can continue using them by creating a customized validator.\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport { customizeValidator, CustomValidatorOptionsType } from \"@rjsf/validator-ajv8\";\n\n// Your schema, additionalMetaSchemas and/or customFormats\nconst schema: RJSFSchema = { ... };\nconst additionalMetaSchemas: CustomValidatorOptionsType['additionalMetaSchemas'] = [{ ... }];\nconst customFormats: CustomValidatorOptionsType['customFormats'] = { ... };\n\nconst validator = customizeValidator({ additionalMetaSchemas, customFormats });\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n##### `formElement` converted to RefObject\n\nThe `formElement` variable that stored the ref to the inner `` was converted from a simple variable assigned via a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) (ala React < 16.3) to a React.RefObject created using the `React.createRef()` API.\nAs a result, if you were using the `formElement` ref, you will need to update it to use `formElement.current`:\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\nconst formRef = React.createRef();\n\nrender((\n \n), document.getElementById(\"app\"));\n\n...\n// Previously, to reset the form one would have called:\n// formRef.current.formElement.reset();\n// Now one calls:\nformRef.current.formElement.current.reset();\n```\n\n##### `validate` prop renamed\n\nAdditionally, in version 5, the `validate` prop on `Form` was renamed to `customValidate` to avoid confusion with the new `validator` prop.\n\n##### `fields` prop changes\n\nIn previous versions, it was possible to provide an override to the `DescriptionField`, `TitleField` and/or `UnsupportedField` components by providing a custom implementation in the `fields` prop on the `Form`.\nSince these components do not actually support the `FieldProps` interface, they were moved into the `templates` dictionary instead.\nIf you were previously overriding any (or all) of these components, you can override them now via the `templates` prop on `Form` instead:\n\n```tsx\nimport { DescriptionFieldProps, RJSFSchema, TitleFieldProps } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom fields\nconst CustomDescriptionField = (props: DescriptionFieldProps) => { ... };\nconst CustomTitleField = (props: TitleFieldProps) => { ... };\nconst CustomUnsupportedField = (props: ObjectFieldTemplateProps) => { ...\n};\n\nconst templates: Partial = {\n DescriptionFieldTemplate: CustomDescriptionField,\n TitleFieldTemplate: CustomTitleField,\n UnsupportedFieldTemplate: CustomUnsupportedField,\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n##### new `templates` prop\n\nAdditionally, in version 5, the `ArrayFieldTemplate`, `FieldTemplate`, `ObjectFieldTemplate` and `ErrorList` props were replaced with the `templates` prop as part of the `TemplatesType` consolidation.\nIf you were previously overriding any (or all) of these templates, you can simply consolidate them into the new `templates` prop on `Form` instead:\n\n```tsx\nimport { ArrayFieldTemplateProps, ErrorListProps, FieldTemplateProps, ObjectFieldTemplateProps, RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom templates\nconst CustomArrayFieldTemplate = (props: ArrayFieldTemplateProps) => { ... };\nconst CustomFieldTemplate = (props: FieldTemplateProps) => { ... };\nconst CustomObjectFieldTemplate = (props: ObjectFieldTemplateProps) => { ... };\nconst CustomErrorField = (props: ErrorListProps) => { ... };\n\nconst templates: Partial = {\n ArrayFieldTemplate: CustomArrayFieldTemplate,\n FieldTemplate: CustomFieldTemplate,\n ObjectFieldTemplate: CustomObjectFieldTemplate,\n ErrorFieldTemplate: CustomErrorField,\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nNOTE: In version 5, the `ArrayField` implementation was refactored to add 3 additional templates for presenting arrays along with the `ArrayFieldTemplate`.\nIf you were updating the `ArrayFieldTemplate` to modify just a subset of the UI, it may be easier for you to implement one of the other new templates instead.\nSee the [Custom Templates](../advanced-customization/custom-templates.md) documentation for more details.\n\n##### `widgets` prop change\n\nIn the previous version, it was possible to provide an override to the `SubmitButton` component by providing a custom implementation in the `widgets` prop on the `Form`.\nSince this component only requires a tiny fraction of the `WidgetProps` interface, it was moved into the `templates.ButtonTemplates` dictionary instead with its own, reduced set of props.\nIf you were previously overriding this component, you can override it now via the `templates` prop on `Form` instead:\n\n```tsx\nimport { RJSFSchema, SubmitButtonProps } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom button\nconst CustomSubmitButton = (props: SubmitButtonProps) => { ...\n};\n\nconst templates: Partial = {\n ButtonTemplates: {\n SubmitButton: CustomSubmitButton,\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n#### utils.js\n\nIn version 5, all the utility functions that were previously accessed via `import { utils } from '@rjsf/core';` are now available via `import utils from '@rjsf/utils';`.\nBecause of the decoupling of validation from `@rjsf/core` there is a breaking change for all the [validator-based utility functions](../api-reference/utility-functions.md#validator-based-utility-functions), since they now require an additional `ValidatorType` parameter.\nMore over, one previously exported function `resolveSchema()` is no longer exposed in the `@rjsf/utils`, so use `retrieveSchema()` instead.\nFinally, the function `getMatchingOption()` has been deprecated in favor of `getFirstMatchingOption()`.\n\nIf you have built custom fields or widgets that utilized any of these breaking-change functions, don't worry, there is a quick and easy solution for you.\nThe `registry` has a breaking-change which removes the previously deprecated `definitions` property while adding the new `schemaUtils` property.\nThis new `registry.schemaUtils` property implements the `SchemaUtilsType` interface, which allows you to call a version of each of these breaking-change functions without the need for passing either a `validator` or `rootSchema`.\nBecause all fields and widgets are guaranteed to be passed the `registry` as a prop, if your custom field/widget happens to use either the `registry.definitions` object or a breaking-change validator-based utility function you make the following changes:\n\n```tsx\nimport { RJSFSchema, FieldProps } from '@rjsf/utils';\n\nfunction YourField(props: FieldProps) {\n const { registry } = props;\n// Change `registry.definitions` to `registry.rootSchema.definitions`\n// const { definitions } = registry; <- version 4\n const { rootSchema } = registry;\n const { definitions } = rootSchema;\n...\n}\n```\n\n```tsx\n// Change breaking-change function to schemaUtils instead, otherwise import from @rjsf/utils\n// import { utils } from '@rjsf/core'; <- version 4\n// const { isMultiSelect, resolveSchema, getUiOptions } = utils; <- version 4\nimport { RJSFSchema, WidgetProps, getUiOptions } from '@rjsf/utils';\n\nfunction YourWidget(props: WidgetProps) {\n const { registry, uiSchema } = props;\n const { schemaUtils } = registry;\n// const matchingOption = getMatchingOption({}, options, rootSchema); <- version 4\n// const isMultiSelect = isMultiSelect(schema, rootSchema); <- version 4\n// const newSchema = resolveSchema(schema, formData, rootSchema); <- version 4\n const matchingOption = schemaUtils.getFirstMatchingOption({}, options);\n const isMultiSelect = schemaUtils.isMultiSelect(schema);\n const newSchema: RJSFSchema = schemaUtils.retrieveSchema(schema, formData);\n const options = getUiOptions(uiSchema);\n\n...\n}\n```\n\n#### validator.js\n\nBecause of the decoupling of validation from `@rjsf/core` this file was refactored into its own `@rjsf/validator-ajv8` package.\nDuring that refactor a few **breaking changes** were made to how it works related to custom validation and `ErrorSchema` conversion.\n\n##### toErrorList param changed\n\nIn previous versions, the `toErrorList()` function used to take a `fieldName` string defaulted to `root`, and used it to format the `stack` message.\nIn version 5, `fieldName` was changed to `fieldPath` string array defaulted to an empty array, and is used to recursively add the field name to the errors as the `property` object along with the raw `message`.\nThe result is that if you had an `ErrorSchema` that looks like:\n\n```tsx\nconst errorSchema: ErrorSchema = {\n __errors: ['error message 1'],\n password: { __errors: 'passwords do not match' },\n};\n```\n\nThe returned result from calling `toErrorList(errorSchema)` has changed as follows:\n\n```tsx\n// version 4 result\n[{ stack: 'root: error message 1' }, { stack: 'password: passwords do not match' }][\n // version 5 result\n ({ property: '.', message: 'error message 1', stack: '. error message 1' },\n {\n property: '.password',\n message: 'passwords do not match',\n stack: '.password passwords do not match',\n })\n];\n```\n\n##### Custom validation and extraErrors\n\nIn previous versions, when using a custom validator on the `Form`, any errors that were generated were inconsistently inserted into the validations `errors` list.\nIn addition, there was an [issue](https://github.com/rjsf-team/react-jsonschema-form/issues/1596) where the non-`stack` AJV error information was lost when custom validation generated errors.\nThis issue has been fixed.\nAlso, when `extraErrors` were provided, they were being inconsistently inserted into the `errors` list and the non-`stack` AJV error information was lost.\nIn version 5, all of these errors will be consistently appended onto the end of the validation `errors` list, and the additional AJV error information is maintained.\n\nIn other words, if custom validation or `extraErrors` produced the following `ErrorSchema`:\n\n```tsx\n{\n __errors: [ \"Please correct your password\"],\n password2: { __errors: \"passwords do not match\" }\n}\n```\n\nAnd the AJV validation produced the following `ErrorSchema`:\n\n```tsx\n{\n __errors: [\n {\n message: 'should NOT be shorter than 3 characters',\n name: 'minLength',\n params: { limit: 3 },\n property: '.password2',\n schemaPath: '#/properties/password2/minLength',\n stack: '.password2 should NOT be shorter than 3 characters',\n },\n ];\n}\n```\n\nThe resulting `errors` list has changed as follows:\n\n```tsx\n// version 4\n[\n { stack: 'root: Please correct your password' },\n { stack: 'password2: passwords do not match' },\n { stack: 'password2: should NOT be shorter than 3 characters' },\n][\n // version 5\n ({\n message: 'should NOT be shorter than 3 characters',\n name: 'minLength',\n params: { limit: 3 },\n property: '.password2',\n schemaPath: '#/properties/password2/minLength',\n stack: '.password2 should NOT be shorter than 3 characters',\n },\n {\n property: '.',\n message: 'Please correct your password',\n stack: '. Please correct your password',\n },\n {\n property: '.',\n message: 'passwords do not match',\n stack: '.password2 passwords do not match',\n })\n];\n```\n\n#### Generate correct ids when arrays are combined with `anyOf`/`oneOf`\n\nIn v4, with arrays inside `anyOf` or `oneOf`, the parent name was not used to generate ids.\nFor example, given a schema such as:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"items\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"anyOf\": [\n {\n \"properties\": {\n \"foo\": {\n \"type\": \"string\"\n }\n }\n },\n {\n \"properties\": {\n \"bar\": {\n \"type\": \"string\"\n }\n }\n }\n ]\n }\n }\n }\n}\n```\n\nWe would get fields with id `root_foo` and `root_bar`.\nAs you can imagine, we could end up with duplicated ids if there's actually a `foo` or a `bar` in the root of the schema.\n\nFrom v5, the child fields will correctly use the parent id when generating its own id, generating ids such as `root_items_0_foo`.\n\n#### Deprecations added in v5\n\n##### getMatchingOption()\n\nThe utility function `getMatchingOption()` was deprecated in favor of the more aptly named `getFirstMatchingOption()` which has the exact same implementation.\n\n##### Non-standard `enumNames` property\n\n`enumNames` is a non-standard JSON Schema field that was deprecated in version 5.\n`enumNames` could be included in the schema to apply labels that differed from an enumeration value.\nThis behavior can still be accomplished with `oneOf` or `anyOf` containing `const` values, so `enumNames` support will be removed from a future major version of RJSF.\nFor more information, see [#532](https://github.com/rjsf-team/react-jsonschema-form/issues/532).\n\n##### uiSchema.classNames\n\nIn versions previous to 5, `uiSchema.classNames` was the only property that did not require the `ui:` prefix.\nAdditionally, it did not support being added into the `ui:options` object.\nThis was fixed in version 5 to be consistent with all the other properties in the `uiSchema`, so the `uiSchema.classNames` support may be removed from a future major version of RJSF.\n\nIf you are using `classNames` as follows, simply add the `ui:` prefix to it to remove the deprecation warning that will be displayed for each `uiSchema.classNames` you have:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\n// This uiSchema will log a deprecation warning to the console\nconst uiSchemaLog: UiSchema = {\n title: {\n classNames: 'myClass',\n },\n};\n// This uiSchema will not\nconst uiSchemaNoLog: UiSchema = {\n title: {\n 'ui:classNames': 'myClass',\n },\n};\n```\n\n### `@rjsf/material-ui` BREAKING CHANGES\n\nThis theme was simplified back to working only with Material UI version 4 after an unsuccessful attempt to have it fully support both versions 4 and 5 simultaneously.\nAs a result, the `MuiComponentContext`, `MuiForm5`, `Theme5` components and the `useMuiComponent` hook were removed from the export.\nIn addition, the `/v4` and `/v5` sub-packages were also removed.\n\n#### Migrating for Material UI version 4\n\nIf you were using this theme for Material UI version 4 AND you were using the sub-package, simply remove the `/v4` from your imports.\n\nIf you modified your Typescript configuration for the `/v4` sub-package, remove the following from your `tsconfig.json`:\n\n```\n{\n ...\n \"compilerOptions\": {\n ...\n \"baseUrl\": \".\",\n \"paths\": {\n \"@rjsf/material-ui/*\": [\"node_modules/@rjsf/material-ui/dist/*\"]\n }\n }\n}\n```\n\nIf you modified your Jest configuration for the `/v4` sub-package, remove the following from your `jest.config.json`:\n\n```\n \"moduleNameMapper\": {\n \"@rjsf/material-ui/v4\": \"/node_modules/@rjsf/material-ui/dist/v4.js\"\n },\n```\n\n#### Migrating for Material UI version 5\n\nIf you were using this theme for Material UI version 5, you will want to use `@rjsf/mui` instead.\nSee below for some before and after examples.\n\nIf you modified your Typescript configuration for the `/v5` sub-package, remove the following from your `tsconfig.json`:\n\n```\n{\n ...\n \"compilerOptions\": {\n ...\n \"baseUrl\": \".\",\n \"paths\": {\n \"@rjsf/material-ui/*\": [\"node_modules/@rjsf/material-ui/dist/*\"]\n }\n }\n}\n```\n\nIf you modified your Jest configuration for the `/v5` sub-package, remove the following from your `jest.config.json`:\n\n```\n \"moduleNameMapper\": {\n \"@rjsf/material-ui/v5\": \"/node_modules/@rjsf/material-ui/dist/v5.js\"\n },\n```\n\n##### Before\n\n```tsx\nimport Form5 from '@rjsf/material-ui';\n```\n\nor\n\n```tsx\nimport Form from '@rjsf/material-ui/v5';\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme } from '@rjsf/material-ui/v5';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme);\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme as Theme5 } from '@rjsf/material-ui';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme5);\n```\n\n##### After\n\n```tsx\nimport Form from '@rjsf/mui';\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme } from '@rjsf/mui';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme);\n```\n","packages/docs/docs/migration-guides/v6.x upgrade guide.md":"# 6.x Upgrade Guide\n\n## New packages\n\nThere are 5 new packages added in RJSF version 6:\n\n- `@rjsf/daisyui`: This is new theme based on the `daisyui` toolkit\n- `@rjsf/mantine`: This is new theme based on the `mantine` toolkit\n- `@rjsf/primereact`: This is a new theme based on the `PrimeReact` toolkit\n- `@rjsf/react-bootstrap`: This is rename of the `bootstrap-4` theme with an upgrade to the latest version of `react-bootstrap`\n- `@rjsf/shadcn`: This is new theme based on the `shadcn` toolkit\n\n## New deprecations\n\n### UiSchema.rootFieldId\n\nThe `ui:rootFieldId` notation on `UiSchema` was deprecated in favor of `Form.idPrefix`.\nThis notation will be removed in a future major version release\n\n### @rjsf/semantic-ui\n\nThe `semantic-ui` theme is deprecated and will be removed in a future major version release unless `sematic-ui-react` version 3 is released with React 19 support.\nAlthough that seems unlikely as no changes have been made to version 3 since December 2023.\n\n## Breaking changes\n\n### CJS build changes\n\nDue to making all of the `package.json` files for the `@rjsf/*` libraries include `\"type\": \"module\"` to better support modern `ESM` builds, the generation of the Common JS distributions were updated to produce `.cjs` files rather than `.js` files.\nHopefully this will not cause any issues with existing uses of the libraries. If so, one may need to switch from doing an `import` of the CJS build to doing a `require()`.\n\n### Theme removals\n\nThe following themes were removed due to duplication of a framework with a newer theme\n\n#### bootstrap-4\n\nThe older `bootstrap-4` theme has been removed in favor of the `react-bootstrap` theme\n\n#### fluent-ui\n\nThe older `fluent-ui` theme has been removed in favor of the `fluentui-rc` theme\n\n#### material-ui\n\nThe older `material-ui` theme has been removed in favor of the `mui` theme\n\n### validator-ajv6\n\nThis deprecated validator has been removed. Use the `validator-ajv8`.\n\n### Theme version support changes\n\n#### @rjsf/antd\n\nVersion 6 is dropping official support for `antd` version 4. You must upgrade to version 5.\n\n#### @rjsf/chakra-ui\n\nVersion 6 is dropping official support for `@chakra-ui` version 2. You must upgrade to version 3. We are also requiring\n`chakra-react-select` version >=6 as a result.\n\n#### @mui version 5 and 6\n\nVersion 6 is dropping official support for `@mui/material` and `@mui/icons-material` versions 5 and 6 due to the adoption\nof breaking changes in version 7. You must upgrade to version 7.\n\n#### @rjsf/semantic-ui\n\nVersion 6 is dropping official support for `semantic-ui-react` version 1. You must upgrade to version 2.\n\n### Node support\n\nVersion 6 is dropping official support for Node 14, 16, and 18 as they are no longer [maintained versions](https://nodejs.org/en/about/releases/).\nPlease use Node 22 when making any changes to `package.json` and `package-lock.json` files.\nAll PR and branch builds are running against Node 20 and 22.\n\n### React version\n\nRJSF is no longer actively supporting React version < 18.x.\nReact 18 is officially supported on all the themes.\n\nReact 19 support is expected before the end of beta (although several developers have already upgraded with no problems).\n\n### Form POTENTIAL BREAKING CHANGES\n\nThe `onChange()` and `onSubmit()` callbacks were accidentally returning extra data along with what was listed in the `IChangeEvent` interface.\nIn v6, this was fixed so that only the data described by the `IChangeEvent` interface is returned.\nIf you were relying on that extra data in the callbacks, we are sorry for the inconvenience.\n\nA bug was fixed such that live validation will no longer be triggered on the data provided during the initial rendering of the `Form`.\nIf you require that your initial data have errors shown, then you can [programmatically validate](../usage/validation/#validate-form-programmatically) it after the initial render.\n\n### IdSchema replacement BREAKING CHANGE\n\nThe recursive `IdSchema` type and all its usages was replaced with a much simpler `FieldPathId` type.\nThis was done to remove a performance headache associated with having to recursively generate the `IdSchema` for every change made to `formData`.\nMoreover, after some evaluation, 99% of the use cases for the `IdSchema` were simply to get the `id` for a field.\n\n`FieldPathId` is defined as:\n\n```typescript\n/** The list of path elements that represents where in the schema a field is located. When the item in the field list is\n * a string, then it represents the name of the property within an object. When it is a number, then it represents the\n * index within an array.\n *\n * For example:\n * `[]` represents the root object of the schema\n * `['foo', 'bar']` represents the `bar` element contained within the `foo` element of the schema\n * `['baz', 1]` represents the second element in the list `baz` of the schema\n */\nexport type FieldPathList = (string | number)[];\n\n/** Type describing an id and path used for a field */\nexport type FieldPathId = {\n /** The id for a field */\n $id: string;\n /** The path for a field */\n path: FieldPathList;\n};\n```\n\n#### idSchema props\n\nIn addition, everywhere the `idSchema: IdSchema` prop was part of a RJSF type, it was replaced with `fieldPathId: FieldPathId`.\n\nThe affected types are:\n\n- FieldErrorProps\n- FieldHelpProps\n- FieldProps\n- UnsupportedFieldProps\n- ArrayFieldTitleProps\n- ArrayFieldDescriptionProps\n- ArrayFieldItemButtonsTemplateProps\n- ArrayFieldTemplateProps\n- ObjectFieldTemplateProps\n\nIf you have built a custom component using one of those types that used `idSchema: IdSchema`, simply replace that type and property name with `fieldPathId: FieldPathId`.\n\nFor example, if you had a custom field:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\n\n// Version 5-based custom widget\nfunction CustomField(props: FieldProps) {\n const {\n idSchema: { $id },\n formData,\n value,\n } = props;\n\n return
// Your field implementation
;\n}\n\n// Version 6-based custom widget\nfunction CustomField(props: FieldProps) {\n const {\n fieldPathId: { $id },\n formData,\n value,\n } = props;\n\n return
// Your field implementation
;\n}\n```\n\n#### toIdSchema() removed\n\nFinally, the `toIdSchema()` utility function was deleted and replaced with a new `toFieldPathId()` function documented [here](../api-reference/utility-functions.md#tofieldpathid)\n\n### formContext BREAKING CHANGES\n\nRemoved the unnecessary `formContext` property from the following interfaces since it is readily available in the `registry`.\nIf you were using the `formContext` in your custom `template`, `field` or `widget`, simply get it from the `registry` instead.\n\nInterfaces with `formContext` removed:\n\n- `ErrorListProps` - The properties that are passed to an `ErrorListTemplate` implementation\n- `FieldProps` - The properties that are passed to a `Field` implementation\n- `FieldTemplateProps` - The properties that are passed to a `FieldTemplate` implementation\n- `ArrayFieldTemplateProps` - The properties that are passed to an `ArrayFieldTemplate` implementation\n- `WidgetProps` - The properties that are passed to a `Widget` implementation\n\n### Fields BREAKING CHANGES\n\n#### FieldProps.onChange\n\nThe `onChange` handling for fields has been changed to fix a serious bug related to nearly simultaneous updates losing data.\nPreviously in 5.x, data change handling worked by passing a complete `newFormData` object up to the `Form` from the underlying `Field`s.\nIn 6.x, data change handling now works by passing just the changed `newValue` for a `Field` and the `path` array of the `Field` within the `formData`, with the `Form` itself being responsible for injecting the changed data into the `formData`.\n\nAs a result, the `FieldProps` interface was updated with the following breaking change so that custom `Field` authors are forced to respond to this update:\n\n```typescript\n// Version 5's `onChange` handler:\n\n/** The field change event handler; called with the updated form data and an optional `ErrorSchema` */\nonChange: (newFormData: T | undefined, es?: ErrorSchema, id?: string) => any;\n\n// Version 6's `onChange` handler:\n/** The field change event handler; called with the updated field value, the optional change path for the value\n * (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed\n */\nonChange: (newValue: T | undefined, path: FieldPathList, es?: ErrorSchema, id?: string) => void;\n```\n\nIn order to support letting the `Form` know what the path of the change was, a new `path: FieldPathList` parameter was injected into the handler before the `es?: ErrorSchema` parameter.\nIf you have written a custom `Field` that implements merging the new value into the `newFormData`, now you just need to pass that value and provide the `fieldPathId.path` to the `onChange` function.\n\nHere is an example of a custom `Field` that was updated due to this change:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nconst { ArrayField } = getDefaultRegistry().fields;\n\n// Version 5-based custom field\nfunction CustomField(props: FieldProps) {\n const {\n idSchema: { $id },\n formData,\n onChange,\n } = props;\n const changeHandlerFactory = (fieldName: string) => (event: any) => {\n onChange({ ...formData, [fieldName]: event.target.value });\n };\n return (\n <>\n

Location

\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n );\n}\n\n// Version 6-based custom field\nfunction CustomField(props: FieldProps) {\n const {\n fieldPathId: { $id, path },\n formData,\n onChange,\n } = props;\n const changeHandlerFactory = (fieldName: string) => (event: any) => {\n onChange(event.target.value, [...path, fieldName]);\n };\n return (\n <>\n

Location

\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n );\n}\n```\n\nThe same change also applies to the `ErrorSchema` object being passed to the `Form`.\nTherefore, if your custom `Field` also updated the `ErrorSchema` to add a new error, now you just need to pass that error as well.\nFinally, the errors are preserved across validations, so if you want to clear an error you passed via `onChange`, you will have to pass `undefined`\n\nHere is an example of a custom `Field` that was updated due to this change:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nconst { StringField } = getDefaultRegistry().fields;\n\n// Version 5-based custom field\nfunction StringFieldError(props: FieldProps) {\n const onChange = (newFormData: any | undefined, es?: ErrorSchema, id?: string) => {\n let raiseError = es;\n if (newFormData === 'test') {\n raiseError = {\n ...es,\n __errors: ['Value cannot be \"test\"'],\n };\n }\n props.onChange(newFormData, raiseError, id);\n };\n return ;\n}\n\n// Version 6-based custom field\nfunction StringFieldError(props: FieldProps) {\n const onChange = (newValue: any | undefined, path: FieldPathList, es?: ErrorSchema, id?: string) => {\n let raiseError = es;\n if (newValue === 'test') {\n raiseError = {\n __errors: ['Value cannot be \"test\"'],\n };\n }\n props.onChange(newValue, path, raiseError, id);\n };\n return ;\n}\n```\n\n#### FieldProps.idPrefix and FieldProps.idSeparator refactor\n\nThe `idPrefix` and `idSeparator` props were refactored from the `FieldProps` interface to the new `GlobalFormOptions` interface,\nIf your custom implementation required either of those props, you can simply obtain them from the `registry.globalFormOptions` variable instead.\n\n### FieldTemplateProps and WrapIfAdditionalTemplateProps BREAKING CHANGES\n\nDuring the conversion of `ObjectField` to a stateless functional component, the `additionalProperties`-based props in these two interfaces were simplified by replacing two callback-generators with memoized callbacks.\n\nIf you have your own implementation of the `FieldTemplate` and/or `WrapIfAdditionalTemplate` template(s), you will have to rename the props mentioned below with their replacements.\n\n#### onKeyChange replacement\n\nThe `onKeyChange: (value: string) => () => void` callback-generator function was replaced with the following 2 memoized callbacks, (one is a helper callback, since most of the key renames were triggered off of an input blur):\n\n```typescript\n/** Callback used to handle the changing of an additional property key's name with the new value\n */\nonKeyRename: (newKey: string) => void;\n/** Callback used to handle the changing of an additional property key's name when the input is blurred. The event's\n * target's value will be used as the new value. Its a wrapper callback around `onKeyRename`\n */\nonKeyRenameBlur: (event: FocusEvent) => void;\n```\n\n#### onDropPropertyClick replacement\n\nThe `onDropPropertyClick: (value: string) => () => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback used to handle the removal of the additionalProperty */\nonRemoveProperty: () => void;\n```\n\n### ObjectFieldTemplateProps BREAKING CHANGES\n\nDuring the conversion of `ObjectField` to a stateless functional component, the `additionalProperties`-based prop in this interface was simplified by replacing a callback-generator with a memoized callback.\n\nIf you have your own implementation of the `ObjectFieldTemplate` template, you will have to rename the prop mentioned below with its replacement.\n\n#### onAddClick replacement\n\nThe `onAddClick: (schema: S) => () => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback to use in order to add an new additionalProperty to the object field (to be used with\n * additionalProperties and patternProperties)\n */\nonAddProperty: () => void;\n```\n\n### Registry BREAKING CHANGES\n\nA new required prop, `globalFormOptions: GlobalFormOptions`, was added to the `Registry` interface.\nThis could affect your tests if you have your own way of creating `registry` objects to test your custom widgets, fields and/or templates.\nIf you are creating `Registry` objects, you simply need to add an empty object to the `globalFormOptions` prop.\nYou may also, provide values for any of the optional props contained within the `GlobalFormOptions` type.\n\nThe definition of the `GlobalFormOptions` object is:\n\n```typescript\n/** The set of options from the `Form` that will be available on the `Registry` for use in everywhere the `registry` is\n * available.\n */\nexport type GlobalFormOptions = {\n /** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;\n * Default is `root`. This prop is passed to the `toFieldPathId()` function within the RJSF field implementations.\n */\n readonly idPrefix?: string;\n /** To avoid using a path separator that is present in field names, it is possible to change the separator used for\n * ids; Default is `_`. This prop is passed to the `toFieldPathId()` function within the RJSF field implementations.\n */\n readonly idSeparator?: string;\n /** The component update strategy used by the Form and its fields for performance optimization */\n readonly experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';\n /** Optional function to generate custom HTML name attributes for form elements. Receives the field path segments\n * and element type (object or array), and returns a custom name string. This allows backends like PHP/Rails\n * (`root[tasks][0][title]`) or Django (`root__tasks-0__title`) to receive form data in their expected format.\n */\n readonly nameGenerator?: NameGeneratorFunction;\n};\n```\n\nTo help support this change for test writers, a new `getTestRegistry()` function has been provided in `@rjsf/core`.\n\n### Templates BREAKING CHANGES\n\n#### ArrayFieldTemplateItemType renamed\n\nThe type `ArrayFieldTemplateItemType` was renamed to `ArrayFieldItemTemplateProps` type, which matches the template properties naming pattern.\n\nAlso changed the `key: string` prop to `itemKey: string` to avoid a name collision with React\n\n#### ArrayFieldItemTemplate BREAKING CHANGES\n\nThe `ArrayFieldItemTemplateProps` was refactored to extract the following props into out a new `ArrayFieldItemButtonsTemplateProps`:\n\n- `canAdd`: A boolean value stating whether new items can be added to the array.\n- `hasCopy`: A boolean value stating whether the array item can be copied.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- ~~`onAddIndexClick: (index) => (event?) => void`: Returns a function that adds a new item at `index`.~~\n- ~~`onCopyIndexClick: (index: number) => (event?: any) => void;`: Returns a function that copies the item at `index` into the position at `index + 1`.~~\n- ~~`onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.~~\n- ~~`onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.~~\n\nIn addition to this refactor, the conversion of the `ArrayField` template to functional components caused the replacement of the 4 callback-generator functions with 5 memoizable functions.\n\n##### onAddIndexClick replacement\n\nThe `onAddIndexClick: (index) => (event?) => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback function that adds a new item below this item */\nonAddItem: (event?: any) => void;\n```\n\n##### onCopyIndexClick replacement\n\nThe `onCopyIndexClick: (index: number) => (event?: any) => void;` callback-generator function was replaced with a simpler, memoized callback:\n\n```typescript\n/** Callback function that copies this item below itself */\nonCopyItem: (event?: any) => void;\n```\n\n##### onDropIndexClick replacement\n\nThe `onDropIndexClick: (index) => (event?) => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback function that removes the item from the list */\nonRemoveItem: (event?: any) => void;\n```\n\n##### onReorderClick replacement\n\nThe `onReorderClick: (index, newIndex) => (event?) => void` callback-generator function was replaced with the following 2 memoized callbacks:\n\n```typescript\n/** Callback function that moves the item up one spot in the list */\nonMoveUpItem: (event?: any) => void;\n/** Callback function that moves the item down one spot in the list */\nonMoveDownItem: (event?: any) => void;\n```\n\nA new `buttonsProps` prop was added of the type `ArrayFieldItemButtonsTemplateProps`\n\nThis new type was then used to create a new `ArrayFieldItemButtonsTemplate` in the `Registry.templates`.\nSee [ArrayFieldItemButtonTemplate](../advanced-customization/custom-templates.md#arrayfielditembuttontemplate)\n\nIf you have implemented your own `ArrayFieldItemTemplate` or `ArrayField` then you will have to account for these changes.\n\n#### ArrayFieldTemplate BREAKING CHANGE\n\nIn order to support the conversion of `ArrayField` to functional components, the `items` property was changed from an\narray of `ArrayFieldItemTemplateProps` information to an array of React elements. These elements are result of the `ArrayField`\nactually rendering the `ArrayFieldItemTemplate` directly, rather than deferring it the `ArrayFieldTemplate`.\n\nIf you previously provided a custom `ArrayFieldTemplate` to do the full rendering of your arrays, now you will have to\nseparate the logic of generating the items into your own custom `ArrayFieldItemTemplate`. For example:\n\n```tsx\n// v5 ArrayFieldTemplate\n\nimport { ArrayFieldTemplateItemType, ArrayFieldTemplateProps } from '@rjsf/utils';\n\nfunction CustomArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n const { items, canAdd, onAddClick } = props;\n return (\n
\n {items &&\n items.map((element: ArrayFieldTemplateItemType) => (\n
\n
{element.children}
\n {(element.hasMoveUp || element.hasMoveDown) && (\n \n Down\n \n )}\n {(element.hasMoveUp || element.hasMoveDown) && (\n \n )}\n {element.hasCopy && (\n \n )}\n {element.hasRemove && (\n \n )}\n
\n
\n ))}\n {canAdd && (\n
\n \n
\n )}\n
\n );\n}\n```\n\n```tsx\n// v6 ArrayFieldTemplate and ArrayFieldItemTemplate (including other v6 changes mentioned in other sections)\n\nimport { ArrayFieldItemTemplateProps, ArrayFieldTemplateProps } from '@rjsf/utils';\n\nfunction CustomArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {\n const { children, buttonProps, itemKey } = props;\n return (\n
\n
{children}
\n {(buttonsProps.hasMoveUp || buttonsProps.hasMoveDown) && (\n \n )}\n {(buttonsProps.hasMoveUp || buttonsProps.hasMoveDown) && (\n \n )}\n {buttonsProps.hasCopy && (\n \n )}\n {buttonsProps.hasRemove && (\n \n )}\n
\n
\n );\n}\n\nfunction CustomArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n const { items, canAdd, onAddClick } = props;\n return (\n
\n {items}\n {canAdd && (\n
\n \n
\n )}\n
\n );\n}\n```\n\n> NOTE: the example above could also have implemented an `ArrayFieldItemButtonsTemplate` for the `buttonProps` related code.\n\n##### Potential BREAKING CHANGE\n\nThis template was also updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ArrayFieldTemplateProps` interface.\n\nIf you have your own implementation of `ArrayFieldTemplate` and want to support this new feature, please refer to any of the `ArrayFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### ArrayFieldTitleTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ArrayFieldTitleProps` interface.\n\nIf you have your own implementation of `ArrayFieldTitleTemplate` and want to support this new feature, please refer to the `ArrayFieldTitleTemplate` implementation for `@rjsf/core` or whatever theme you are using and pick up the changes.\n\n#### GridTemplate\n\nA new, theme-dependent template `GridTemplate` was added to support the new layout feature and must be provided if you are building your own `registry.templates` rather than overloading them via the `templates` props.\n\n#### MultiSchemaFieldTemplate\n\nThis new template was created to extract styling applied to the `MultiSchemaField` component in the `@rjsf/core` package.\n\nIf you have styled your form using the following classNames and you do NOT use the `@rjsf/core` theme, you may need to adjust your styles, as they may have been removed from your theme: `panel`, `panel-default`, `panel-body`, `form-group`.\n\n#### ObjectFieldTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ObjectFieldTemplateProps` interface.\n\nIf you have your own implementation of `ObjectFieldTemplate` and want to support this new feature, please refer to the `ObjectFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### OptionalDataControlsTemplate POTENTIAL BREAKING CHANGE\n\nThis new template was created to support the new [Optional Data Controls](#optional-data-controls) feature.\n\nIf you are implementing your own theme you may need to add this new template if you anticipate supporting this new feature.\n\n#### TitleFieldTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `TitleFieldProps` interface.\n\nIf you have your own implementation of `TitleFieldTemplate` and want to support this new feature, please refer to the `TitleFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### SchemaField - Addition of FallbackField POTENTIAL BREAKING CHANGE\n\nThe `SchemaField` was updated to use the new `FallbackField`, which adds opt-in support to replace the `UnsupportedField` with an interactive UI instead of an error message.\nIf you have your own implementation of `SchemaField` and want to support this new feature, please refer to the `SchemaField` implementation in `@rjsf/core` and pick up the changes.\n\nThe `UnsupportedField` component is unaffected by these changes, and is still used by the new `FallbackField`.\n\n#### SchemaUtilsType\n\nFive new functions were added to this type, so if you have your own implementation of this type, you will need to add them to yours.\nThe following new functions match the 5 new validator-based utility API functions mentioned below:\n\n- `findFieldInSchema(path: string | string[], schema: S, formData?: T): FoundFieldType`\n- `findSelectedOptionInXxxOf(schema: S, fallbackField: string, xxx: 'anyOf' | `oneOf`, formData?: T): S | undefined;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: T): T;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: S): S;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: T | S): S | T;`\n\nIn addition the `toIdSchema()` function was removed on this type in concert with the `toIdSchema()` function removal, so update your implementation to remove this as well.\n\n### Removed deprecations\n\nThe following deprecations were removed from the code base in v6\n\n#### FormProps.acceptcharset\n\nThe `acceptcharset` prop on `Form` was removed. Use the `acceptCharset` prop instead. I.e.:\n\n```tsx\n\n```\n\n#### getMatchingOption()\n\nThe `getMatchingOption()` function in `@rjsf/utils` was removed. Use the `getFirstMatchingOption()` function instead.\nI.e.:\n\n```ts\nimport { getFirstMatchingOption, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n // your schema goes here\n};\n\nconst formData = {\n /* your form data goes here */\n};\nconst options: RJSFSchema[] = [\n /* your options extracted from the schema go here */\n];\n\nconst option = getFirstMatchingOption(validator, formData, options, schema);\n```\n\n#### SchemaUtilsType.getMatchingOption()\n\nThe `getMatchingOption()` function in the `SchemaUtilsType` was removed. Use the `getFirstMatchingOption()` funciton on\nthe type instead. I.e.:\n\n```ts\nimport { createSchemaUtils, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n // your schema goes here\n};\n\nconst formData = {\n /* your form data goes here */\n};\nconst options: RJSFSchema[] = [\n /* your options extracted from the schema go here */\n];\nconst schemaUtils = createSchemaUtils(validator, schema);\n\nconst option = schemaUtils.getFirstMatchingOption(formData, options);\n```\n\n#### mergeValidationData()\n\nThe `mergeValidationData()` function from `@rjsf/utils` was removed. Use the `validationDataMerge()` function instead.\nI.e.:\n\n```ts\nimport { validationDataMerge, ValidationData, ErrorSchema } from '@rjsf/utils';\n\nconst validationData: ValidationData = {\n errors: [\n /* Your validation errors go here */\n ],\n errorSchema: {\n /* Your error schema goes here */\n },\n};\n\nconst additionalErrorSchema: ErrorSchema = {\n /* Your additional error schema goes here */\n};\n\nconst merged = validationDataMerge(validationData, additionalErrorSchema);\n```\n\n#### SchemaUtilsType.mergeValidationData()\n\nThe `mergeValidationData()` function in the `SchemaUtilsType` was removed. Use the standalone `validationDataMerge()`\nfunction instead. I.e.:\n\n```ts\nimport { toErrorList } from '@rjsf/utils';\n\nconst validationData: ValidationData = {\n errors: [\n /* Your validation errors go here */\n ],\n errorSchema: {\n /* Your error schema goes here */\n },\n};\n\nconst additionalErrorSchema: ErrorSchema = {\n /* Your additional error schema goes here */\n};\n\nconst merged = validationDataMerge(validationData, additionalErrorSchema);\n```\n\n#### ValidatorType.toErrorList()\n\nThe `toErrorList()` function on the `ValidatorType` interface was removed. Use the standalone `toErrorList()` function\nfrom `@rjsf/utils` instead. I.e.:\n\n```ts\nimport { validationDataMerge, ErrorSchema, RJSFValidationError, toErrorList } from '@rjsf/utils';\n\nconst errorSchema: ErrorSchema = {\n /* Your error schema goes here */\n};\n\nconst validationErrors: RJSFValidationError[] = toErrorList(errorSchema);\n```\n\n#### RJSF_ADDITONAL_PROPERTIES_FLAG\n\nThe constant `RJSF_ADDITONAL_PROPERTIES_FLAG` was removed from `@rjsf/utils`. Use the `RJSF_ADDITIONAL_PROPERTIES_FLAG`\nconstant instead. I.e.:\n\n```ts\nimport { RJSF_ADDITIONAL_PROPERTIES_FLAG } from '@rjsf/utils';\n```\n\n#### UiSchema.classNames\n\nThe `classNames` notation on `UiSchema` was removed. Use the `ui:classNames` notation instead. I.e.:\n\n```json\n{\n \"someField\": {\n \"ui:classNames\": \"someCustomClass\"\n }\n}\n```\n\n#### schema.enumNames\n\nThe custom `enumNames` property support on a JSON Schema that RJSF invented has been removed. Please use the `UiSchema`\nreplacement, `ui:enumNames` instead. I.e.:\n\n```ts\nimport { UiSchema, RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n attendance: {\n title: 'How did you attend the event?',\n enum: ['person', 'phone', 'video'],\n },\n rating: {\n title: 'How would you rate this event?',\n enum: ['0', '1', '2', '3', '4'],\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n attendance: {\n 'ui:enumNames': ['I joined in person', 'I called in using the phone number', 'I joined using the video link'],\n },\n rating: {\n 'ui:enumNames': [\"I did't like it\", 'It was meh', 'It was ok', 'I liked it', 'I loved it'],\n },\n};\n```\n\nUse the `ui:enumNames` in the `UiSchema` instead.\n\n### Other BREAKING CHANGES\n\n#### Primitive field handling in oneOf/anyOf schemas\n\nA bug fix was implemented that changes how primitive fields (boolean, string, number, etc.) are handled when switching between oneOf/anyOf schema options with `mergeDefaultsIntoFormData: \"useDefaultIfFormDataUndefined\"`.\n\n**Previous (buggy) behavior**: Undefined primitive fields were incorrectly set to empty objects `{}` when switching between schema variants.\n\n**New (correct) behavior**: Undefined primitive fields now remain `undefined` or receive proper default values according to their type when switching between schema variants.\n\nThis change fixes [#4709](https://github.com/rjsf-team/react-jsonschema-form/issues/4709) and was implemented in [#4710](https://github.com/rjsf-team/react-jsonschema-form/pull/4710).\n\n**Impact**: If your application was incorrectly relying on undefined primitive fields becoming `{}` objects, you may need to update your form validation or data processing logic to handle proper primitive values or `undefined` instead.\n\n#### Optional array defaulting (POTENTIAL)\n\nA bug fix was implemented that changes how optional arrays are initialized during the `formData` defaulting phase.\n\n**Previous (buggy) behavior**: Optional arrays were initialized to `[]`.\n\n**New (correct) behavior**: Optional arrays are no longer initialized.\n\n**Impact**: If your application was incorrectly relying on optional arrays being initialized this way, you may need to update it to handle the corrected behavior.\n\n#### SchemaField removed Bootstrap 3 classes\n\nIn fixing [#2280](https://github.com/rjsf-team/react-jsonschema-form/issues/2280), the following `Bootstrap 3` classes\n(`form-group`, `has-error` and `has-danger` error classes) were removed from the `classNames` prop passed down to the\n`FieldTemplate`. They were instead moved into the `core` theme's `WrapIfAdditionalTemplate` to ensure that theme was\nunchanged.\n\nAdditionally, the Bootstrap 3 classes `panel`, `panel-default`, `panel-body`, and `form-group` were removed from the\n`MultiSchemaField` component in the `@rjsf/core` package, and moved into the `core` theme's `MultiSchemaFieldTemplate`\nto ensure that the theme was unchanged.\n\nAs a result, the themes (other than `core`) will no longer render these classes.\n\nIf you use a non-`core` theme and were relying on them for in your application's styling or behavior (via css overrides\nperhaps), then you can still use the non-`Bootstrap 3` RJSF marker class (see below) or your specific theme's error classes.\n\n#### Prefixed RJSF template and field marker classes\n\nMany of the `core` RJSF templates and field implementations that are shared across all themes were updated to add the\n`rjsf-` prefix to the marker classes that are being added to the rendered HTML. The following table highlights the old\nand new marker classes. If you were relying on any of these classes, simply do a rename:\n\n| old marker class | new marker class |\n| ------------------------------ | ----------------------------------- |\n| `field` | `rjsf-field` |\n| `field-` | `rjsf-field-` |\n| `field-array` | `rjsf-field-array` |\n| `field-array-of-` | `rjsf-field-array-of-` |\n| `field-array-fixed-items` | `rjsf-field-array-fixed-items` |\n| `field-error` | `rjsf-field-error` |\n| `field-hidden` | `rjsf-field-hidden` |\n| `array-item` | `rjsf-array-item` |\n| `config-error` | `rjsf-config-error` |\n| `array-item-add` | `rjsf-array-item-add` |\n| `array-item-copy` | `rjsf-array-item-copy` |\n| `array-item-move-down` | `rjsf-array-item-move-down` |\n| `array-item-move-up` | `rjsf-array-item-move-up` |\n| `array-item-remove` | `rjsf-array-item-remove` |\n| `object-property-expand` | `rjsf-object-property-expand` |\n| `object-property-remove` | `rjsf-object-property-remove` |\n\n#### optionsList\n\nThe generics ordering on the `optionsList()` function was changed from `` to `` to be consistent with the rest of the APIs.\n\n## New Features\n\n### New types\n\nThe following new types were added to `@rjsf/utils`:\n\n- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array.\n- `ContainerFieldTemplateProps`: The common properties of the two container templates: `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps`\n- `FallbackFieldProps`: The properties passed to the new `FallbackField` component\n- `FallbackFieldTemplate`: The properties passed to the new `FallbackFieldTemplate` component\n- `FieldPathList` - The list of path elements that represents where in the schema a field is located\n- `FieldPathId` - Type describing an id and path used for a field\n- `FoundFieldType`: The interface for the return value of the `findFieldInSchema` function\n- `GlobalFormOptions`: The set of options from the `Form` that will be available on the `Registry` for use in everywhere the `registry` is available.\n- `GridTemplateProps`: The properties that are passed to a `GridTemplate`\n- `MultiSchemaFieldTemplateProps`: The properties that are passed to a `MultiSchemaFieldTemplate`\n- `OptionalDataControlsTemplateProps`: The properties that are passed to a OptionalDataControlsTemplate implementation\n- `TestIdShape`: The interface for the test ID proxy objects that are returned by the `getTestId` utility function\n\n### New non-validator utility functions\n\nMany new or formerly internally private utility functions are available in `@rjsf/utils`:\n\n- `buttonId(id: FieldPathId | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')`: Generates consistent ids for RJSF buttons\n- `getTestIds(): TestIdShape`: Returns an object of test IDs that can only be used in test mode, helpful for writing unit tests for React components\n- `hashObject(object: unknown): string`: Stringifies an `object` and returns the hash of the resulting string\n- `hashString(string: string): string`: Hashes a string into hex format\n- `isFormDataAvailable(formData?: T)(formData?: T): boolean`: Determines whether the given `formData` represents valid form data, such as a primitive type, an array, or a non-empty object\n- `isRootSchema(registry: Registry, schemaToCompare: S): boolean`: Helper to check whether a JSON schema object is the root schema\n- `lookupFromFormContext(regOrFc: Registry | Registry['formContext'], toLookup: string, fallback?: unknown)`: Given a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`\n- `optionalControlsId(id: FieldPathId | string, element: 'Add' | 'Msg' | 'Remove')`: Return a consistent `id` for the optional data controls `element`\n- `shouldRenderOptionalField(registry: Registry, schema: S, required: boolean, uiSchema?: UiSchema): boolean`: Determines if this field should be rendered with the Optional Data Controls UI\n- `sortedJSONStringify(object: unknown): string`: Stringifies an `object`, sorts object fields in consistent order before stringifying it\n- `toFieldPathId(fieldPath: string | number, globalFormOptions: GlobalFormOptions, parentPath?: FieldPathId | FieldPathList, isMultiValue?: boolean)`: Constructs the `FieldPathId` for `fieldPath` and the optional `parentPath`, using `globalFormOptions`\n- `useAltDateWidgetProps(props: WidgetProps): UseAltDateWidgetResult`: which encapsulates the logic needed to render an `AltDateWidget` with optional `time` elements\n- `useDeepCompareMemo(newValue: T): T`: Hook that stores and returns a `T` value. If `newValue` is the same as the stored one, then the stored one is returned, otherwise `newValue` is stored and returned\n- `useFileWidgetProps(value: string | string[] | undefined | null, onChange: (value?: string | null | (string | null)[]) => void, multiple?: boolean): UseFileWidgetPropsResult`: Hook which encapsulates the logic needed to read and convert a `value` of `File` or `File[]` into the props needed by a `FileWidget` implementation.\n\n### New validator-based utility functions\n\nThree new validator-based utility functions are available in `@rjsf/utils`:\n\n- `findFieldInSchema(validator: ValidatorType, rootSchema: S, path: string | string[], schema: S, formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): FoundFieldType`: Finds the field specified by the `path` within the root or recursed `schema`\n- `findSelectedOptionInXxxOf(validator: ValidatorType, rootSchema: S, schema: S, fallbackField: string,xxx: 'anyOf' | 'oneOf', formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): S | undefined`: Finds the option that matches the selector field in the `schema` or undefined if nothing is selected\n- `getFromSchema(validator: ValidatorType, rootSchema: S, schema: S, path: string | string[], defaultValue: T | S, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): T | S`: Reads the value at `path` within a schema, additionally retrieving `$ref`s as needed to resolve schemas\n\n### Changes to existing utility functions\n\n- `getDefaultFormState()`: Added an optional `initialDefaultsGenerated` boolean flag that indicates whether or not initial defaults have been generated\n- `retrieveSchema()`: Added an optional `resolveAnyOfOrOneOfRefs` boolean flag that causes the internal `resolveAllSchemas()` to resolve `$ref`s inside of the options of `anyOf`/`oneOf` schemas\n - This new optional flag was added to the `SchemaUtilsType` interface's version of `retrieveSchema()` as well.\n- `validationDataMerge()`: Added optional `preventDuplicates` boolean flag that causes the `mergeObjects()` call to receive `preventDuplicates` instead of `true`\n\n### initialFormData prop added to Form\n\nA new `initialFormData` prop was added to `Form` to support providing initial values for an **\"uncontrolled\"** React component.\nAs a result, a small change was made so that `formData` now causes the `Form` to behave as a **\"controlled\"** React component.\n\nThe programmatic `reset()` will ensure that an **\"uncontrolled\"** form is reset back to the `initialFormData` values when triggered.\n\n### setFieldValue() added to Form\n\nA new programmatic function, `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void` was added to the `Form`.\nIt allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a `FieldPathList`.\nTo set the root element, used either `''` or `[]` for the path. Passing undefined will clear the value in the field.\n\n### liveValidate and liveOmit performance improvement\n\nBecause `liveValidate` and `liveOmit` can have serious performance impacts in the `Form`, those flags were updated to add the following new options:\n\n- 'onChange' - Live validate and live omit will happen as part of the `onChange` processing (the same as setting the flag to `true`)\n- 'onBlur' - Live validate and live omit will happen as part of the `onBlur` processing, saving the computations until the user is done inputting data. If any changes to the state occur due to this processing, the `onChange()` event will be sent back to the client with the new data.\n\n> NOTE: Due to this new feature, the old `boolean` options on those two flag has been deprecated. In a future major release, you will only be able to pass `onChange`, `onBlur` to activate the feature or `undefined` to disable it\n\n### Optional Data Controls\n\nRJSF 6.x introduces a new feature that allows developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields.\n\nSee the documentation for [enableOptionalDataFieldForType](../api-reference/uiSchema.md#enableoptionaldatafieldfortype) for more information.\n\n### Dynamic UI Schema for Array Items\n\nRJSF 6.x introduces a new feature that allows dynamic UI schema generation for array items.\nThe `items` property in a `uiSchema` can now accept a function that returns a UI schema based on the array item's data, index, and form context.\n\n```typescript\nconst uiSchema: UiSchema = {\n myArrayField: {\n items: (itemData, index, formContext) => {\n // Return different UI schemas based on item data\n if (itemData?.type === 'special') {\n return { 'ui:widget': 'textarea' };\n }\n return { 'ui:widget': 'text' };\n },\n },\n};\n```\n\nThis feature is fully backward compatible - existing forms using object-based `uiSchema.items` will continue to work without changes.\nSee the [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) documentation for comprehensive examples and usage patterns.\n\n### Custom field `name` generation\n\nRJSF 6.x adds support for customizing how HTML `name` attributes are generated for form fields via the new [`nameGenerator`](../api-reference/form-props.md#namegenerator) prop. This enables proper form data submission to backend frameworks that expect specific naming conventions like bracket notation (`root[tasks][0][title]`) for PHP/Rails or dot notation (`root.tasks.0.title`) for other frameworks.\n\nThe default behavior is unchanged if the prop is not provided.\n\n### Opt-in Fallback UI for unsupported types\n\nRJSF 6.x introduces a new `FallbackField` component that provides a user-friendly UI for unsupported or unrecognized schema types. This new functionality displays a selection box used to choose a JSON primitive type, and a field for the formData that matches the selected type. To use this new feature, which takes the place of the existing `UnsupportedField` component, set the new `useFallbackUiForUnsupportedType` prop to `true` on the `Form` component.\n","packages/docs/docs/usage/layout-grid.md":"# Layout Grid\n\nVersion 6 of RJSF introduced a new way of generating forms using the `UiSchema`, via the Layout Grid.\nUnlike the original method of showing each field in the JSON Schema, in order, as they appear hierarchically within the\nnested object hierarchy, the Layout Grid lets you define where each field goes on a grid in any place/order you choose.\nIt even adds the ability to pass additional props to the rendering widget for each element being displayed.\n\nThe Layout Grid takes full advantage of the `UiSchema`'s ability to customize the `ui:field` that is used to render a field\nor collection of fields by providing a new out-of-the-box field implementation called `LayoutGridField` that you can\nassign to the whole of the `schema` or just a piece of it. It also comes with its own \"syntax\" that lets you define\na `row`, a `col`umn, and a set of `columns`. It also provides `condition`al logic that describes how a subset of the grid\ncan be hidden/shown based upon the value(s) of a field. It even supports the inclusion of custom render components that\nare not associated with a field. Finally, there is built-in support for doing a named look up of data within a special\nlocation in the `FormContext`.\n\nSince each theme that RJSF supports has its own unique grid system, the `uiSchema` that one creates for the\n`LayoutGridField` for one theme will most likely not work for any other theme unless two themes have the exact same\ngrid specification props. It also requires that one understand how to use the grid system of the theme and how it\ninterplays with the `LayoutGridField`'s \"syntax\". In other words, it will likely take some experimentation to get the\ngrid looking exactly the way you want it to.\n\nLet's break down how to use the `LayoutGridField` one step at a time.\n\n## Defining the LayoutGridField to reordering rows\n\nThe `LayoutGridField` is designed to be used within the `uiSchema` via the `ui:field` syntax. It must be accompanied by\nthe definition of the grid within the new `ui:layoutGrid` syntax. First let's start with a fairly simple `schema` that\nlooks like:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"person\": {\n \"title\": \"Person Info\",\n \"type\": \"object\",\n \"properties\": {\n \"first\": {\n \"title\": \"First Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n },\n \"middle\": {\n \"title\": \"Middle Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n },\n \"last\": {\n \"title\": \"Last Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n }\n },\n \"required\": [\"first\", \"last\"]\n }\n }\n}\n```\n\nIf you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII\ndrawing:\n\n```text\nPerson Info\n First Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Middle Name\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Last Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n```\n\nIf you wanted to switch the order of the fields or remove middle name entirely, you could change the JSON schema, which\nis usually not desirable for most users. You could also use the `ui:order` feature and/or `ui:widget: \"hidden\"` in the\n`uiSchema` to accomplish this without changing the schema. And now you can also use the very flexible and powerful\n`LayoutGridField` field in the`uiSchema`.\n\nNow let's add a `uiSchema` that will allow us to change the order of the fields to be `Last Name`, `Middle Name` and `First Name`.\nThis will highlight the first elements of the new \"syntax\"; `ui:layoutGrid` and `ui:row` :\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"children\": [\"person.last\", \"person.middle\", \"person.first\"]\n }\n }\n}\n```\n\nThis results in the following UI using the `core` theme via the `Bootstrap 3` grid system:\n\n```text\n Last Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Middle Name\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n First Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n```\n\nAs mentioned before, another theme's grid system may render the above example differently. Most likely as three fields\nlined up next to each other. Assume all examples from here on out will be shown using the `core` theme. You may have to\nadjust the `uiSchema` for your theme to achieve the same results.\n\n### `ui:layoutGrid`\n\nThe `LayoutGridField` will do nothing if used as a field without having the `ui:layoutGrid` object as its sibling.\nThis root \"syntax\" keyword defines the structure of how the grid should be laid out for the field. Due to the nature of\nJSON objects, it must contain a single `ui:row` \"syntax\" keyword inside of which the rest of the grid is defined. Providing\na second `ui:row` will create an invalid object.\n\n### `ui:row`, part 1\n\nThe `ui:row` \"syntax\" represents a row of data in the grid. It has, at minimum, a single `children` property that\ndescribes what that row will render. In this first example, the children are the ids of the fields to render in order,\nas single grid elements. There is a second version of this syntax which is identical to the first in behavior:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person.last\", \"person.middle\", \"person.first\"]\n }\n}\n```\n\nHere the array is implicitly assumed to be the `children` property. Let's take a look at another example that will generate\nthe exact same UI. The example below shows what happens when you use the `LayoutGridField` on a sub-object within the\nhierarchy:\n\n```json\n{\n \"person\": {\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"last\", \"middle\", \"first\"]\n }\n }\n}\n```\n\nHere you can see the `person.` prefix on the field ids is no longer necessary. This is because the scope of the field is\nnow the `person` object rather than the whole of the `schema`. You may have noticed from the example UI shown above that\nthe `Person Info` header for the object disappeared. This is because we are no longer iterating through the hierarchy to\nrender the object. Don't worry, there is another new field that was created to support just this use case (see next\nsection).\n\nAlso, if you wanted to entirely remove the `Middle Name` from your form because of a requirements change, you don't have\nto touch the JSON schema anymore. Instead you would just update the `uiSchema` as follows:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person.last\", \"person.first\"]\n }\n}\n```\n\n## LayoutHeaderField\n\nThe `LayoutHeaderField` is another new field built into RJSF v6. Its sole purpose is to render the `title` for a collection\nof grid elements. It will read the `title` using the exact same mechanism as does the regular `Form`; first as `ui:title`\nif specified, then as `schema.title` if specified, then as `name` of the field. In order to restore the `Person Info`\nheader to the example above, we have to make a few additions to the `uiSchema`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person\", \"person.last\", \"person.middle\", \"person.first\"]\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\n## Defining the LayoutGridField to put the fields in a single row\n\nNow let's say the requirements changed again, and you have to show the first, middle and last name fields in a single row.\nWell, in the past, that would require quite a lot of customizing of RJSF's `core` templates. Now with the `LayoutGridField`\nit's just a matter of updating the `uiSchema` again, this time using more of the new \"syntax\"; `ui:col` and `ui:columns`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n }\n ]\n },\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.first\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.middle\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.last\"\n }\n ]\n }\n }\n ]\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nPassing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:\n\n```text\nPerson Info\n First Name* Middle Name Last Name*\n +--------------------------+ +--------------------------+ +--------------------------+\n | | | | | |\n +--------------------------+ +--------------------------+ +--------------------------+\n```\n\nThe above example uses the `core` UI theme's `Bootstrap 3` grid classes to make the `Person Info` span 12 columns within\na row and each of the person name fields span 4 columns within a row. It also adds the \"row\" grid class to the outermost\n`ui:row` to make whole UI be part of a grid row.\n\nNow sometimes, depending on the grid system, you don't need to explicitly define both second-level rows, instead\ndepending on the column grid behavior. Luckily the `core` theme's grid system is one of those, so the following UI\nschema will also produce the exact same result.\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"person.first\", \"person.middle\", \"person.last\"]\n }\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nHere is how the `LayoutGridField` \"syntax\" above is used.\n\n### `ui:row`, part 2\n\nAs the above examples show, the `ui:row` object can be nested inside of the `children` of a `ui:row`. This signifies the\nnesting of one row inside another row. It also shows that any additional properties added to the `ui:row` object, in this\ncase the `\"className\": \"row\"` will be spread onto the underlying theme's grid implementation. You may also pass other\nproperties, such as `style` blocks or, in the case of other themes, properties that will affect the underlying grid system\ncomponents.\n\n### `ui:col`\n\nThe `ui:col` \"syntax\" represents a single column of data in the grid. Like `ui:row` this syntax will spread the\n`\"className\": \"col-xs-12\"` and `\"className\": \"col-xs-4\"` properties onto the underlying theme's grid implementation, as\nwell as any other properties, such as `style` blocks, etc. In its most compact form, the `ui:col` can be written as\n`{ \"ui:col\": [\"person\"] }`, in a manner similar to `ui:row` where the array is implicitly assumed to be the `children`\nproperty.\n\nIn its most expanded form, the `ui:col` contains an array of `children` in the form of objects with `\"name\": \"\"`\nas the minimum required property. Any additional properties added within the object will be passed along to the\nunderlying `Widget` implementation in the `ui:options` portion of the `uiSchema`. This allows for fine-tuning any\nout-of-the-box or custom widgets. Let's take a look at an example where the `Middle Name` column hides its label adding\na margin to take up the space once occupied by the label, and is reduced in size relative to the `First Name` and\n`Last Name`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n }\n ]\n },\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-5\",\n \"children\": [\"person.first\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"style\": {\n \"margin-top\": \"25px\"\n },\n \"children\": [\n {\n \"name\": \"person.middle\",\n \"label\": false\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-5\",\n \"children\": [\"person.last\"]\n }\n }\n ]\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nPassing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:\n\n```text\nPerson Info\n First Name* Last Name*\n +--------------------------------+ +---------+ +--------------------------------+\n | | | | | |\n +--------------------------------+ +---------+ +--------------------------------+\n```\n\n### `ui:columns`\n\nThe `ui:columns` \"syntax\" represents a group of columns in the grid. Like `ui:row` and `ui:col` this syntax will spread\nthe properties onto the underlying theme's grid implementation (in an earlier example `\"className\": \"col-xs-4\"` ), as\nwell as any other properties, such as `style` blocks, etc. It is short-hand notation for rendering a group of columns\nall with the same grid system properties. As shown in the above examples, the set of three `ui:col` definitions for\nfirst, middle and last names are the same as the single `ui:columns` definition with all three listed as children.\n\nIn its most compact form, the `ui:col` can be written as `{ \"ui:columns\": [\"person.first\", \"person.last\"] }`, in a\nmanner similar `ui:row` and `ui:col` where the array is implicitly assumed to be the `children` property. The\n`ui:columns` syntax also supports `children` in the form of objects with `\"name\": \"\"` as the minimum required\nproperty, passing along any additional properties to the underlying `Widget` as `ui:options`.\n\n## GridTemplate\n\nThe concept of a theme's grid system has been mentioned several times in the documentation so far. Remember that each\ntheme's grid system is unique to that theme. It is essential to understand how your theme's grid system works in order\nto know how to write the `uiSchema` to get the grid layout you want for your fields.\n\nIf you want to know how your theme implements its grid system, take a look at the `GridTemplate` source code. You may\nalso override your theme's `GridTemplate` with your own to fine tune how the properties you pass to the `ui:row`, `ui:col`,\nand `ui:columns` are handled. Each `ui:row` and `ui:col` will render a `GridTemplate` passing `column: false` for `ui:row`\nand `column: true` for `ui:col`. The `ui:columns` syntax will render a `GridTemplate` around each of the `children`. Any\nadditional properties besides `children` will be directly passed to the `GridTemplate`.\n\n## Defining the LayoutGridField to render fields conditionally\n\nThe `GridLayoutField` also supports the concept of conditionally rendering a set of fields based upon the value(s) of\nanother field within the `formData`. Because the layout grid works on a field-by-field basis, it treats the render of a\n`anyOf` or `oneOf` field differently. It presents to the user ONLY the checkbox group (anyOf) or radio button group\n(oneOf). In order to render any nested fields associated with them, one has to explicitly specify them in the `uiSchema`.\n\nFor the purposes of demonstrating the feature, let's work with a `schema` containing a fairly simple `oneOf` field with\nnested objects:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"title\": \"My Name\",\n \"type\": \"string\"\n },\n \"favorite\": {\n \"title\": \"My Favorite Shape\",\n \"discriminator\": {\n \"propertyName\": \"shape\"\n },\n \"oneOf\": [\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Line\",\n \"type\": \"string\",\n \"const\": \"line\"\n },\n \"length\": {\n \"title\": \"Line Length\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"length\"]\n },\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Circle\",\n \"type\": \"string\",\n \"const\": \"circle\"\n },\n \"radius\": {\n \"title\": \"Radius\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"radius\"]\n },\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Polygon\",\n \"type\": \"string\",\n \"const\": \"polygon\"\n },\n \"sides\": {\n \"title\": \"# of Sides\",\n \"type\": \"number\",\n \"minimum\": 3,\n \"default\": 3\n },\n \"length\": {\n \"title\": \"Side Length\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"sides\"]\n }\n ]\n }\n },\n \"required\": [\"name\"]\n}\n```\n\nIf you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII\ndrawing:\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 1 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Line*\n +--------------------------------------------------------------------------+\n | line |\n +--------------------------------------------------------------------------+\n\n Line Length*\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\nThe second input is a dropdown with the values `My Favorite Shape option 1`, `My Favorite Shape option 2` and\n`My Favorite Shape option 3`. When you change the dropdown the other fields below it change to match the objects within\nthe `oneOf` as follows:\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 2 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Circle*\n +--------------------------------------------------------------------------+\n | cirle |\n +--------------------------------------------------------------------------+\n\n Radius*\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\nand\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 3 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Polygon*\n +--------------------------------------------------------------------------+\n | polygon |\n +--------------------------------------------------------------------------+\n\n # of Sides*\n +--------------------------------------------------------------------------+\n | 3 |\n +--------------------------------------------------------------------------+\n\n Side Length\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\n> NOTE: The `LayoutGridField` does not currently work with a root-level `anyOf` or `oneOf` object since it requires that\n> everything being displayed in have a field id and they don't.\n\nNow let's add a `uiSchema` that will allow us to create a much more pleasing UI where the dropdown contains the actual\n`oneOf` values and the fields all show up on the side of the dropdown:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"name\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite\"]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"line\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.length\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"circle\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.radius\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"polygon\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:columns\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.sides\", \"favorite.length\"]\n }\n }\n ]\n }\n }\n ]\n }\n },\n \"favorite\": {\n \"ui:widget\": \"select\"\n }\n}\n```\n\nThis results in the following UI using the `core` theme via the `Bootstrap 3` grid system:\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* Line Length*\n +--------------------------+ +--------------------------+\n | Line v | | |\n +--------------------------+ +--------------------------+\n```\n\nand\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* Radius*\n +--------------------------+ +--------------------------+\n | Circle v | | |\n +--------------------------+ +--------------------------+\n```\n\nand\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* # of Sides* Side Length\n +--------------------------+ +--------------------------+ +--------------------------+\n | Polygon v | | 3 | | |\n +--------------------------+ +--------------------------+ +--------------------------+\n```\n\nAs mentioned before, another theme's grid system may render the above example differently.\n\n### `ui:condition`\n\nThe `ui:condition` \"syntax\" represents conditional rendering of data in the grid. The condition has four required\nproperties, `field`, `value`, `operator` and `children`. Let's talk about each in turn.\n\n- `field`: The dotted-path name of a leaf-level field that makes up the left-side of the condition, used to get data from the `formData`\n- `value`: A single value or a list of values that make up the right-side of the condition\n- `operator`: One of the following three options that controls how the left and right sides of the condition are compared\n 1. `all`: This operator will pass when the right-side and left-side contains all the same value(s)\n 2. `some`: This operator will pass when the right-side and left-side contain as least one value in common\n 3. `none`: This operator will pass when the right-side and left-side do not contain any values in common\n- `children`: The list of `ui:row`, `ui:col` or `ui:columns` definitions to display when the condition is true\n\nIn the example above, when the `favorite.shape` field value is `line` then the `favorite.length` field is displayed in\nthe grid spanning 4 columns. When it is `circle`, then `favorite.radius` is displayed in the grid spanning 4 columns.\nWhen it is `polygon`, then `favorite.sides` and `favorite.length` are displayed in the grid, each spanning 4 columns.\n\nWe leave it up to the reader to create other examples that use different `operator`s.\n\n## Other capabilities of the LayoutGridField\n\nThere are a few more small features that the `LayoutGridField` supports. First, there is a `FormContext` named lookup\ncapability that allows one to provide a name-mapped set of strings, components and functions in the `FormContext` inside\nof a well-known location, `layoutGridLookupMap` and then reference those names within the `uiSchema`. Second, the grid\nrendering code recognizes an alternate \"syntax\" for the objects in `children` arrays in order to display any random\nReact element within a grid. Below are examples of them both.\n\n### Named lookup support for className\n\nSince some themes, like `mui`, support CSS-in-JS class names, one cannot hard-code the actual `className` in the\n`uiSchema` easily. That is where the name-mapped information in the `FormContext` comes into play. Let's assume that\nyou are using a theme like `mui` and you need to style a `Grid` using CSS-in-JS you could do something like the following:\n\n```json uiSchema.json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"GridStyle anotherClass\",\n \"children\": [\"person.last\", \"person.first\"]\n }\n }\n}\n```\n\n```tsx\nimport { styled, Grid } from '@mui/material';\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the Person Info schema from above\nimport schema from './personSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './uiSchema.json';\n\nconst css = {\n STYLED_GRID: 'StyledGrid',\n};\n\n// Define the style\nconst StyledGrid = styled(Grid)`\n ${`& .${css.STYLED_GRID}`} {\n p {\n /* Override default presentation of

tags within a grid */\n font-weight: bold\n color: dark-purple !important;\n }\n }\n`;\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n GridStyle: css.STYLED_GRID,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nAs you can see in the example, we've created a `FormContext` that has the named-lookup map containing the\n`css.STYLED_GRID` object mapped to `GridStyle`. In the `uiSchema` we then add `GridStyle` as the `className` for the\ngrid rows. Under the hood, the `LayoutGridField` automatically goes through the `className` props and does a lookup of\neach class name in the `FormContext`, replacing the `GridStyle` with the generated `css.GRID_STYLE` name. And because the\nother class name in the example, `anotherClass`, is not mapped in the named-lookup map, it will passed to the\n`GridTemplate` as is. In summary, if the CSS-in-JS class is called `StyledGrid-1asd123` then the `className` property\npassed to the `GridTemplate` will be `\"StyledGrid-1asd123 anotherClass\"`.\n\n### Rendering a custom React element in the grid\n\nBecause you have full control of how you layout your components in the grid, what do you do when you want to add an\nelement to your presentation that isn't directly associated with a `schema`, like say an image? Well, that is actually\nreally easy using a variant of the \"syntax\" for a `children` node in the `uiSchema`. Here's how:\n\n```json shapeUiSchema.json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"name\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite\"]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"line\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"LineImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.length\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"circle\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"CircleImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.radius\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"polygon\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"PolygonImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-xs-3\",\n \"children\": [\"favorite.sides\", \"favorite.length\"]\n }\n }\n ]\n }\n }\n ]\n }\n },\n \"favorite\": {\n \"ui:widget\": \"select\"\n }\n}\n```\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './shapeUiSchema.json';\n// Now import my 3 shape React components\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n LineImageComponent: LineShape,\n CircleImageComponent: CircleShape,\n PolygonImageComponent: PolygonShape,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nAs you can see in the example, we've created a `FormContext` that contains the named-lookup map containing the three\ncomponents (`LineShape`, `CircleShape`, `PolygonShape`) mapped to the lookup keys `LineImageComponent`,\n`CircleImageComponent`, `PolygonImageComponent` respectively. In the `uiSchema`, we use the optional `render` property\nin the `children` object \"syntax\" to define the lookup name of the component we want to use. The `LayoutGridField` will\nthen do a lookup of the `render` string. If you forget to add the `formContext` or the mapping in the `LOOKUP_NAME_MAP`\nthen nothing will be rendered.\n\nIf you provide an empty string as the `name` along with the `render`, then your component will be rendered only with any\nadditional properties passed in the `children` object. If you provide a `name` that matches a field in the `schema`,\nthen the `render` component won't be used. Otherwise, the `render` component will be passed all of the `FieldProp`s,\nincluding the `schema`, `uiSchema`, `fieldPathId`, `errorSchema`, `formData`, `registry`, etc.\n\nSo our example will render the `LineShape` component with `size: 'small-size'` in the second column between the\n`My Favorite Shape` dropdown and the `Line Length` input. Also, it will render the `CircleShape` component with\n`size: 'small-size'` in the second column between the `My Favorite Shape` dropdown and the `Radius` input. Finally,\nit will render the `PolygonShape` component with `size: 'small-size'` in the second column between the\n`My Favorite Shape` dropdown and the `# of Sides` input.\n\n#### Passing components directly in uiSchema\n\nThe `render` \"syntax\" also works if you have an object-based `uiSchema` and pass the component function directly rather\nthan use a named lookup. For example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Now import my 3 shape React components that understand how to extract the props from `formData`\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\nconst uiSchema: UiSchema = {\n 'ui:field': 'LayoutGridField',\n 'ui:layoutGrid': {\n 'ui:row': {\n className: 'row',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: ['name'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite'],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'line',\n operator: 'all',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite.length'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'lineImage',\n render: LineShape,\n dataPath: 'favorite.length',\n },\n ],\n },\n },\n ],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'circle',\n operator: 'all',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite.radius'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'circleShape',\n render: CircleShape,\n dataPath: 'favorite.radius',\n },\n ],\n },\n },\n ],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'polygon',\n operator: 'all',\n children: [\n {\n 'ui:columns': {\n className: 'col-xs-4',\n children: ['favorite.sides', 'favorite.length'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'polygonShape',\n render: PolygonShape,\n dataPaths: ['favorite.sides', 'favorite.length'],\n },\n ],\n },\n },\n ],\n },\n },\n ],\n },\n },\n favorite: {\n 'ui:widget': 'select',\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nLet's assume that the `LineShape`, `CircleShape` and `PolygonShape` components configured above use the `dataPath[s]`\nproperty to extract the fields from the `formData` that is being passed to them in order to display the exact size of\nthe shape. The grid above will render the `*Shape` components in a 12-wide column below the field inputs.\n\n### Other named lookup situations\n\nOther `children` properties also do named lookups. In the `shapeUiSchema.json` example above, if the `*Shape` components\nare upgraded to change the input of the `size` prop to have newer values, one could use the `FormContext` to map the\n`small-size` value to a newer value. For example, if you wanted to use the new `medium` value for the `size` prop, or\nif you wanted to programmatically control which size to use outside of the `Form` you could update the example as\nfollows:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './shapeUiSchema.json';\n// Now import my 3 shape React components\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\nconst MEDIUM_SIZE = 'medium';\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n LineImageComponent: LineShape,\n CircleImageComponent: CircleShape,\n PolygonImageComponent: PolygonShape,\n 'small-size': MEDIUM_SIZE,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## So much flexibility available\n\nThese examples are just a tiny fraction of the ways the `LayoutGridField` can be used. Remember, understand the theme's\ngrid system and the \"syntax\" described above and [here](../api-reference/LayoutGridField.md). Play around, you can build\njust about any UI you want and still have it populate the JSON schema's `formData`!\n\n**ENJOY!!**\n","packages/docs/docs/usage/themes.md":"# Themes\n\nBy default, this library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics,\nmeaning that you must load the Bootstrap stylesheet on the page to view the form properly. You can use another theme by importing one of the packages listed below.\n\n## Supported themes\n\n| Theme Name | Status | Package Name / Link |\n| --------------------- | --------- | ----------------------- |\n| antd | Published | `@rjsf/antd` |\n| Chakra UI | Published | `@rjsf/chakra-ui` |\n| Bootstrap 3 (default) | Published | `@rjsf/core` |\n| fluentui-rc | Published | `@rjsf/fluentui-rc` |\n| mantine | Published | `@rjsf/mantine` |\n| material-ui | Published | `@rjsf/mui` |\n| PrimeReact | Published | `@rjsf/primereact` |\n| react-bootstrap | Published | `@rjsf/react-bootstrap` |\n| Semantic UI | Published | `@rjsf/semantic-ui` |\n| shadcn | Published | `@rjsf/shadcn` |\n\n## Using themes\n\nTo use a theme from a package, just import the `` component from that package. For example, to use the Material UI form,\nfirst install both `@rjsf/core` and `@rjsf/mui`. Then you can import the form by doing:\n\n```ts\nimport Form from '@rjsf/mui';\n```\n\nEach theme renders against its own UI framework, so the framework's stylesheet has to be loaded for the form to look\nright. `@rjsf/shadcn` in particular carries no styling of its own: it expects your application to build Tailwind and\nscan the package for class names, or to import one of its prebuilt stylesheets. See the\n[`@rjsf/shadcn` README](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/shadcn/README.md#theming)\nfor both routes.\n\nIf you would like to contribute a theme with a new UI framework, please develop the theme using the `withTheme` component described in [Theme Customization](../advanced-customization/custom-themes.md) and make a PR!\n\nYou can also use the uiSchema to add custom CSS class names to your form.\n\n## Customizing with other frameworks\n\nThe default theme is bootstrap 3. In order to use another theme, you must first install `@rjsf/core`.\n\nFor example, to use the standard bootstrap 3 form, you can run:\n\n```ts\nimport Form from '@rjsf/core';\n```\n\nTo use the material-ui form, you should first install both `@rjsf/core` and `@rjsf/material-ui`. Then, you can run:\n\n```ts\nimport Form from '@rjsf/material-ui';\n```\n\nFor more information on how to create a custom theme, see documentation on the `withTheme` component.\n","packages/docs/docs/usage/validation.md":"# Validation\n\nWhen the form is submitted, the form data is validated to conform to the given JSON schema;\n\nAs of version 5, as a result of decoupling the validation implementation from the `Form`, a `validator` implementation is required to be passed to all `Form`s.\nReact Json Schema Form provides a default `@rjsf/validator-ajv8` implementation that uses version 8 of the [ajv](https://github.com/ajv-validator/ajv) validator.\nThe error messages generated by this new validator differ from those provided by the original validator due to it using a newer version.\nIf you depend on having specifically formatted messages, then using this validator would constitute a breaking change for you.\n\nIt is also possible for you to provide your own implementation if you desire, as long as it fulfills the `ValidatorType` interface specified in `@rjsf/utils`.\n\n## API documentation\n\nThe documentation for the APIs associated with the AJV 8 validator package can be found [here](../api-reference/validator-ajv8.md)\n\n## Precompiled validators\n\nIn 5.7.0, support for precompiled validators was added to the `@rjsf/validator-ajv8` package.\nThe main use case for this is to overcome issues with `unsafe-eval` warnings from the browser caused by strict Content Security Policy settings.\nSee the [Standalone Validation Code](https://ajv.js.org/standalone.html) section of the AJV documentation for more details about precompiled validators.\n\nDue to how RJSF uses the AJV validator in determining `anyOf/oneOf` selections and how it resolves dependencies, if-then-else and references ($ref) in schemas via the `retrieveSchema()` utility method, RJSF provides its own schema compilation API built on-top-of the one provided by AJV 8.\nIf you are wanting to use a precompiled validator, two steps are required:\n\n1. Precompiling the schema into a set of validator functions\n2. Providing those precompiled validator functions to a `ValidatorType` implementation in the `Form`\n\n### Schema precompilation\n\nThe first step in the process is to compile a schema into a set of validator functions that are saved into a commonJS-based Javascript file.\nThe `@rjsf/validator-ajv8` package exports the `compileSchemaValidators()` function that does this.\nIt is expected that this function will be used in a manner similar to the following:\n\n```cjs\nconst compileSchemaValidators = require('@rjsf/validator-ajv8/compileSchemaValidators').default;\nconst yourSchema = require('path_to/yourSchema'); // If your schema is a js file\n\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.js');\n```\n\nIf you are currently using the `customizeValidator()` function to provide `additionalMetaSchemas`, `customFormats`,\n`ajvOptionsOverrides` and/or `ajvFormatOptions` then you can pass those in as the optional third parameter to the\n`compileSchemaValidators()` function in a manner similar to:\n\n```cjs\nconst { compileSchemaValidators } = require('@rjsf/validator-ajv8');\nconst yourSchema = require('path_to/yourSchema.json'); // If your schema is a json file\n\nconst options = {\n additionalMetaSchemas: [require('ajv/lib/refs/json-schema-draft-06.json')],\n customFormats: { 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/, 'area-code': /\\d{3}/ },\n ajvOptionsOverrides: {\n $data: true,\n verbose: true,\n },\n ajvFormatOptions: {\n mode: 'fast',\n },\n};\n\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.js', options);\n```\n\nIt is highly recommended to create a `compileYourSchema.js` file (or what ever name you want) with code similar to what is shown above and then, using node, run the code as follows:\n\n```\nnode compileYourSchema.js\n```\n\n> NOTE: You must have your schema provided within a file that can be parsed and turned into the set of precompiled validator functions.\n\n> Additional Note: If you are using Webpack or NextJS and are encountering an issue resolving `fs` during development, consult this [blog post](https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs) for how to solve the issue.\n\n### Using the precompiled validator\n\nAfter you have completed step 1 having generated your precompiled schema functions into the `yourCompiledSchema.js` output file (or whatever you called it), then you need to create a `ValidatorType` implementation from it to use in the `Form`.\nThe `@rjsf/validator-ajv8` package exports the `createPrecompiledValidator()` function for this.\nHere is an example of how to use your precompiled validator with your `Form`:\n\n```tsx\nimport { useMemo } from 'react';\nimport { createPrecompiledValidator, ValidatorFunctions } from '@rjsf/validator-ajv8';\nimport Form, { FormProps } from '@rjsf/core'; // Or whatever theme you use\n\nimport yourSchema from 'path_to/yourSchema'; // This needs to be the same file that was precompiled\nimport * as precompiledValidatorFns from 'path_to/yourCompiledSchema';\n\nfunction MyForm(props: Omit) {\n // Memoize the validator to avoid rerenders\n const validator = useMemo(\n () => createPrecompiledValidator(precompiledValidatorFns, yourSchema),\n [validatorFns, yourSchema],\n );\n\n return ;\n}\n\nrender(, document.getElementById('app'));\n```\n\n### Dynamically pre-compiling validators\n\nFor more advanced cases when schema needs to be precompiled on request - `compileSchemaValidatorsCode` can be used.\n\n```ts\nimport { compileSchemaValidatorsCode } from '@rjsf/validator-ajv8/compileSchemaValidators';\n\nconst code = compileSchemaValidatorsCode(schema, options);\n```\n\nFor the most part it is the same as `compileSchemaValidators`, but instead of writing the file - it returns generated code directly.\n\nTo use it on browser side - some modifications are needed to provide runtime dependencies in generated code needs to be provided.\n\nExample implementation of it:\n\n```tsx\nimport type { ValidatorFunctions } from '@rjsf/validator-ajv8';\n\nimport ajvRuntimeEqual from 'ajv/dist/runtime/equal';\nimport {\n parseJson as ajvRuntimeparseJson,\n parseJsonNumber as ajvRuntimeparseJsonNumber,\n parseJsonString as ajvRuntimeparseJsonString,\n} from 'ajv/dist/runtime/parseJson';\nimport ajvRuntimeQuote from 'ajv/dist/runtime/quote';\n// import ajvRuntimeRe2 from 'ajv/dist/runtime/re2';\nimport ajvRuntimeTimestamp from 'ajv/dist/runtime/timestamp';\nimport ajvRuntimeUcs2length from 'ajv/dist/runtime/ucs2length';\nimport ajvRuntimeUri from 'ajv/dist/runtime/uri';\nimport * as ajvFormats from 'ajv-formats/dist/formats';\n\n// dependencies to replace in generated code, to be provided by at runtime\nconst validatorsBundleReplacements: Record = {\n // '': ['', ],\n 'require(\"ajv/dist/runtime/equal\").default': ['ajvRuntimeEqual', ajvRuntimeEqual],\n 'require(\"ajv/dist/runtime/parseJson\").parseJson': ['ajvRuntimeparseJson', ajvRuntimeparseJson],\n 'require(\"ajv/dist/runtime/parseJson\").parseJsonNumber': ['ajvRuntimeparseJsonNumber', ajvRuntimeparseJsonNumber],\n 'require(\"ajv/dist/runtime/parseJson\").parseJsonString': ['ajvRuntimeparseJsonString', ajvRuntimeparseJsonString],\n 'require(\"ajv/dist/runtime/quote\").default': ['ajvRuntimeQuote', ajvRuntimeQuote],\n // re2 by default is not in dependencies for ajv and so is likely not normally used\n // 'require(\"ajv/dist/runtime/re2\").default': ['ajvRuntimeRe2', ajvRuntimeRe2],\n 'require(\"ajv/dist/runtime/timestamp\").default': ['ajvRuntimeTimestamp', ajvRuntimeTimestamp],\n 'require(\"ajv/dist/runtime/ucs2length\").default': ['ajvRuntimeUcs2length', ajvRuntimeUcs2length],\n 'require(\"ajv/dist/runtime/uri\").default': ['ajvRuntimeUri', ajvRuntimeUri],\n // formats\n 'require(\"ajv-formats/dist/formats\")': ['ajvFormats', ajvFormats],\n};\n\nconst regexp = new RegExp(\n Object.keys(validatorsBundleReplacements)\n .map((key) => key.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'))\n .join('|'),\n 'g',\n);\n\nfunction wrapAjvBundle(code: string) {\n return `function(${Object.values(validatorsBundleReplacements)\n .map(([name]) => name)\n .join(', ')}){\\nvar exports = {};\\n${code.replace(\n regexp,\n (req) => validatorsBundleReplacements[req][0],\n )};\\nreturn exports;\\n}`;\n}\n\nconst windowValidatorOnLoad = '__rjsf_validatorOnLoad';\nconst schemas = new Map<\n string,\n { promise: Promise; resolve: (result: ValidatorFunctions) => void }\n>();\nif (typeof window !== 'undefined') {\n // @ts-ignore\n window[windowValidatorOnLoad] = (loadedId: string, fn: (...args: unknown[]) => ValidatorFunctions) => {\n const validator = fn(...Object.values(validatorsBundleReplacements).map(([, dep]) => dep));\n let validatorLoader = schemas.get(loadedId);\n if (validatorLoader) {\n validatorLoader.resolve(validator);\n } else {\n throw new Error(`Unknown validator loaded id=\"${loadedId}\"`);\n }\n };\n}\n\n/**\n * Evaluate precompiled validator in browser using script tag\n * @param id Identifier to avoid evaluating the same code multiple times\n * @param code Code generated server side using `compileSchemaValidatorsCode`\n * @param nonce nonce attribute to be added to script tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce#using_nonce_to_allowlist_a_script_element)\n */\nexport function evaluateValidator(id: string, code: string, nonce: string): Promise {\n let maybeValidator = schemas.get(id);\n if (maybeValidator) return maybeValidator.promise;\n let resolveValidator: (result: ValidatorFunctions) => void;\n const validatorPromise = new Promise((resolve) => {\n resolveValidator = resolve;\n });\n schemas.set(id, {\n promise: validatorPromise,\n resolve: resolveValidator!,\n });\n\n const scriptElement = document.createElement('script');\n\n scriptElement.setAttribute('nonce', nonce);\n scriptElement.text = `window[\"${windowValidatorOnLoad}\"](\"${id}\", ${wrapAjvBundle(code)})`;\n\n document.body.appendChild(scriptElement);\n return validatorPromise;\n}\n```\n\nFrom React component this can be used as following:\n\n```tsx\nlet [precompiledValidator, setPrecompiledValidator] = React.useState();\nReact.useEffect(() => {\n evaluateValidator(\n schemaId, // some schema id to avoid evaluating it multiple times\n code, // result of compileSchemaValidatorsCode returned from the server\n nonce, // nonce script tag attribute to allow this ib content security policy for the page\n ).then(setPrecompiledValidator);\n}, [entityType.id]);\n\nif (!precompiledValidator) {\n // render loading screen\n}\nconst validator = createPrecompiledValidator(precompiledValidator, schema);\n```\n\n### Precompiled validators with `@rjsf/validator-ata`\n\n`@rjsf/validator-ata` has the same two functions. Compile the schema in a Node script:\n\n```cjs\nconst compileSchemaValidators = require('@rjsf/validator-ata/compileSchemaValidators').default;\nconst yourSchema = require('path_to/yourSchema.json');\n\n// The third argument takes the options customizeValidator() takes, with the limits listed below.\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.cjs', {\n customFormats: { 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/ },\n});\n```\n\nThen use it in the app:\n\n```tsx\nimport { createPrecompiledValidator, type ValidatorFunctions } from '@rjsf/validator-ata';\nimport yourSchema from 'path_to/yourSchema.json'; // The same schema that was precompiled\nimport precompiledValidatorFns from 'path_to/yourCompiledSchema.cjs';\n\nconst validator = createPrecompiledValidator(precompiledValidatorFns as ValidatorFunctions, yourSchema);\n```\n\nThings to know:\n\n- `customFormats` and `ataOptionsOverrides` apply at compile time. Custom formats must be a `RegExp` or a pattern string: a function cannot be written into the generated file and is rejected.\n- `additionalMetaSchemas` and `ataOptionsOverrides.schemas` that have an `$id` are compiled into the generated file, so a custom meta-schema named in `$schema` applies there too. The official json-schema.org meta-schemas are left out, since ata already knows them. Entries without an `$id` are ignored with a warning: ata requires one, so `customizeValidator()` throws for them.\n- `extenderFn` and the `ataOptionsOverrides` keys `coerceTypes`, `removeAdditional` and `keywords` cannot be carried into the generated file. They are ignored with a warning (once per process), and the generated file and the runtime validator may then disagree, in either direction: a dropped keyword lets data through that the runtime validator rejects, and a dropped `coerceTypes` rejects data it accepts.\n- The generated file never fills in `default` values. The runtime validator does (`useDefaults` is on by default in ata), so for a required field that is missing but has a `default`, the runtime validator fills it in and accepts, while the generated file rejects. The form fills in defaults itself (`getDefaultFormState`), so this shows only for data that does not come from the form.\n- Pass `suppressDuplicateFiltering` to `createPrecompiledValidator()`. Passing it to the compile step has no effect and logs a warning.\n- The generated file imports nothing, so `ata-validator` is not in your bundle, as long as the app imports only `createPrecompiledValidator` (and types). Importing the default export, `customizeValidator` or `ATAValidator` brings the runtime validator back.\n- The generated file is CommonJS, like the one from `@rjsf/validator-ajv8`. Webpack, Rollup and production Vite builds handle it. Vite's dev server does not convert CommonJS files inside your source folder.\n- The file has no type declarations. With TypeScript, cast it to `ValidatorFunctions` as above and add `declare module '*.cjs';` to a `.d.ts` file, or enable `allowJs`.\n- Run the compile step again when the schema changes.\n- To get the code as a string instead of a file, use `compileSchemaValidatorsCode(schema, options)` from `@rjsf/validator-ata/compileSchemaValidators`. The code imports nothing, so unlike the ajv8 example above it needs no runtime dependencies replaced.\n\n## Live validation\n\nBy default, form data are only validated when the form is submitted or when a new `formData` prop is passed to the `Form` component.\n\nYou can enable live form data validation by passing a `liveValidate` prop to the `Form` component, and set it to `true`. Then, every time a value changes within the form data tree (e.g. the user entering a character in a field), a validation operation is performed, and the validation results are reflected into the form state.\n\nBe warned that this is an expensive strategy, with possibly strong impact on performances.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: ['string'],\n const: 'test',\n};\n\nconst formData = 'a';\n\nrender(, document.getElementById('app'));\n```\n\n## Validate form programmatically\n\nIt is possible to programmatically validate a form using the `validateForm()` function on `Form`.\nAdd a `ref` to your `Form` component and call the `validateForm()` method to validate the form programmatically.\nThe `validateForm()` method returns true if the form is valid, false otherwise.\nIf you have provided an `onError` callback it will be called with the list of errors when the `validatorForm()` method returns false.\n\n```tsx\nimport { createRef } from 'react';\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst formRef = createRef();\nconst onError = (errors) => alert(errors);\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n\nif (formRef.current.validateForm()) {\n alert('Form is valid');\n}\n```\n\n## HTML5 Validation\n\nBy default, the form uses HTML5 validation. This may cause unintuitive results because the HTML5 validation errors (such as when a field is `required`) may be displayed before the form is submitted, and thus these errors will display differently from the react-jsonschema-form validation errors. You can turn off HTML validation by setting the `noHtml5Validate` to `true`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n required: true,\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Custom validation rules\n\nForm data is always validated against the JSON schema.\n\nBut it is possible to define your own custom validation rules that will run in addition to (and after) the `validator` implementation.\nThis is especially useful when the validation depends on several interdependent fields.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nfunction customValidate(formData, errors, uiSchema, errorSchema) {\n if (formData.pass1 !== formData.pass2) {\n errors.pass2.addError(\"Passwords don't match\");\n }\n return errors;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n pass1: { type: 'string', minLength: 3 },\n pass2: { type: 'string', minLength: 3 },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n> Notes:\n>\n> - The `customValidate()` function must implement the `CustomValidator` interface found in `@rjsf/utils`.\n> - The `customValidate()` function must **always** return the `errors` object received as second argument.\n> - The `customValidate()` function is called **after** the JSON schema validation.\n> - The `customValidate()` function is passed the `uiSchema` as the third argument. This allows the `customValidate()` function to be able to derive additional information from it for generating errors.\n> - The `customValidate()` function is passed the `errorSchema` as the fourth argument. This allows the `customValidate()` function to be able to access errors raised by JSON schema validation.\n\n## Custom error messages\n\nValidation error messages are provided by the JSON Schema validation by default.\nIf you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nfunction transformErrors(errors, uiSchema) {\n return errors.map((error) => {\n if (error.name === 'pattern') {\n error.message = 'Only digits are allowed';\n }\n return error;\n });\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n onlyNumbersString: { type: 'string', pattern: '^\\\\d*$' },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n> Notes:\n>\n> - The `transformErrors()` function must implement the `ErrorTransformer` interface found in `@rjsf/utils`.\n> - The `transformErrors()` function must return the list of errors. Modifying the list in place without returning it will result in an error.\n> - The `transformErrors()` function is passed the `uiSchema` as the second argument. This allows the `transformErrors()` function to be able to derive additional information from it for transforming errors.\n\nEach element in the `errors` list passed to `transformErrors` is a `RJSFValidationError` interface (in `@rjsf/utils`) and has the following properties:\n\n- `name`: optional name of the error, for example, \"required\" or \"minLength\"\n- `message`: optional message, for example, \"is a required property\" or \"should NOT be shorter than 3 characters\"\n- `params`: optional object with the error params returned by ajv ([see doc](https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#error-parameters) for more info).\n- `property`: optional string in Javascript property accessor notation to the data path of the field with the error. For example, `.name` or `.first-name`.\n- `schemaPath`: optional JSON pointer to the schema of the keyword that failed validation. For example, `#/fields/firstName/required`. (Note: this may sometimes be wrong due to a [bug in ajv](https://github.com/ajv-validator/ajv/issues/512)).\n- `stack`: full error name, for example \".name is a required property\".\n- `title`: optional string containing title property for the field with error.\n\n## Error List Display\n\nTo take control over how the form errors are displayed, you can define an _error list template_ for your form.\nThis list is the form global error list that appears at the top of your forms.\n\nAn error list template is basically a React stateless component being passed errors as props, so you can render them as you like:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, ErrorListProps } from \"@rjsf/utils\";\nimport validator from \"@rjsf/validator-ajv8\";\n\nfunction ErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n

\n

Custom error list

\n
    \n {errors.map(error => (\n
  • \n {error.stack}\n
    • \n ))}\n
\n
\n );\n}\n\nconst schema: RJSFSchema = {\n type: \"string\",\n const: \"test\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: Your custom `ErrorList` template will only render when `showErrorList` is `top` or `botttom`.\n\nThe following props are passed to `ErrorList` as defined by the `ErrorListProps` interface in `@rjsf/utils`:\n\n- `errors`: An array of the errors.\n- `errorSchema`: The errorSchema constructed by `Form`.\n- `schema`: The schema that was passed to `Form`.\n- `uiSchema`: The uiSchema that was passed to `Form`.\n- `formContext`: The `formContext` object that you passed to `Form`.\n\n## The case of empty strings\n\nWhen a text input is empty, the field in form data is set to `undefined`.\nHowever, since `undefined` isn't a valid JSON value according to [the official JSON standard](https://www.ecma-international.org/wp-content/uploads/ECMA-404_2nd_edition_december_2017.pdf) (ECMA-404, Section 5), the values get stored as `null`.\n\nString fields that use `enum` and a `select` widget will have an empty option at the top of the options list that when selected will result in the field being `null`.\n\nOne consequence of this is that if you have an empty string in your `enum` array, selecting that option in the `select` input will cause the field to be set to `null`, not an empty string.\n\nIf you want to have the field set to a default value when empty you can provide a `ui:emptyValue` field in the `uiSchema` object.\n\n## Custom meta schema validation\n\nTo have your schemas validated against any other meta schema than draft-07 (the current version of [JSON Schema](http://json-schema.org/)), make sure your schema has a `$schema` attribute that enables the validator to use the correct meta schema.\nFor example:\n\n```json\n{\n \"$schema\": \"http://json-schema.org/draft-04/schema#\",\n ...\n}\n```\n\nNote that react-jsonschema-form supports JSON Schema draft-07 by default.\nTo support additional meta schemas, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:\n\n### additionalMetaSchemas\n\nThe `additionalMetaSchemas` prop allows you to validate the form data against one (or more than one) JSON Schema meta schema, for example, JSON Schema draft-04.\nYou can import a meta schema as follows:\n\n```tsx\nconst metaSchemaDraft04 = require('ajv/lib/refs/json-schema-draft-04.json');\n```\n\nIn this example `schema` passed as props to `Form` component can be validated against draft-07 (default) and by draft-04 (added), depending on the value of `$schema` attribute.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport AjvDraft04 from 'ajv-draft-04';\n\nconst validator = customizeValidator({ AjvClass: AjvDraft04 });\n\nconst schema: RJSFSchema = {\n $schema: 'http://json-schema.org/draft-04/schema#',\n type: 'string',\n};\n\nreturn ;\n```\n\n### customFormats\n\n[Pre-defined semantic formats](https://json-schema.org/draft/2019-09/json-schema-validation.html#rfc.section.7) are limited.\nreact-jsonschema-form adds two formats, `color` and `data-url`, to support certain [alternative widgets](./widgets.md).\nTo add formats of your own, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'phone-us',\n};\n\nconst customFormats = {\n 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/,\n};\n\nconst validator = customizeValidator({ customFormats });\n\nrender(, document.getElementById('app'));\n```\n\nFormat values can be anything AJV's [`addFormat` method](https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#addformatstring-name-stringregexpfunctionobject-format---ajv) accepts.\n\n### Async validation\n\nHandling async errors is an important part of many applications. Support for this is added in the form of the `extraErrors` prop.\n\nFor example, a request could be made to some backend when the user submits the form. If that request fails, the errors returned by the backend should be formatted like in the following example.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, ErrorSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: {\n type: 'string',\n },\n candy: {\n type: 'object',\n properties: {\n bar: {\n type: 'string',\n },\n },\n },\n },\n};\n\nconst extraErrors: ErrorSchema = {\n foo: {\n __errors: ['some error that got added as a prop'],\n },\n candy: {\n bar: {\n __errors: ['some error that got added as a prop'],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nAn important note is that these errors are \"display only\" and will not block the user from submitting the form again.\n\n### ajvOptionsOverrides\n\nIn version 5, with the advent of the decoupling of the validation implementation from the `Form`, it is now possible to provide additional options to the `ajv` instance used within `@rjsf/validator-ajv8`.\nFor instance, if you need more information from `ajv` about errors via the `verbose` option, now you can turn it on!\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'phone-us',\n};\n\nconst ajvOptionsOverrides = {\n verbose: true,\n};\n\nconst validator = customizeValidator({ ajvOptionsOverrides });\n\nrender(, document.getElementById('app'));\n```\n\n## Using the raw Ajv instance\n\nThe `customizeValidator()` function returns the `AJV8Validator` implementation class, which has an internal raw `ajv` instance within it.\nIf you need to do some deep customization of the instance using any of the `ajv` libraries (like `ajv-keywords`), you can do so using this raw instance as follows:\n\n```ts\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvKeywords from 'ajv-keywords';\n\nconst validator = customizeValidator();\najvKeywords(validator.ajv, ['your-keyword']);\n\n// use your update validator with a `Form`\n```\n\n## Ajv8 validator\n\nOur implementation of `@rjsf/validator-ajv8` utilizes Ajv's internal cache to avoid unnecessarily re-compiling schemas, which can be an expensive operation. The cache key is the schema `$id`.\n\nThe `ajvOptionsOverrides` for the Ajv 8 validator are the ones supported by that version.\nSecond, the data formats previously provided in Ajv 6 now need to be added explicitly using the `ajv-formats` package.\nA new `ajvFormatOptions` option is available on the `customizeValidator()` API to be able to configure this.\nAdditionally, a new `AjvClass` option is available on the `customizeValidator()` API to support using one of the other [JSON schema versions](https://ajv.js.org/json-schema.html#json-schema-versions) provided by Ajv 8 besides the `draft-07` default.\nFinally, the Ajv 8 validator supports the localization of error messages.\n\n### ajvFormatOptions\n\nBy default, ALL formats are being added to the default `@rjsf/validator-ajv8` that you get when you import it.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'email',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you don't actually need any of the [ajv-formats](https://github.com/ajv-validator/ajv-formats#formats) and want to reduce the memory footprint, then you can turn it off as follows:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({ ajvFormatOptions: false });\n\nrender(, document.getElementById('app'));\n```\n\nIf you only need some of them, you can pass any of the [options](https://github.com/ajv-validator/ajv-formats#options) to the formatter:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ ajvFormatOptions: ['date'] });\n// or\n// const validator = customizeValidator({ ajvFormatOptions: { mode: \"fast\", formats: [\"date\"], keywords: true } });\n\nrender(, document.getElementById('app'));\n```\n\n### AjvClass\n\nBy default, the `@rjsf/validator-ajv8` uses the `draft-07` schema version.\nIt is possible to use one of the other version it supports, like `draft-2019-09` or `draft-2020-12`.\nNOTE: `draft-2020-12` has breaking changes and hasn't been fully tested with `@rjsf`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport Ajv2019 from 'ajv/dist/2019';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ AjvClass: Ajv2019 });\n// or\n// const validator = customizeValidator({ AjvClass: Ajv2020 });\n\nrender(, document.getElementById('app'));\n```\n\n### extenderFn\n\nIf you need to use an additional library, such as `ajv-errors`, with our validators you can do so by creating a custom validator and pass it the `ajv` library \"extender\" via the `extenderFn` prop on the `options` parameter.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvErrors from 'ajv-errors';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ extenderFn: ajvErrors });\n\nrender(, document.getElementById('app'));\n```\n\n### suppressDuplicateFiltering\n\nWhen AJV validates against `anyOf` or `oneOf` schemas, it generates a separate error for each failed branch, which often produces many duplicate messages.\nBy default, the validator filters out these duplicates so that only the first occurrence of each unique error is shown.\nUse `suppressDuplicateFiltering` to override this behavior when you need to see all errors from every branch.\n\nThe option accepts a `SuppressDuplicateFilteringType` value (exported from `@rjsf/validator-ajv8`):\n\n| Value | Behavior |\n| ------------------ | --------------------------------------------------------------------------- |\n| `'none'` (default) | Duplicates filtered for both `anyOf` and `oneOf` |\n| `'anyOf'` | `anyOf` duplicate filtering disabled; `oneOf` duplicates still filtered |\n| `'oneOf'` | `oneOf` duplicate filtering disabled; `anyOf` duplicates still filtered |\n| `'all'` | All duplicate filtering disabled; every error from every branch is returned |\n\nFor a standard validator via `customizeValidator()`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n asc: {\n title: 'Low to high',\n type: 'boolean',\n default: true,\n },\n desc: {\n title: 'High to low',\n type: 'boolean',\n default: true,\n },\n },\n anyOf: [\n {\n required: ['asc'],\n properties: {\n asc: {\n const: true,\n },\n },\n },\n {\n required: ['desc'],\n properties: {\n desc: {\n const: true,\n },\n },\n },\n ],\n};\n\n// Disable all duplicate filtering — show every error from every anyOf/oneOf branch\nconst validator = customizeValidator({ suppressDuplicateFiltering: 'all' });\n\nrender(, document.getElementById('app'));\n```\n\nFor a precompiled validator, pass the value as the fourth argument to `createPrecompiledValidator()`:\n\n```tsx\nimport { createPrecompiledValidator } from '@rjsf/validator-ajv8';\nimport * as precompiledValidatorFns from 'path_to/yourCompiledSchema';\nimport yourSchema from 'path_to/yourSchema';\n\nconst validator = createPrecompiledValidator(precompiledValidatorFns, yourSchema, undefined, 'all');\n```\n\n### Localization (L10n) support\n\nThe Ajv 8 validator supports the localization of error messages using [ajv-i18n](https://github.com/ajv-validator/ajv-i18n).\nIn addition, you may provide a custom solution by implementing a function that conforms to the `Localizer` interface if your language is not supported.\n\n```ts\nimport { ErrorObject } from 'ajv';\n/** The type describing a function that takes a list of Ajv `ErrorObject`s and localizes them\n */\nexport type Localizer = (errors?: null | ErrorObject[]) => void;\n```\n\nNOTE: The `ajv-i18n` validators implement the `Localizer` interface.\n\n#### Some examples\n\nUsing a specific locale while including all of `ajv-i18n`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport localizer from 'ajv-i18n';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, localizer.it);\n\nrender(, document.getElementById('app'));\n```\n\nUsing a specific locale minimizing the bundle size\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport spanishLocalizer from 'ajv-i18n/localize/es';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, spanishLocalizer);\n\nrender(, document.getElementById('app'));\n```\n\nAn example of a custom `Localizer` implementation:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { ErrorObject } from 'ajv';\n\nfunction localize_ru(errors: null | ErrorObject[] = []) {\n if (!(errors && errors.length)) return;\n errors.forEach(function (error) {\n let outMessage = '';\n\n switch (error.keyword) {\n case 'pattern': {\n outMessage = 'должно соответствовать образцу \"' + error.params.pattern + '\"';\n break;\n }\n case 'required': {\n outMessage = 'поле обязательно для заполнения';\n break;\n }\n default:\n outMessage = error.message;\n }\n\n error.message = outMessage;\n });\n}\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, localize_ru);\n\nrender(, document.getElementById('app'));\n```\n\nNOTES:\n\n- If you provided your own function, modify the list in place.\n- You must process all the cases which you need by yourself. See the full list of possible cases [here](https://github.com/ajv-validator/ajv-i18n/blob/master/messages/index.js).\n- Each element in the `errors` list passed to the custom function represent a **raw** error object returned by ajv ([see doc](https://github.com/ajv-validator/ajv/blob/master/docs/api.md#error-objects)).\n- [HTML 5 Validation](#html5-validation) will cause the browser to display a \"popup\" message, the text of which is entirely under control of the browser. If you are seeing messages which aren't translated \"popping up\", then add `noHtml5Validate` to your form.\n","packages/docs/docs/usage/widgets.md":"# Widgets\n\nThe uiSchema `ui:widget` property tells the form which UI widget should be used to render a field.\n\nExample:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n done: {\n type: 'boolean',\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n done: {\n 'ui:widget': 'radio', // could also be \"select\"\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nHere's a list of supported alternative widgets for different JSON Schema data types:\n\n## For `boolean` fields\n\n- `radio`: a radio button group with `true` and `false` as selectable values;\n- `select`: a select box with `true` and `false` as options;\n- by default, a checkbox is used\n\n> Note: To set the labels for a boolean field, instead of using `true` and `false`, your schema can use `oneOf` with `const` values for both true and false, where you can specify the custom label in the `title` field. You will also need to specify a widget in your `uiSchema`. See the following example:\n\nschema:\n\n```json\n{\n \"properties\": {\n \"booleanWithCustomLabels\": {\n \"type\": \"boolean\",\n \"oneOf\": [\n { \"const\": true, \"title\": \"Custom label for true\" },\n { \"const\": false, \"title\": \"Custom label for false\" }\n ]\n }\n }\n}\n```\n\nuiSchema:\n\n```json\n{\n \"booleanWithCustomLabels\": {\n \"ui:widget\": \"radio\" // or \"select\"\n }\n}\n```\n\n## For `string` fields\n\n- `textarea`: a `textarea` element is used;\n- `password`: an `input[type=password]` element is used;\n- `color`: an `input[type=color]` element is used;\n- by default, a regular `input[type=text]` element is used.\n\n### String formats\n\nThe built-in string field also supports the JSON Schema `format` property, and will render an appropriate widget by default for the following string formats:\n\n- `email`: An `input[type=email]` element is used;\n- `uri`: An `input[type=url]` element is used;\n- `data-url`: By default, an `input[type=file]` element is used; in case the string is part of an array, multiple files will be handled automatically (see [File widgets](#file-widgets)).\n- `date`: By default, an `input[type=date]` element is used;\n- `date-time`: By default, an `input[type=datetime-local]` element is used.\n- `time`: By default an `input[type=time]` element is used;\n\n![](https://i.imgur.com/xqu6Lcp.png)\n\nPlease note that, even though they are standardized, `datetime-local`, `date` and `time` input elements are not supported by IE. If you plan on targeting IE, two alternative widgets are available:\n\n- `alt-datetime`: Six `select` elements are used to select the year, the month, the day, the hour, the minute and the second;\n- `alt-date`: Three `select` elements are used to select the year, month and the day.\n\n![](https://i.imgur.com/VF5tY60.png)\n\nYou can customize the list of years displayed in the `year` dropdown by providing a `yearsRange` property to `ui:options` in your uiSchema.\nThe range can be descending by specifying the larger value first.\nIt's also possible to remove the `Now` and `Clear` buttons with the `hideNowButton` and `hideClearButton` options.\n\nYou can also, customize the order in which date input fields are displayed by providing `format` property to `ui:options` in your uiSchema, available values are `YMD`(default), `MDY` and `DMY`.\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'alt-datetime',\n 'ui:options': {\n yearsRange: [1980, 2030],\n format: 'MDY',\n hideNowButton: true,\n hideClearButton: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also specify negative values which will be treated relative to the current year, so if it is 2020 and the range is set as follows.\n\n```\n yearsRange: [-120, -18],\n```\n\nYears from 1900-2002 will be shown. You can also specify the dates with the higher date first to display dates in reverse order.\n\n```\n yearsRange: [2030, 1980],\n ...\n yearsRange: [-18, -120],\n```\n\nYears from 2030-1980 and 2002-1900, respectively will be shown.\n\n## For `number` and `integer` fields\n\n- `updown`: an `input[type=number]` updown selector;\n- `range`: an `input[type=range]` slider;\n- `radio`: a radio button group with enum values. This can only be used when `enum` values are specified for this input.\n- By default, a regular `input[type=number]` element is used.\n\n> Note: If JSON Schema's `minimum`, `maximum` and `multipleOf` values are defined, the `min`, `max` and `step` input attributes values will take those values.\n\n## Hidden widgets\n\nIt's possible to use a hidden widget for a field by setting its `ui:widget` uiSchema directive to `hidden`:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'boolean' },\n },\n};\n\nconst uiSchema: UiSchema = {\n foo: { 'ui:widget': 'hidden' },\n};\n\nrender(, document.getElementById('app'));\n```\n\nNotes:\n\n- Hiding widgets is only supported for `boolean`, `string`, `number` and `integer` schema types;\n- A hidden widget takes its value from the `formData` prop.\n\n## File widgets\n\nThis library supports a limited form of `input[type=file]` widgets, in the sense that it will propagate file contents to form data state as [data-url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)s.\n\nThere are two ways to use file widgets.\n\n1. By declaring a `string` json schema type along a `data-url` [format](#string-formats):\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\n\nrender(, document.getElementById('app'));\n```\n\n2. By specifying a `ui:widget` field uiSchema directive as `file`:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'file',\n};\n```\n\n### Multiple files\n\nMultiple files selectors are supported by defining an array of strings having `data-url` as a format:\n\n```ts\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n format: 'data-url',\n },\n};\n```\n\n> Note that storing large dataURIs into form state might slow rendering.\n\n### File widget input ref\n\nThe included `FileWidget` exposes a reference to the `` element node as an `inputRef` component property.\n\nThis allows you to programmatically trigger the browser's file selector, which can be used in a custom file widget.\n\n### `accept` option\n\nYou can use the accept attribute to specify a filter for what file types the user can upload:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': { accept: '.pdf' },\n};\n```\n","packages/docs/package.json":"{\n \"name\": \"@rjsf/docs\",\n \"version\": \"6.11.0\",\n \"private\": true,\n \"scripts\": {\n \"docusaurus\": \"docusaurus\",\n \"start\": \"docusaurus start\",\n \"build\": \"docusaurus build\",\n \"swizzle\": \"docusaurus swizzle\",\n \"deploy\": \"docusaurus deploy\",\n \"clear\": \"docusaurus clear\",\n \"serve\": \"docusaurus serve\",\n \"write-translations\": \"docusaurus write-translations\",\n \"write-heading-ids\": \"docusaurus write-heading-ids\",\n \"typecheck\": \"tsc\",\n \"precommit\": \"lint-staged\",\n \"cs-check\": \"oxfmt --check \\\"src/**/*.{ts,tsx}\\\"\",\n \"cs-format\": \"oxfmt \\\"src/**/*.{ts,tsx}\\\"\"\n },\n \"lint-staged\": {\n \"src/**/*.{ts,tsx}\": [\n \"oxfmt\"\n ]\n },\n \"dependencies\": {\n \"@docusaurus/core\": \"^3.10.2\",\n \"@docusaurus/preset-classic\": \"^3.10.2\",\n \"@mdx-js/react\": \"^3.1.1\",\n \"prism-react-renderer\": \"^2.4.1\"\n },\n \"devDependencies\": {\n \"@docusaurus/module-type-aliases\": \"^3.10.2\",\n \"@docusaurus/plugin-content-docs\": \"^3.10.2\",\n \"@docusaurus/types\": \"^3.10.2\",\n \"@tsconfig/docusaurus\": \"^2.0.9\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.5%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"engines\": {\n \"node\": \">=20\"\n }\n}\n","packages/docs/tsconfig.json":"{\n // This file is not used in compilation. It is here just for a nice editor experience.\n \"extends\": \"@tsconfig/docusaurus/tsconfig.json\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true\n }\n}\n","packages/docs/versioned_docs/version-3.2.1/00-quickstart.md":"# Quickstart\n\nLet's walk through setup of a form after installing the dependency properly.\n\n## Form schema\n\nFirst, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou can also render an object with multiple fields with the below schema:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nFor more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](./usage/single.md).\n\n## Form uiSchema\n\nThe uiSchema is used to add more customization to the form's look and feel. Use the `classNames`\nattribute of the uiSchema to add a custom CSS class name to the form:\n\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"string\"\n};\n\nconst uiSchema = {\n classNames: \"custom-css-class\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nTo customize object fields in the uiSchema, the structure of the\nuiSchema should be `{key: value}`, where `key` is the property key and `value` is an\nobject with the uiSchema configuration for that particular property. For example:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nconst uiSchema = {\n name: {\n classNames: \"custom-class-name\"\n },\n age: {\n classNames: \"custom-class-age\"\n }\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```jsx\nconst schema = {\n type: \"object\",\n properties: {\n title: {\n type: \"string\"\n },\n done: {\n type: \"boolean\"\n }\n }\n};\n\nconst formData = {\n title: \"First task\",\n done: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: If your form has a single field, pass a single value to `formData`. ex: `formData=\"Charlie\"`\n\n> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\nYou can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `` component; see the [Form Props Reference](/docs/api-reference/form-props.md) for more details.\n\n### Controlled component\n\nBy default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the\n`onChange` and `formData` props as in the below example:\n\n```jsx\nconst App = () => {\n const [formData, setFormData] = React.useState(null);\n return ( setFormData(e.formData)}\n />);\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-templates.md":"# Custom Templates\n\nThis is an advanced feature that lets you customize even more aspects of the form:\n\n_ | Custom Field | Custom Template | Custom Widget\n--|---------- | ------------- | ----\n**What it does** | Overrides all behaviour | Overrides just the layout (not behaviour) | Overrides just the input box (not layout, labels, or help, or validation)\n**Usage** | Global or per-field | Global or per-field | Global or per-field\n**Global Example** | `` | `` | ``\n**Per-Field Example** | `\"ui:field\": MyCustomField` | `\"ui:ArrayFieldTemplate\": MyArrayTemplate` | `\"ui:widget\":MyCustomWidget`\n**Documentation** | [Custom Fields](custom-widgets-fields.md) | [FieldTemplate](#FieldTemplate) / [ArrayFieldTemplate](#ArrayFieldTemplate) / [ObjectFieldTemplate](#ObjectFieldTemplate) | [Custom Widgets](custom-widgets-fields.md)\n\n## ArrayFieldTemplate\n\nYou can use an `ArrayFieldTemplate` to customize how your arrays are rendered.\nThis allows you to customize your array, and each element in the array.\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nfunction ArrayFieldTemplate(props) {\n return (\n
\n {props.items.map(element => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:ArrayFieldTemplate\": ArrayFieldTemplate\n}\n```\n\nPlease see [customArray.js](https://github.com/rjsf-team/react-jsonschema-form/blob/4542cd254ffdc6dfaf55e8c9f6f17dc900d0d041/packages/playground/src/samples/customArray.js) for another example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `idSchema`: Object\n- `items`: An array of objects representing the items in the array. Each of the items represent a child with properties described below.\n- `onAddClick: (event?) => void`: A function that adds a new item to the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formContext`: The `formContext` object that you passed to Form.\n- `formData`: The formData for this array.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `items`:\n\n- `children`: The html for the item's content.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `key`: A stable, unique key for the array item.\n- `onAddIndexClick: (index) => (event?) => void`: Returns a function that adds a new item at `index`.\n- `onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.\n- `onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.\n- `readonly`: A boolean value stating if the array item is read-only.\n\n> Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.\n\n## FieldTemplate\n\nTo take control over the inner organization of each field (each form row), you can define a *field template* for your form.\n\nA field template is basically a React stateless component being passed field-related props, allowing you to structure your form row as you like.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nfunction CustomFieldTemplate(props) {\n const {id, classNames, label, help, required, description, errors, children} = props;\n return (\n
\n \n {description}\n {children}\n {errors}\n {help}\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:FieldTemplate\": CustomFieldTemplate\n}\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](#custom-css-class-names) defined in your uiSchema.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionField`](#custom-descriptions) defined).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `disabled`: A boolean value stating if the field is disabled.\n- `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.\n- `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `onChange`: The value change event handler; Can be called with a new value to change the value for this field.\n- `formContext`: The `formContext` object that you passed to Form.\n- `formData`: The formData for this field.\n- `registry`: The `registry` object.\n\n> Note: you can only define a single global field template for a form, but you can set individual field templates per property using `\"ui:FieldTemplate\"`.\n\n## ObjectFieldTemplate\n\n```jsx\nconst schema = {\n type: \"object\",\n title: \"Object title\",\n description: \"Object description\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nfunction ObjectFieldTemplate(props) {\n return (\n
\n {props.title}\n {props.description}\n {props.properties.map(element =>
{element.content}
)}\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:ObjectFieldTemplate\": ObjectFieldTemplate\n};\n```\n\nPlease see [customObject.js](https://github.com/rjsf-team/react-jsonschema-form/blob/4542cd254ffdc6dfaf55e8c9f6f17dc900d0d041/packages/playground/src/samples/customObject.js) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `disabled`: A boolean value stating if the object is disabled.\n- `properties`: An array of object representing the properties in the array. Each of the properties represent a child with properties described below.\n- `onAddClick: (schema: JSONSchema7) => () => void`: Returns a function that adds a new property to the object (to be used with additionalProperties)\n- `readonly`: A boolean value stating if the object is read-only.\n- `required`: A boolean value stating if the object is required.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `idSchema`: An object containing the id for this object & ids for it's properties.\n- `formData`: The form data for the object.\n- `formContext`: The `formContext` object that you passed to Form.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n- `hidden`: A boolean value stating if the property should be hidden.\n\n> Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-themes.md":"# Custom Themes\n\nThe `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component. This theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react';\nimport { withTheme } from '@rjsf/core';\n\nconst theme = { widgets: {test: () => (
test
) } };\n\nconst ThemedForm = withTheme(theme); \n\nconst Demo = () => (\n \n);\n```\n\n## Theme object properties\nThe Theme object consists of the same properties as the rjsf `Form` component (such as **widgets** and **fields**). The themed-Form component merges together any theme-specific **widgets** and **fields** with the default **widgets** and **fields**. For instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name. Thus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`. Note that you are not required to pass in either custom **widgets** or **fields** when using the custom-themed HOC component; you can make the essentially redefine the default Form by simply doing `const Form = withTheme({});`.\n\n### Widgets and fields \n**widgets** and **fields** should be in the same format as shown [here](/advanced-customization/#custom-widgets-and-fields).\n\nExample theme with custom widget:\n```jsx\nconst MyCustomWidget = (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n};\n\nconst myWidgets = {\n myCustomWidget: MyCustomWidget\n};\n\nconst ThemeObject = {widgets: myWidgets};\nexport default ThemeObject;\n```\n\nThe above can be similarly done for **fields**.\n\n### Templates\nEach template should be passed directly into the theme object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](/advanced-customization/#array-field-template) and [ErrorListTemplate](/advanced-customization/#error-list-template) in the theme object:\n```jsx\nfunction MyArrayFieldTemplate(props) {\n return (\n
\n {props.items.map(element => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nfunction MyErrorListTemplate(props) {\n const {errors} = props;\n return (\n
    \n {errors.map(error => (\n
  • \n {error.stack}\n
    • \n ))}\n
\n );\n}\n\nconst ThemeObject = {\n ArrayFieldTemplate: MyArrayFieldTemplate, \n ErrorList: MyErrorListTemplate,\n widgets: myWidgets\n};\n\nexport default ThemeObject;\n```\n\n## Overriding other Form props\nJust as the theme can override **widgets**, **fields**, any of the field templates, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.\n```jsx\nconst ThemeObject = {\n ArrayFieldTemplate: MyArrayFieldTemplate, \n fields: myFields,\n showErrorList: false,\n widgets: myWidgets\n};\n```\n\nThus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-widgets-fields.md":"# Custom Widgets and Fields\n\nThe API allows to specify your own custom *widget* and *field* components:\n\n- A *widget* represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A *field* usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n## Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `ObjectField` renders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the `fields` and `widgets` props:\n\n```jsx\nconst schema = {\n type: \"boolean\",\n default: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkbox\"\n};\n\nconst CustomCheckbox = function(props) {\n return (\n \n );\n};\n\nconst widgets = {\n CheckboxWidget: CustomCheckbox\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```jsx\nconst customFields = {StringField: CustomString};\nconst customWidgets = {CheckboxWidget: CustomCheckbox};\n\nfunction MyForm(props) {\n return ;\n}\n```\n\nThe default fields you can override are:\n\n - `ArrayField`\n - `BooleanField`\n - `DescriptionField`\n - `OneOfField`\n - `AnyOfField`\n - `NullField`\n - `NumberField`\n - `ObjectField`\n - `SchemaField`\n - `StringField`\n - `TitleField`\n - `UnsupportedField`\n\nThe default widgets you can override are:\n\n - `AltDateTimeWidget`\n - `AltDateWidget`\n - `CheckboxesWidget`\n - `CheckboxWidget`\n - `ColorWidget`\n - `DateTimeWidget`\n - `DateWidget`\n - `EmailWidget`\n - `FileWidget`\n - `HiddenWidget`\n - `PasswordWidget`\n - `RadioWidget`\n - `RangeWidget`\n - `SelectWidget`\n - `TextareaWidget`\n - `TextWidget`\n - `UpDownWidget`\n - `URLWidget`\n\n\n## Adding your own custom widgets\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nconst uiSchema = {\n \"ui:widget\": (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this field;\n- `schema`: The JSONSchema subschema object for this field;\n- `uiSchema`: The uiSchema for this field;\n- `value`: The current value for this field;\n- `placeholder`: the placeholder for the field, if any;\n- `required`: The required status of this field;\n- `disabled`: `true` if the widget is disabled;\n- `readonly`: `true` if the widget is read-only;\n- `autofocus`: `true` if the widget should autofocus;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the the widget id and value;\n- `onFocus`: The input focus event handler; call it with the the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `formContext`: The `formContext` object that you passed to Form.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n\n### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```jsx\nconst MyCustomWidget = (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n};\n\nconst widgets = {\n myCustomWidget: MyCustomWidget\n};\n\nconst schema = {\n type: \"string\"\n};\n\nconst uiSchema = {\n \"ui:widget\": \"myCustomWidget\"\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nfunction MyCustomWidget(props) {\n const {options} = props;\n const {color, backgroundColor} = options;\n return ;\n}\n\nMyCustomWidget.defaultProps = {\n options: {\n color: \"red\"\n }\n};\n\nconst uiSchema = {\n \"ui:widget\": MyCustomWidget,\n \"ui:options\": {\n backgroundColor: \"yellow\"\n }\n};\n\n// renders red on yellow input\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: This also applies to [registered custom components](#custom-component-registration).\n\n> Note: Since v0.41.0, the `ui:widget` object API, where a widget and options were specified with `\"ui:widget\": {component, options}` shape, is deprecated. It will be removed in a future release.\n\n### Customizing widgets text input\n\nAll the widgets that render a text input use the `BaseInput` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInput` component in the `widgets` property of `Form` (see [Custom component registration](#custom-component-registration)).\n\n## Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a *latitude* and a *longitude*:\n\n```jsx\nconst schema = {\n type: \"object\",\n required: [\"lat\", \"lon\"],\n properties: {\n lat: {type: \"number\"},\n lon: {type: \"number\"}\n }\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n constructor(props) {\n super(props);\n this.state = {...props.formData};\n }\n\n onChange(name) {\n return (event) => {\n this.setState({\n [name]: parseFloat(event.target.value)\n }, () => this.props.onChange(this.state));\n };\n }\n\n render() {\n const {lat, lon} = this.state;\n return (\n
\n \n \n
\n );\n }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema = {\"ui:field\": \"geo\"};\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields = {geo: GeoPosition};\n\n// Render the form with all the properties we just defined passed\n// as props\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: Registered fields can be reused across the entire schema.\n\n### Field props\n\nA field component will always be passed the following props:\n\n - `schema`: The JSON schema for this field;\n - `uiSchema`: The [uiSchema](#the-uischema-object) for this field;\n - `idSchema`: The tree of unique ids for every child field;\n - `formData`: The data for this field;\n - `errorSchema`: The tree of errors for this field and its children;\n - `registry`: A [registry](#the-registry-object) object (read next).\n - `formContext`: A [formContext](#the-formcontext-object) object (read next).\n\n## The `registry` object\n\nThe `registry` is an object containing the registered custom fields and widgets as well as the root schema definitions.\n\n - `fields`: The [custom registered fields](#custom-field-components). By default this object contains the standard `SchemaField`, `TitleField` and `DescriptionField` components;\n - `widgets`: The [custom registered widgets](#custom-widget-components), if any;\n - `rootSchema`: The root schema, which can contain referenced [definitions](#schema-definitions-and-references);\n - `formContext`: The [formContext](#the-formcontext-object) object;\n - `definitions` (deprecated since v2): Equal to `rootSchema.definitions`.\n\nThe registry is passed down the component tree, so you can access it from your custom field and `SchemaField` components.\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's an example:\n\n```jsx\n\nconst CustomSchemaField = function(props) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields = {\n SchemaField: CustomSchemaField\n};\n\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n","packages/docs/versioned_docs/version-3.2.1/advanced-customization/internals.md":"# Internals\n\nMiscellaneous internals of react-jsonschema-form are listed here.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. We currently support JSON Schema-07 by default, but we also support other JSON schema versions through the [custom schema validation](../usage/validation/#custom-schema-validation) feature. Due to the limitation of form widgets, there are some exceptions as follows:\n\n* `additionalItems` keyword for arrays\n\n This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n\n* `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`)\n\n The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties \"outside\" of the `anyOf/oneOf`.\n\n You can also use `oneOf` with [schema dependencies](../usage/dependencies.md) to dynamically add schema properties based on input data.\n\n The `allOf` keyword is supported; it uses [json-schema-merge-allof](https://github.com/mokkabonna/json-schema-merge-allof) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema.\n\n* `\"additionalProperties\":false` produces incorrect schemas when used with [schema dependencies](#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `\"additionalProperties\":false` when you use schema dependencies. See [#848](https://github.com/rjsf-team/react-jsonschema-form/issues/848) [#902](https://github.com/rjsf-team/rjsf-team/issues/902) [#992](https://github.com/rjsf-team/rjsf-team/issues/992)\n\n## Handling of schema defaults\n\nThis library automatically fills default values defined in the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](#schema-dependencies).\n\nSince there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.\n\nCheck out the defaults example on the [live playground](https://rjsf-team.github.io/react-jsonschema-form/) to see this in action.\n\n### Merging of defaults into the form data\n\nThere are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.\n\nThis are the rules which are used when injecting the defaults:\n\n- When there is a scalar in the form data, nothing is changed.\n- When the value is `undefined` in the form data, the default is created in the form data.\n- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.\n- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.\n\n### Merging of defaults within the schema\n\nIn the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together with the \"deeper\" not having precedence. If the parent node defines properties, which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.\n\nFor arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.\n\n## Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons). If you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n```css\ni.glyphicon { display: none; }\n.btn-add::after { content: 'Add'; }\n.array-item-move-up::after { content: 'Move Up'; }\n.array-item-move-down::after { content: 'Move Down'; }\n.array-item-remove::after { content: 'Remove'; }\n```\n\n## Submit form programmatically\nYou can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.\nThis method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.\n\n```jsx\nconst onSubmit = ({formData}) => console.log(\"Data submitted: \", formData);\nlet yourForm;\n\nconst schema = {\n type: \"string\"\n};\n\nrender((\n {yourForm = form;}}/>\n), document.getElementById(\"app\"));\n\nyourForm.submit();\n```\n","packages/docs/versioned_docs/version-3.2.1/api-reference/form-props.md":"---\ntitle: Props\n---\n\n# <Form /> props\n\n## acceptcharset\n\nThe value of this prop will be passed to the `accept-charset` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-accept-charset).\n\n## action\n\nThe value of this prop will be passed to the `action` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action).\n\nNote that this just renders the `action` attribute in the HTML markup. There is no real network request being sent to this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()` and then calls the [`onSubmit`](#onSubmit) function, where you could send a request programmatically with `fetch` or similar.\n\n## additionalMetaSchemas\n\nThis prop allows you to validate the form data against another JSON Schema meta schema, for example, JSON Schema draft-04. See [Validation](../usage/validation.md) for more information.\n\n## ArrayFieldTemplate\n\nReact component used to customize how alls arrays are rendered on the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## autoComplete\n\nThe value of this prop will be passed to the `autocomplete` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete).\n\n## autocomplete\n\nDeprecated, same functionality as `autoComplete`\n\n## className\n\nThe value of this prop will be passed to the `class` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## children\n\nYou can provide custom buttons to your form via the `Form` component's `children`. Otherwise a default submit button will be rendered.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n
\n \n \n
\n \n), document.getElementById(\"app\"));\n```\n\n> **Warning:** There needs to be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n## customFormats\n\nThis prop allows you to define custom formats for validation. See [Validation](../usage/validation.md) for more information.\n\n## disabled\n\nIt's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n
\n), document.getElementById(\"app\"));\n```\n\nIf you just want to disable some of the fields, see the `ui:disabled` parameter in `uiSchema`.\n\n## readonly\n\nIt's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf you just want to make some of the fields read-only, see the `ui:readonly` parameter in `uiSchema`.\n\n## enctype\n\nThe value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).\n\n## extraErrors\n\nThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation. See [Validation](../usage/validation.md) for more information.\n\n## ErrorList\n\nYou can pass a React component to this prop to customize how form errors are displayed. See [Validation](../usage/validation.md) for more information.\n\n## fields\n\nDictionary of registered fields in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n## FieldTemplate\n\nReact component used to customize each field of the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## formContext\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.\n\n## formData\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema.\n\n## id\n\nThe value of this prop will be passed to the `id` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## idPrefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis will render `` instead of ``\n\n## liveOmit\n\nIf `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field will be removed whenever `onChange` is called. Set to `false` by default.\n\n## liveValidate\n\nIf set to true, the form will perform validation and show any validation errors whenever the form data is changed, rather than just on submit.\n\n## method\n\nThe value of this prop will be passed to the `method` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method).\n\n## name\n\nThe value of this prop will be passed to the `name` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name).\n\n## noHtml5Validate\n\nIf set to true, turns off HTML5 validation on the form. Set to `false` on default.\n\n## noValidate\n\nIf set to true, turns off all validation. Set to `false` by default.\n\n## ObjectFieldTemplate\n\nReact component used to customize how all objects are rendered in the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## omitExtraData\n\nIf set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.\n\n## onBlur\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n## onChange\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same args as `onSubmit` any time a value is updated in the form.\n\n## onError\n\nTo react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\nconst onError = (errors) => console.log(\"I have\", errors.length, \"errors to fix\");\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## onFocus\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## onSubmit\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form data you're usually after. The original event will also be passed as a second parameter:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\nconst onSubmit = ({formData}, e) => console.log(\"Data submitted: \", formData);\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, you may need to set the `omitExtraData` and/or `liveOmit` props.\n\n## schema\n\nForm schema. We support JSON schema draft-07 by default. See [Schema Reference](https://json-schema.org/draft-07/json-schema-release-notes.html) for more information.\n\n## showErrorList\n\nWhen this prop is set to true, a list of errors (or the custom error list defined in the `ErrorList`) will also show. When set to false, only inline input validation errors will be shown. Set to `true` by default. See [Validation](../usage/validation.md) for more information.\n\n## tagName\n\nIt's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.\n\n```jsx\n\n```\n\nYou can also provide a class/function component.\n\n\n```jsx\nconst CustomForm = props => \n// ...\n\n```\n\n## target\n\nThe value of this prop will be passed to the `target` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-target).\n\n## transformErrors\n\nA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation. See [Validation](../usage/validation.md) for more information.\n\n## uiSchema\n\nForm uiSchema. See [uiSchema Reference](uiSchema.md) for more information.\n\n## validate\n\nThe `validate` prop requires a function that specifies custom validation rules for the form. See [Validation](../usage/validation.md) for more information.\n\n## widgets\n\nDictionary of registered widgets in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n","packages/docs/versioned_docs/version-3.2.1/api-reference/themes/semantic-ui/uiSchema.md":"# uiSchema Options for Semantic-UI\n\nThere are various options to pass to semantic theme fields.\n\nNote that every semantic property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {semantic:{[property]: [value]}}}`\n\nIn other words, the following uiSchema is equivalent:\n\n> Note: All fields have the following settings below as their default\n\n```\nfluid: Take on the size of its container.\ninverted: Format to appear on dark backgrounds.\n```\n\n```json\n{\n \"ui:options\": {\n \"semantic\" : {\n \"fluid\": true,\n \"inverted\": false,\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\",\n }\n }\n }\n}\n```\n#### Semantic Widget Optional Properties\n - [Semantic props for TextWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for CheckboxWidget](https://react.semantic-ui.com/modules/checkbox/)\n - [Semantic props for SelectWidget](https://react.semantic-ui.com/modules/dropdown/)\n - [Semantic props for RangeWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for RadioWidget](https://react.semantic-ui.com/addons/radio/)\n - [Semantic props for PasswordWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for UpDownWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for TextAreaWidget](https://react.semantic-ui.com/addons/text-area/)\n\n\n\n## errorOptions\n\nThe uiSchema semantic object accepts an `errorOptions` property for each field of the schema:\n\n```\nsize: determines the size of the error message dialog\npointing: determines the direction of the arrow on the error message dialog\n```\n\nBelow are the current defaults\n```jsx\nconst uiSchema = {\n \"ui:options\": {\n \"semantic\" : {\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\",\n }\n }\n }\n};\n```\n\n## semantic options uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the semantic uiSchema value within the `ui:options` property:\n\n\n```\nwrapItem: wrap each array item in a Segment\nhorizontalButtons: horizontal buttons instead of the default vertical\n```\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n \"semantic\": {\n \"wrapItem\": true,\n \"horizontalButtons\": true\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## formContext\n\nThe formContext semantic object accepts `wrapContent` ,`wrapLabel` properties.\n\n```\nwrapContent: wrap all inputs field content in a div, for custom styling\nwrapLabel: wrap all labels in a div, for custom styling via CSS\n```\n\n```jsx\n\n```\n","packages/docs/versioned_docs/version-3.2.1/api-reference/uiSchema.md":"# uiSchema\nJSON Schema is limited for describing how a given data type should be rendered as a form input component. That's why this library introduces the concept of uiSchema.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.\n\nNote that every property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {[property]: [value]}}`, or `{\"ui:[property]\": value}`.\n\nIn other words, the following uiSchemas are equivalent:\n\n```json\n{\n \"ui:title\": \"Title\",\n \"ui:description\": \"Description\"\n}\n```\n\n```json\n{\n \"ui:options\": {\n \"title\": \"Title\",\n \"description\": \"Description\"\n }\n}\n```\n\n## classNames\n\nThe uiSchema object accepts a `classNames` property for each field of the schema:\n\n```jsx\nconst uiSchema = {\n title: {\n classNames: \"task-title foo-bar\"\n }\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n## autofocus\n\nIf you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"textarea\",\n \"ui:autofocus\": true\n}\n```\n\n## description\n\nSometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:description\": \"The best password\"\n};\n```\n\n## disabled\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n## enumDisabled\n\nTo disable an option, use the `enumDisabled` property in uiSchema.\n\n```js\nconst schema = {\n type: \"string\",\n enum: [\"one\", \"two\", \"three\"],\n};\n\nconst uiSchema={\n \"ui:enumDisabled\": ['two'],\n}\n```\n\n## help\n\nSometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:help\": \"Hint: Make it strong!\"\n};\n```\n\n![](https://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s) (after contextualized errors, if any).\n\n## inputType\n\nTo change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:options\": {\n inputType: 'tel'\n }\n};\n```\n\n## label\n\nField labels are rendered by default. Labels may be omitted by setting the `label` option to `false` in the `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:options\": {\n label: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## order\n\nThis property allows you to reorder the properties that are shown for a particular object. See [Objects](../usage/objects.md) for more information.\n\n## placeholder\n\nYou can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:\n\n```jsx\nconst schema = {type: \"string\", format: \"uri\"};\nconst uiSchema = {\n \"ui:placeholder\": \"http://\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```jsx\nconst schema = {type: \"string\", enum: [\"First\", \"Second\"]};\nconst uiSchema = {\n \"ui:placeholder\": \"Choose an option\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## readonly\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only. This is equivalent to setting the `readOnly` property in the schema.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n## rootFieldId\n\nBy default, this library will generate ids unique to the form for all rendered widgets. If you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```js\nconst uiSchema = {\n \"ui:rootFieldId\": \"myform\"\n};\n```\n\nThis will make all widgets have an id prefixed with `myform`.\n\n## rows\n\nYou can set the initial height of a textarea widget by specifying `rows` option.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"textarea\",\n \"ui:options\": {\n rows: 15\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## title\n\nSometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:title\": \"Your password\"\n};\n```\n## Theme Options\n[Semantic UI](themes/semantic-ui/uiSchema.md)\n","packages/docs/versioned_docs/version-3.2.1/usage/arrays.md":"# Arrays\n\nArrays are defined with a type equal to `array`, and array items' schemas are specified in the `items` keyword.\n\n## Arrays of a single field\n\nArrays of a single field type can be specified as follows:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Arrays of objects\n\nArrays of objects can be specified as follows:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n }\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n items: {\n \"ui:widget\": \"textarea\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## The `additionalItems` keyword\n\nThe `additionalItems` keyword allows the user to add additional items of a given schema. For example:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n },\n additionalItems: {\n type: \"boolean\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Array item options\n\n### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n orderable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n addable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n removable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n\n## Multiple-choice list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. There are two alternative widgets for picking multiple elements from a list of choices. Typically this applies when a schema has an `enum` list for the `items` property of an `array` field, and the `uniqueItems` property set to `true`.\n\nExample:\n\n```jsx\nconst schema = {\n type: \"array\",\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nBy default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:\n\n```js\nconst schema = {\n type: \"array\",\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkboxes\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n\n## Specifying the minimum or maximum number of items\n\nNote that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.\n\nExample:\n\n```jsx\nconst schema = {\n type: \"array\",\n minItems: 2,\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou can also specify the maximum number of items in an array using the `maxItems` property.\n\n\n## Inline checkboxes\n\nBy default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:\n\n```js\nconst schema = {\n type: \"array\",\n minItems: 2,\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkboxes\",\n \"ui:options\": {\n inline: true\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```","packages/docs/versioned_docs/version-3.2.1/usage/definitions.md":"# Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:\n\n```jsx\nconst schema = {\n \"definitions\": {\n \"address\": {\n \"type\": \"object\",\n \"properties\": {\n \"street_address\": { \"type\": \"string\" },\n \"city\": { \"type\": \"string\" },\n \"state\": { \"type\": \"string\" }\n },\n \"required\": [\"street_address\", \"city\", \"state\"]\n }\n },\n \"type\": \"object\",\n \"properties\": {\n \"billing_address\": { \"$ref\": \"#/definitions/address\" },\n \"shipping_address\": { \"$ref\": \"#/definitions/address\" }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nNote that this library only supports local definition referencing. The value in the `$ref` keyword should be a [JSON Pointer](https://tools.ietf.org/html/rfc6901) in URI fragment identifier format.\n","packages/docs/versioned_docs/version-3.2.1/usage/dependencies.md":"# Dependencies\n\nreact-jsonschema-form supports the `dependencies` keyword from an earlier draft of JSON Schema (note that this is not part of the latest JSON Schema spec, though). Dependencies can be used to create dynamic schemas that change fields based on what data is entered.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" },\n \"billing_address\": { \"type\": \"string\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": [\"billing_address\"]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined, making them both required if either is defined.\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" },\n \"billing_address\": { \"type\": \"string\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": [\"billing_address\"],\n \"billing_address\": [\"credit_card\"]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))*\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": {\n \"properties\": {\n \"billing_address\": { \"type\": \"string\" }\n },\n \"required\": [\"billing_address\"]\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))*\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```jsx\nconst schema = {\n \"title\": \"Person\",\n \"type\": \"object\",\n \"properties\": {\n \"Do you have any pets?\": {\n \"type\": \"string\",\n \"enum\": [\n \"No\",\n \"Yes: One\",\n \"Yes: More than one\"\n ],\n \"default\": \"No\"\n }\n },\n \"required\": [\n \"Do you have any pets?\"\n ],\n \"dependencies\": {\n \"Do you have any pets?\": {\n \"oneOf\": [\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"No\"\n ]\n }\n }\n },\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"Yes: One\"\n ]\n },\n \"How old is your pet?\": {\n \"type\": \"number\"\n }\n },\n \"required\": [\n \"How old is your pet?\"\n ]\n },\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"Yes: More than one\"\n ]\n },\n \"Do you want to get rid of any?\": {\n \"type\": \"boolean\"\n }\n },\n \"required\": [\n \"Do you want to get rid of any?\"\n ]\n }\n ]\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.","packages/docs/versioned_docs/version-3.2.1/usage/objects.md":"# Objects\n\n## Object properties\n\nObjects are defined with a type equal to `object` and properties specified in the `properties` keyword.\n\n```jsx\nconst schema = {\n \"title\": \"My title\",\n \"description\": \"My description\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"age\": {\n \"type\": \"number\"\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Required properties\n\nYou can specify which properties are required using the `required` attribute:\n\n```jsx\nconst schema = {\n \"title\": \"My title\",\n \"description\": \"My description\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"age\": {\n \"type\": \"number\"\n }\n },\n \"required\": [\"name\"]\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Specifying property order\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```jsx\nconst schema = {\n type: \"object\",\n properties: {\n foo: {type: \"string\"},\n bar: {type: \"string\"}\n }\n};\n\nconst uiSchema = {\n \"ui:order\": [\"bar\", \"foo\"]\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```js\nconst uiSchema = {\n \"ui:order\": [\"bar\", \"*\"]\n};\n```\n\n## Additional properties\n\nThe `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n }\n },\n \"additionalProperties\": {\n \"type\": \"number\",\n \"enum\": [1, 2, 3]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this way, an add button for new properties is shown by default.\n\nYou can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.\n\n### `expandable` option\n\nYou can turn support for `additionalProperties` off with the `expandable` option in `uiSchema`:\n\n```js\nconst uiSchema = {\n \"ui:options\": {\n expandable: false\n }\n};\n```","packages/docs/versioned_docs/version-3.2.1/usage/oneof.md":"","packages/docs/versioned_docs/version-3.2.1/usage/single.md":"","packages/docs/versioned_docs/version-3.2.1/usage/themes.md":"","packages/docs/versioned_docs/version-3.2.1/usage/validation.md":"","packages/docs/versioned_docs/version-3.2.1/usage/widgets.md":"","packages/docs/versioned_docs/version-4.2.3/00-quickstart.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-templates.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-themes.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-widgets-fields.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/internals.md":"","packages/docs/versioned_docs/version-4.2.3/advanced-customization/material-ui/customizing-material-ui.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/form-props.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/themes/chakra-ui/uiSchema.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/themes/semantic-ui/uiSchema.md":"","packages/docs/versioned_docs/version-4.2.3/api-reference/uiSchema.md":"","packages/docs/versioned_docs/version-4.2.3/usage/arrays.md":"","packages/docs/versioned_docs/version-4.2.3/usage/definitions.md":"","packages/docs/versioned_docs/version-4.2.3/usage/dependencies.md":"","packages/docs/versioned_docs/version-4.2.3/usage/objects.md":"","packages/docs/versioned_docs/version-4.2.3/usage/oneof.md":"","packages/docs/versioned_docs/version-4.2.3/usage/single.md":"","packages/docs/versioned_docs/version-4.2.3/usage/themes.md":"","packages/docs/versioned_docs/version-4.2.3/usage/validation.md":"","packages/docs/versioned_docs/version-4.2.3/usage/widgets.md":"","packages/docs/versioned_docs/version-5.24.10/01-quickstart.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-templates.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-themes.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-widgets-fields.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/internals.md":"","packages/docs/versioned_docs/version-5.24.10/advanced-customization/typescript.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/form-props.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/antd/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/chakra-ui/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/themes/semantic-ui/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/uiSchema.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/utility-functions.md":"","packages/docs/versioned_docs/version-5.24.10/api-reference/validator-ajv8.md":"","packages/docs/versioned_docs/version-5.24.10/contributing.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/arrays.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/definitions.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/dependencies.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/objects.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/oneof.md":"","packages/docs/versioned_docs/version-5.24.10/json-schema/single.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v2.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v3.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v4.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/migration-guides/v5.x upgrade guide.md":"","packages/docs/versioned_docs/version-5.24.10/usage/themes.md":"","packages/docs/versioned_docs/version-5.24.10/usage/validation.md":"","packages/docs/versioned_docs/version-5.24.10/usage/widgets.md":"","packages/docs/versioned_sidebars/version-3.2.1-sidebars.json":"","packages/docs/versioned_sidebars/version-4.2.3-sidebars.json":"","packages/docs/versioned_sidebars/version-5.24.10-sidebars.json":"","packages/docs/versions.json":"","packages/fluentui-rc/README.md":"","packages/mantine/README.md":"","packages/mui/README.md":"","packages/primereact/README.md":"","packages/react-bootstrap/README.md":"","packages/semantic-ui/README.md":"","packages/shadcn/README.md":"","packages/snapshot-tests/README.md":"","packages/utils/README.md":"","packages/validator-ajv8/README.md":"","packages/validator-ata/README.md":"","packages/validator-cfworker/README.md":""},"items":[{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages (parallel)\npnpm run build\n\n# Build all packages (sequential, use if parallel causes issues)\npnpm run build-serial\n\n# Run all tests\npnpm test\n\n# Lint (oxlint, type-aware)\npnpm run lint\n\n# Typecheck every package and its tests\npnpm run typecheck\n\n# Dead code / unused dependency check\npnpm run knip\n\n# Format check / format source files (oxfmt)\npnpm run cs-check\npnpm run cs-format\n\n# Format check / format every file in the repo, including configs and markdown\npnpm run format-check\npnpm run format\n\n# Run a single package's tests\ncd packages/core && pnpm test\n\n# Watch mode for a single package\ncd packages/core && pnpm run test:watch\n\n# Update snapshots\ncd packages/snapshot-tests && pnpm run test:update\n\n# Start the playground (interactive demo)\ncd packages/playground && pnpm start\n\n# Full sanity check (lint + knip + build + test)\npnpm run sanity-check\n```\n\nCI runs lint, knip, build, typecheck, and test in that order, so run those before pushing. Per-package `tsc` misses the test and playground projects; only the root `typecheck` covers them.\n\nIndividual package builds run `build:ts` (`tsc -b`, emits `lib/`) and then bundle `dist/` in three formats: `build:cjs` and `build:esm` via esbuild, `build:umd` via rollup.\n\n## Architecture\n\nThis is an **pnpm workspaces + Nx** monorepo. All packages live under `packages/` and are scoped as `@rjsf/*`.\n\n### Package roles\n\n| Package | Role |\n| ------------------------------------------------------------------- | ------------------------------------------------------------------------ |\n| `@rjsf/utils` | Shared types, 80+ utility functions, schema helpers. No UI dependencies. |\n| `@rjsf/core` | Core `Form` component, Bootstrap 3 as default theme, `withTheme()` HOC. |\n| `@rjsf/validator-ajv8` | AJV 8-based validator. Exported via `customizeValidator()`. |\n| `@rjsf/snapshot-tests` | Shared snapshot test suite consumed by all theme packages. |\n| Theme packages (`@rjsf/mui`, `@rjsf/antd`, `@rjsf/chakra-ui`, etc.) | UI-library-specific implementations of fields, widgets, and templates. |\n| `@rjsf/playground` | Vite app importing all themes, used for manual testing and demos. |\n| `@rjsf/docs` | Docusaurus documentation site. |\n\n### Registry pattern (the plugin system)\n\nThe `Registry` object is the core extension point passed to every field/widget/template:\n\n```typescript\nRegistry = {\n fields, // Map of field type → Field component\n widgets, // Map of widget name → Widget component\n templates, // Layout/structural templates\n rootSchema, // Root JSON Schema\n formContext, // Arbitrary context object threaded to all components\n schemaUtils, // Schema parsing & validation helpers\n translateString,\n globalFormOptions, // Form-level options available to every template, field, and widget\n globalUiOptions, // Optional; global ui:options applied to every field\n uiSchemaDefinitions, // Optional; uiSchema fragments keyed by $ref path, applied when that $ref resolves\n};\n```\n\nOverride fields/widgets/templates per-form via props, or globally via `withTheme()`.\n\n### Theme pattern\n\nEvery theme package follows the same structure:\n\n1. Imports `withTheme` from `@rjsf/core`\n2. Defines custom `Templates`, `Widgets`, and optionally `Fields`\n3. Calls `withTheme({ templates, widgets, fields })` to produce a themed `Form`\n4. Exports: `Form` (default), `Theme`, `Templates`, `Widgets`\n\n### Field → Widget → Template hierarchy\n\n- **Fields** handle schema-level logic (ObjectField, ArrayField, MultiSchemaField for oneOf/anyOf, etc.)\n- **Widgets** handle individual input rendering (TextWidget, SelectWidget, CheckboxWidget, etc.)\n- **Templates** control structural/layout rendering (FieldTemplate, ArrayFieldTemplate, ButtonTemplates, etc.)\n\nFields select which widget to render based on schema `type` and `ui:widget`. Templates wrap the output for consistent styling.\n\nWhen making a change to a widget or template, consider if the change should be generalized to all theme packages. If substantial logic is duplicated across themes, consider refactoring the logic to `@rjsf/utils` or `@rjsf/core`.\n\n### Form rendering flow\n\n1. Caller provides `schema`, `validator` (required), `formData`, and `uiSchema`\n2. `Form` creates `schemaUtils` from validator + schema\n3. Schema is recursively decomposed into fields → widgets → templates\n4. On change/blur: callbacks fire with updated `formData` and `errorSchema`\n5. On submit: full validation runs, then `onSubmit` fires (or `onError` if invalid)\n\n### Key `@rjsf/utils` exports to know\n\n- Schema helpers: `findSchemaDefinition`, `mergeSchemas`, `getSchemaType`, `createSchemaUtils`\n- Form data: `mergeDefaultsWithFormData`, `removeOptionalEmptyObjects`\n- Error handling: `toErrorSchema`, `toErrorList`\n- Enum helpers: `enumOptionsSelectValue`, `enumOptionsDeselectValue`\n- React hooks: `useDeepCompareMemo`, `useFileWidgetProps`, `useAltDateWidgetProps`\n\n## Code style\n\n- **TypeScript strict mode**, `esnext` target, `verbatimModuleSyntax` (type-only imports must be `import type`), relative imports include the `.ts`/`.tsx` extension\n- **oxfmt** (`.oxfmtrc.json`): single quotes, JSX single quotes, 120-char print width, sorted imports with React first\n- **oxlint** (`.oxlintrc.json`): the `airbnb-typescript` rule set translated to oxlint, plus `typescript`, `react`, `jsx-a11y`, and `import` plugins; enforces curly braces, no-console, React rules of hooks\n- **knip** (`knip.jsonc`): fails CI on unused files, exports, and dependencies\n- Pre-commit hook (Husky + lint-staged) runs `oxlint --fix` and `oxfmt` on staged files\n\n## Code comments\n\n- Default to no comments. Write self-documenting code — clear names and structure — as the primary means of explanation.\n- When a comment is warranted, explain the WHY (rationale, constraints, non-obvious tradeoffs), not the WHAT — well-named code already says what it does.\n- Don't leave \"before/after\" or diff-style commentary in code comments or in this file. That belongs in commit messages and PR descriptions, not in code that has to keep reading true after the change ships.\n\n## Changelog\n\n- When adding an entry to `CHANGELOG.md`, append it as the last bullet under the relevant package's heading (e.g. `## @rjsf/daisyui`) — after the existing bullets, not inserted above or among them.\n\n## Testing\n\n- Vitest, jsdom, Testing Library; shared config in `testing/vitest.base.mts`, extended per package\n- Tests resolve `@rjsf/*` imports to TypeScript source via the `@rjsf/source` export condition, so no build is needed before running them\n- `@rjsf/utils` and the validator packages enforce 100% coverage\n- Snapshot tests in `@rjsf/snapshot-tests` are shared across theme packages — run `test:update` there when changing core rendering\n- Node >=20 required; `.nvmrc` pins 24\n","isInternal":false,"tokens":1730,"sizeBytes":7463},{"name":"01-quickstart.md","path":"packages/docs/docs/01-quickstart.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/01-quickstart.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Quickstart\n\nLet's walk through setup of a form after installing the dependency properly.\nNOTE: As of version 5, the `Form` now requires you to provide a `validator` implementation. We recommend the one from `@rjsf/validator-ajv8`.\n\n## Form schema\n\nFirst, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also render an object with multiple fields with the below schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nFor more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](json-schema/single.md).\n\n## Form uiSchema\n\nThe uiSchema is used to add more customization to the form's look and feel. Use the `classNames`\nattribute of the uiSchema to add a custom CSS class name to the form:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:classNames': 'custom-css-class',\n};\n\nrender(, document.getElementById('app'));\n```\n\nTo customize object fields in the uiSchema, the structure of the\nuiSchema should be `{key: value}`, where `key` is the property key and `value` is an\nobject with the uiSchema configuration for that particular property. For example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n name: {\n 'ui:classNames': 'custom-class-name',\n },\n age: {\n 'ui:classNames': 'custom-class-age',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n title: {\n type: 'string',\n },\n done: {\n type: 'boolean',\n },\n },\n};\n\nconst formData = {\n title: 'First task',\n done: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If your form has a single field, pass a single value to `formData`. ex: `formData=\"Charlie\"`\n\n> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\nYou can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `` component; see the [Form Props Reference](./api-reference/form-props.md) for more details.\n\n### Controlled component\n\nBy default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the\n`onChange` and `formData` props as in the below example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst App = () => {\n const [formData, setFormData] = React.useState(null);\n return (\n setFormData(e.formData)}\n validator={validator}\n />\n );\n};\n\nrender(, document.getElementById('app'));\n```\n","isInternal":false,"tokens":1125,"sizeBytes":4415},{"name":"custom-templates.md","path":"packages/docs/docs/advanced-customization/custom-templates.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/advanced-customization/custom-templates.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Custom Templates\n\nThis is an advanced feature that lets you customize even more aspects of the form:\n\n| | Custom Field | Custom Template | Custom Widget |\n| --------------------- | ----------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| **What it does** | Overrides all behaviour | Overrides just the layout (not behaviour) | Overrides just the input box (not layout, labels, or help, or validation) |\n| **Usage** | Global or per-field | Global or per-field | Global or per-field |\n| **Global Example** | `` | `` | `` |\n| **Per-Field Example** | `\"ui:field\": MyCustomField` | `\"ui:ArrayFieldTemplate\": MyArrayTemplate` | `\"ui:widget\":MyCustomWidget` |\n| **Documentation** | [Custom Fields](custom-widgets-fields.md) | See documentation below | [Custom Widgets](custom-widgets-fields.md) |\n\nIn version 5, all existing `templates` were consolidated into a new `TemplatesType` interface that is provided as part of the `Registry`.\nThey can also be overloaded globally on the `Form` via the `templates` prop as well as globally or per-field through the `uiSchema`.\nFurther, many new templates were added or repurposed from existing `widgets` and `fields` in an effort to simplify the effort needed by theme authors to build new and/or maintain current themes.\nThese new templates can also be overridden by individual users to customize the specific needs of their application.\nA special category of templates, `ButtonTemplates`, were also added to support the easy replacement of the `Submit` button on the form, the `Add` and `Remove` buttons associated with `additionalProperties` and `patternProperties` on objects and elements of arrays, as well as the `Move up` and `Move down` buttons used for reordering arrays.\nThis category, unlike the others, can only be overridden globally via the `templates` prop on `Form`.\n\nBelow is the table that lists all the `templates`, their props interface, their `uiSchema` name and from where they originated in the previous version of RJSF:\n\n| Template | Props Type | UiSchema name | Origin |\n| --------------------------------------------------------------- | ---------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [ArrayFieldTemplate](#arrayfieldtemplate) | ArrayFieldTemplateProps | ui:ArrayFieldTemplate | Formerly `Form.ArrayFieldTemplate` or `Registry.ArrayFieldTemplate` |\n| [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate) | ArrayFieldDescriptionProps | ui:ArrayFieldDescriptionTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemTemplate](#arrayfielditemtemplate) | ArrayFieldItemTemplateProps | ui:ArrayFieldItemTemplate | Formerly an internal class for `ArrayFieldTemplate`s in all themes, refactored as a template in each theme, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemButtonsTemplate](#arrayfielditembuttonstemplate) | ArrayFieldItemButtonsTemplateProps | ui:ArrayFieldItemButonsTemplate | Formerly an internal class for `ArrayFieldItemTemplate`s in all themes, refactored as a template in the `core`, used in all `ArrayFieldItemTemplate` implementations |\n| [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) | ArrayFieldTitleProps | ui:ArrayFieldTitleTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations. |\n| [BaseInputTemplate](#baseinputtemplate) | WidgetProps | ui:BaseInputTemplate | Formerly a `widget` in `@rjsf.core` moved to `templates` and newly implemented in each theme to maximize code reuse. |\n| [CyclicSchemaExpandTemplate](#cyclicschemaexpandtemplate) | CyclicSchemaExpandProps | ui:CyclicSchemaExpandTemplate | Added in RJSF v6 to support circular `$ref` cycle detection |\n| [DescriptionFieldTemplate](#descriptionfieldtemplate) | DescriptionFieldProps | ui:DescriptionFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [ErrorListTemplate](#errorlisttemplate) | ErrorListProps | ui:ErrorListTemplate | Formerly `Form.ErrorList` moved to `templates` with the `Templates` suffix. Previously implemented in each theme. |\n| [FallbackFieldTemplate](#fallbackfieldtemplate) | FallbackFieldTemplateProps | ui:FallbackFieldTemplate | Added in RJSF v6 |\n| [FieldErrorTemplate](#fielderrortemplate) | FieldErrorProps | ui:FieldErrorTemplate | Formerly internal `ErrorList` component accessible only to `SchemaField` |\n| [FieldHelpTemplate](#fieldhelptemplate) | FieldHelpProps | ui:FieldHelpTemplate | Formerly internal `Help` component accessible only to `SchemaField` |\n| [FieldTemplate](#fieldtemplate) | FieldTemplateProps | ui:FieldTemplate | Formerly `Form.FieldTemplate` or `Registry.FieldTemplate` |\n| [GridTemplate](#gridtemplate) | GridTemplateProps | ui:GridTemplate | Theme dependent implementations of a Grid element for either rows or columns |\n| [MultiSchemaFieldTemplate](#multischemafieldtemplate) | MultiSchemaFieldTemplateProps | ui:MultiSchemaFieldTemplate | Formerly part of `@rjsf/core `MultiSchemaField`, refactored as a template |\n| [ObjectFieldTemplate](#objectfieldtemplate) | ObjectFieldTemplateProps | ui:ObjectFieldTemplate | Formerly `Form.ObjectFieldTemplate` or `Registry.ObjectFieldTemplate` |\n| [OptionalDataControlsTemplate](#optionaldatacontrolstemplate) | OptionalDataControlsTemplateProps | ui:OptionalDataControlsTemplate | New feature in V6 |\n| [TitleFieldTemplate](#titlefieldtemplate) | TitleFieldProps | ui:TitleFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [UnsupportedFieldTemplate](#unsupportedfieldtemplate) | UnsupportedFieldProps | ui:UnsupportedFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. |\n| [WrapIfAdditionalTemplate](#wrapifadditionaltemplate) | WrapIfAdditionalTemplateProps | ui:WrapIfAdditionalTemplate | Formerly an internal component in `@rjsf.core`. Previously implemented in most themes. |\n| [ButtonTemplates.AddButton](#addbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveDownButton](#movedownbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveUpButton](#moveupbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.RemoveButton](#removebutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.SubmitButton](#submitbutton) | SubmitButtonProps | n/a | Formerly a `field` in each theme move to `templates.ButtonTemplates` |\n\n## ArrayFieldTemplate\n\nYou can use an `ArrayFieldTemplate` to customize how your arrays are rendered.\nThis allows you to customize your array, and each element in the array.\nIf you only want to customize how the array's title, description or how the array items are presented, you may want to consider providing your own [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate), [ArrayFieldItemTemplate](#arrayfielditemtemplate) and/or [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) instead.\nYou can also customize arrays by specifying a widget in the relevant `ui:widget` schema, more details over on [Custom Widgets](../json-schema/arrays.md#custom-widgets).\n\n```tsx\nimport { ArrayFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldTemplate from './ArrayFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': ArrayFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': 'CustomArrayFieldTemplate',\n};\n```\n\nPlease see the [customArray.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customArray.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for another example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `fieldPathId`: An object containing the id for this object & ids for its properties.\n- `items`: An array of React nodes representing the items in the array.\n- `onAddClick: (event?) => void`: A function that adds a new item to the end of the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formData`: The formData for this array.\n- `errorSchema`: The optional validation errors for the array field and the items within it, in the form of an `ErrorSchema`\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget\n- `registry`: The `registry` object.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.\n\n## ArrayFieldDescriptionTemplate\n\nThe out-of-the-box version of this template will render the `DescriptionFieldTemplate` with a generated id, if there is a `description` otherwise nothing is rendered.\nIf you want different behavior for the rendering of the description of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL descriptions in the `Form`, see [DescriptionFieldTemplate](#descriptionfieldtemplate)\n\n```tsx\nimport { ArrayFieldDescriptionProps, RJSFSchema, descriptionId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldDescriptionTemplate(props: ArrayFieldDescriptionProps) {\n const { description, fieldPathId } = props;\n const id = descriptionId(fieldPathId);\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldDescriptionTemplate`:\n\n- `description`: The description of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `registry`: The `registry` object.\n\n## ArrayFieldItemTemplate\n\nThe `ArrayFieldItemTemplate` is used to render the representation of a single item in an array.\nAll of the `ArrayFieldTemplate` implementations in all themes get this template from the `registry` in order to render array fields items.\nEach theme has an implementation of the `ArrayFieldItemTemplate` to render an array field item in a manner best suited to the theme.\nIf you want to change how an array field item is rendered you can customize this template (for instance to remove the buttons rendered by `ArrayFieldItemButtonsTemplate`).\n\n```tsx\nimport { ArrayFieldItemTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {\n const { children, className } = props;\n return
{children}
;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemTemplate`:\n\n- `children`: The html for the item's content.\n- `buttonsProps`: The props to pass to the `ArrayFieldItemButtonTemplate`.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `itemKey`: A stable, unique key for the array item.\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n- `parentUiSchema`: The UI schema of the array item's parent array field, used for customization in some themes\n\n## ArrayFieldItemButtonTemplate\n\nThe `ArrayFieldItemButtonTemplate` is used to render the representation of the buttons used for copying, moving and deleting an item in an array.\nAll of the `ArrayFieldItemTemplate` implementations in all themes get this template from the `registry` in order to render array fields items' buttons.\nCurrently, only the `core` them has an implementation of this template as the button rendering is identical across all themes.\nIf you want to change how an array field item's buttons are rendered you can customize this template (for instance to remove the move up/down and remove buttons).\n\n```tsx\nimport { useMemo } from 'react';\nimport { ArrayFieldTemplateItemButtonsType, buttonId, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemButtonsTemplate(props: ArrayFieldTemplateItemButtonsType) {\n const { disabled, readonly, hasCopy, fieldPathId, index, onCopyIndexClick, registry, uiSchema } = props;\n const { CopyButton } = registry.templates.ButtonTemplates;\n const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);\n if (!hasCopy) {\n return undefined;\n }\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemButtonsTemplate`:\n\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `hasCopy`: A boolean value stating whether the array item can be copied.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `onAddItem: event?) => void`: Callback function that adds a new item below this item.\n- `onCopyItem: (event?) => void`: Callback function that copies this item below itself.\n- `onRemoveItem: (event?) => void`: Callback function that removes the item from the list.\n- `onMoveUpItem: (event?) => void`: Callback function that moves the item up one spot in the list\n- `onMoveDownItem: (event?) => void`: Callback function that moves the item down one spot in the list\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `style`: The optional style to pass to all of the buttons\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n\n## ArrayFieldTitleTemplate\n\nThe out-of-the-box version of this template will render the `TitleFieldTemplate` with a generated id, if there is a `title` otherwise nothing is rendered.\nIf you want a different behavior for the rendering of the title of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL titles in the `Form`, see [TitleFieldTemplate](#titlefieldtemplate)\n\n```tsx\nimport { ArrayFieldTitleTemplateProps, RJSFSchema, titleId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTitleTemplate(props: ArrayFieldTitleProps) {\n const { title, fieldPathId } = props;\n const id = titleId(fieldPathId);\n return

{title}

;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldTitleTemplate`:\n\n- `title`: The title of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `required`: A boolean value stating if the field is required\n- `registry`: The `registry` object.\n\n## BaseInputTemplate\n\nThe `BaseInputTemplate` is the template to use to render the basic `` component for a theme.\nIt is used as the template for rendering many of the `` based widgets that differ by `type` and callbacks only.\nFor example, the `TextWidget` implementation in `core` is simply a wrapper around `BaseInputTemplate` that it gets from the `registry`.\nAdditionally, each theme implements its own version of `BaseInputTemplate` without needing to provide a different implementation of `TextWidget`.\n\nIf you desire a different implementation for the `` based widgets, you can customize this template.\nFor instance, say you have a `CustomTextInput` component that you want to integrate:\n\n```tsx\nimport { ChangeEvent, FocusEvent } from 'react';\nimport { getInputProps, RJSFSchema, BaseInputTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nimport CustomTextInput from '../CustomTextInput';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction BaseInputTemplate(props: BaseInputTemplateProps) {\n const {\n schema,\n id,\n options,\n label,\n value,\n type,\n placeholder,\n required,\n disabled,\n readonly,\n autofocus,\n onChange,\n onChangeOverride,\n onBlur,\n onFocus,\n rawErrors,\n hideError,\n uiSchema,\n registry,\n ...rest\n } = props;\n const onTextChange = ({ target: { value: val } }: ChangeEvent) => {\n // Use the options.emptyValue if it is specified and newVal is also an empty string\n onChange(val === '' ? options.emptyValue || '' : val);\n };\n const onTextBlur = ({ target: { value: val } }: FocusEvent) => onBlur(id, val);\n const onTextFocus = ({ target: { value: val } }: FocusEvent) => onFocus(id, val);\n\n const inputProps = { ...rest, ...getInputProps(schema, type, options) };\n const hasError = rawErrors.length > 0 && !hideError;\n\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### Wrapping BaseInputTemplate to customize it\n\nSometimes you just need to pass some additional properties to the existing `BaseInputTemplate`.\nThe way to do this varies based upon whether you are using `core` or some other theme (such as `mui`):\n\n```tsx\nimport { BaseInputTemplateProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Templates } from '@rjsf/mui';\n\nconst {\n templates: { BaseInputTemplate },\n} = getDefaultRegistry(); // To get templates from core\n// const { BaseInputTemplate } = Templates; // To get templates from a theme do this\n\nfunction MyBaseInputTemplate(props: BaseInputTemplateProps) {\n const customProps = {};\n // get your custom props from where you need to\n return ;\n}\n```\n\nThe following props are passed to the `BaseInputTemplate`:\n\n- `id`: The generated id for this widget;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `hideError`: A boolean value stating if the widget is hiding its errors.\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onChangeOverride`: A `BaseInputTemplate` implements a default `onChange` handler that it passes to the HTML input component to handle the `ChangeEvent`. Sometimes a widget may need to handle the `ChangeEvent` using custom logic. If that is the case, that widget should provide its own handler via this prop;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties` and `patternProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](./custom-widgets-fields.md#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: The `registry` object\n\n## CyclicSchemaExpandTemplate\n\nThe `CyclicSchemaExpandTemplate` is the template rendered by `CyclicSchemaField` when a circular `$ref` cycle is detected in the schema.\nRJSF automatically detects when a `$ref` would recurse indefinitely (e.g. a schema whose property references its own root) and stops rendering at the cycle boundary.\nAt that point `CyclicSchemaField` renders this template, which shows a warning message and an expand button that the user can click to render one additional level of the recursive structure.\n\nEach theme provides its own implementation.\nYou can replace the template globally via the `templates` prop on `Form`, or per-field via `ui:CyclicSchemaExpandTemplate` in the `uiSchema`.\n\n```tsx\nimport { CyclicSchemaExpandProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// A schema that is self-referencing\nconst schema: RJSFSchema = {\n $schema: 'http://json-schema.org/draft-07/schema#',\n type: 'object',\n title: 'Node',\n properties: {\n value: { type: 'string' },\n child: { $ref: '#' },\n },\n};\n\nfunction CyclicSchemaExpandTemplate(props: CyclicSchemaExpandProps) {\n const { name, fieldPathId, onExpand } = props;\n const buttonId = `${fieldPathId.$id}-button`;\n return (\n
\n Circular reference detected for field "{name}"\n \n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also provide a per-field template via `uiSchema`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': CyclicSchemaExpandTemplate,\n};\n```\n\nor a string value from the `Registry`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': 'CustomCyclicSchemaExpandTemplate',\n};\n```\n\nThe following props are passed to the `CyclicSchemaExpandTemplate` as defined by `CyclicSchemaExpandProps` in `@rjsf/utils`:\n\n- `name`: The unique name of the field at the cycle boundary, usually the property name within its parent object.\n- `fieldPathId`: The `FieldPathId` of the field in the hierarchy; use `fieldPathId.$id` to get the HTML id string.\n- `onExpand`: Callback to call when the user wants to render one additional level; receives the field's id string.\n- `schema`: The schema object for the field at the cycle boundary.\n- `uiSchema`: The uiSchema object for this field.\n- `registry`: The `registry` object.\n\n## DescriptionFieldTemplate\n\nEach theme implements a `DescriptionFieldTemplate` used to render the description of a field.\nIf you want to customize how descriptions are rendered you can.\n\n```tsx\nimport { DescriptionFieldProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction DescriptionFieldTemplate(props: DescriptionFieldProps) {\n const { description, id } = props;\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `DescriptionFieldTemplate`:\n\n- `description`: The description of the field being rendered.\n- `id`: The id of the field in the hierarchy.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ErrorListTemplate\n\nThe `ErrorListTemplate` is the template that renders the all the errors associated with the fields in the `Form`, at the top.\nEach theme implements a `ErrorListTemplate` used to render its errors using components for the theme's toolkit.\nIf you want to customize how all the errors are rendered you can.\n\n```tsx\nimport { ErrorListProps, RJSFValidationError, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction ErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: RJSFValidationError, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `ErrorListTemplate`:\n\n- `schema`: The schema that was passed to `Form`\n- `uiSchema`: The uiSchema that was passed to `Form`\n- `errors`: An array of all errors in this `Form`.\n- `errorSchema`: The `ErrorSchema` constructed by `Form`\n\n## FallbackFieldTemplate\n\nThe `FallbackFieldTemplate` is the template that renders opt-in fallback UI to control fields of unknown or unhandled types. Usage of this feature is controlled by the [`useFallbackUiForUnsupportedType` Form prop](../api-reference/form-props.md#usefallbackuiforunsupportedtype).\n\n```tsx\nimport { FallbackFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'unknownType',\n title: 'My input',\n};\n\nfunction FallbackFieldTemplate(props: FallbackFieldTemplateProps) {\n const { typeSelector, schemaField } = props;\n return (\n
\n
{typeSelector}
\n
{schemaField}
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FallbackFieldTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `registry`: The `Registry` object\n 1\n\n## FieldErrorTemplate\n\nThe `FieldErrorTemplate` is the template that renders all the errors associated a single field.\nIf you want to customize how the errors are rendered you can.\n\n```tsx\nimport { FieldErrorProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldErrorTemplate(props: FieldErrorProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: string, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldErrorTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errors`: An array of all errors for this field\n- `errorSchema`: The `ErrorSchema` for this field\n- `registry`: The `Registry` object\n\n## FieldHelpTemplate\n\nThe `FieldHelpTemplate` is the template that renders the help associated a single field.\nIf you want to customize how the help is rendered you can.\n\n```tsx\nimport { FieldHelpProps, RJSFSchema, helpId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldHelpTemplate(props: FieldHelpProps) {\n const { help, fieldPathId } = props;\n const id = helpId(fieldPathId);\n return ;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldHelpTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `help`: The help information to be rendered\n- `registry`: The `Registry` object\n\n## FieldTemplate\n\nTo take control over the inner organization of each field (each form row), you can define a _field template_ for your form.\n\nA field template is basically a React stateless component being passed field-related props, allowing you to structure your form row as you like.\n\n```tsx\nimport { FieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction CustomFieldTemplate(props: FieldTemplateProps) {\n const { id, classNames, style, label, help, required, description, errors, children } = props;\n return (\n
\n \n {description}\n {children}\n {errors}\n {help}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CustomFieldTemplate from './CustomFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': CustomFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': 'CustomFieldTemplate',\n};\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](../api-reference/uiSchema.md#classnames) defined in your uiSchema.\n- `style`: An object containing the `StyleHTMLAttributes` defined in the `uiSchema`.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionFieldTemplate`](#descriptionfieldtemplate) defined in the `templates` passed to the `Form`).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `hideError`: A boolean value stating if the field is hiding its errors\n- `disabled`: A boolean value stating if the field is disabled.\n- `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.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `onChange`: The value change event handler; Can be called with a new value to change the value for this field.\n- `formData`: The formData for this field.\n- `registry`: The `registry` object.\n\n> Note: you can only define a single global field template for a form, but you can set individual field templates per property using `\"ui:FieldTemplate\"`.\n\n## GridTemplate\n\nThe `GridTemplate` is the template that renders a theme dependent Grid for either a row or column.\nWhile it has only two explicit properties, it extends the `GenericObjectTemplate` in order to support passing any of the properties associated with a Grid implementation for any theme.\nIf you want to customize how grids are rendered you can.\n\n```tsx\nimport { Grid2 } from '@mui/material';\nimport { GridTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\nimport classNames from 'classnames';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction GridTemplate(props: FieldHelpProps) {\n const { children, column, className, ...rest } = props;\n return (\n \n {children}\n \n );\n}\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to the `GridTemplate`:\n\n- `children`: The contents of the grid template\n- `column`: Optional flag indicating whether the grid element represents a column, necessary for themes which have components for Rows vs Column\n\n## MultiSchemaFieldTemplate\n\nEach theme implements a `MultiSchemaFieldTemplate` used to render the layout of a MultiSchemaField, i.e. a field described by a `oneOf` or `anyOf` schema.\nThe template typically renders a Widget used to select the schema to use, as well as a field for the selected schema.\n\n```tsx\nimport { MultiSchemaFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n myField: {\n oneOf: [\n {\n type: 'string',\n title: 'String Field',\n description: 'A field that accepts a string',\n },\n {\n type: 'number',\n title: 'Number Field',\n description: 'A field that accepts a number',\n },\n ],\n },\n },\n};\n\nfunction MultiSchemaFieldTemplate(props: MultiSchemaFieldTemplateProps) {\n const { selector, optionSchemaField } = props;\n return (\n
\n {selector}\n
\n {optionSchemaField}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `MultiSchemaFieldTemplate`:\n\n- `selector`: The rendered Widget used to select a multischema option.\n- `optionSchemaField`: The rendered SchemaField representing the selected option.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ObjectFieldTemplate\n\n```tsx\nimport { ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n title: 'Object title',\n description: 'Object description',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nfunction ObjectFieldTemplate(props: ObjectFieldTemplateProps) {\n return (\n
\n {props.title}\n {props.description}\n {props.properties.map((element) => (\n
{element.content}
\n ))}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ObjectFieldTemplate from './ObjectFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': ObjectFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': 'ObjectFieldTemplate',\n};\n```\n\nPlease see the [customObject.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customObject.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate` as defined by the `ObjectFieldTemplateProps` in `@rjsf/utils`:\n\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `disabled`: A boolean value stating if the object is disabled.\n- `properties`: An array of object representing the properties in the object. Each of the properties represent a child with properties described below.\n- `onAddProperty: () => void`: Callback to use in order to add an new additionalProperty to the object field (to be used with additionalProperties and patternProperties)\n- `readonly`: A boolean value stating if the object is read-only.\n- `required`: A boolean value stating if the object is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errorSchema`: The optional validation errors in the form of an `ErrorSchema`\n- `formData`: The form data for the object.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n- `hidden`: A boolean value stating if the property should be hidden.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.\n\n## OptionalDataControlsTemplate\n\nEach theme implements a `OptionalDataControlsTemplate` used to render the `Optional Data Controls` when that feature has been enabled\n\n```tsx\nimport { OptionalDataControlsTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nfunction OptionalDataControlsTemplate(props: OptionalDataControlsTemplateProps) {\n const { id, registry, label, onAddClick, onRemoveClick } = props;\n if (onAddClick) {\n return (\n \n );\n } else if (onRemoveClick) {\n return (\n \n );\n }\n return {label};\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `OptionalDataControlsTemplate` as defined by the `OptionalDataControlsTemplateProps` in `@rjsf/utils`:\n\n- `id`: The generated id for this Optional Data Control instance.\n- `label`: The label to use for the Optional Data Control\n- `onAddClick`: Optional callback to call when clicking on the Optional Data Control to add data\n- `onRemoveClick`: Optional callback to call when clicking on the Optional Data Control to remove data\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `registry`: The `registry` object.\n\n## TitleFieldTemplate\n\nEach theme implements a `TitleFieldTemplate` used to render the title of a fie\n\n","isInternal":false,"tokens":10866,"sizeBytes":50030},{"name":"custom-themes.md","path":"packages/docs/docs/advanced-customization/custom-themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/advanced-customization/custom-themes.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Custom Themes\n\nThe `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component.\nThis theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.\n\n## Usage\n\n```tsx\nimport React, { Component } from 'react';\nimport validator from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\nconst theme: ThemeProps = { widgets: { test: () =>
test
} };\n\nconst ThemedForm = withTheme(theme);\n\nconst Demo = () => ;\n```\n\n## Theme object properties\n\nThe Theme object consists of the same properties as the rjsf `Form` component (such as **widgets**, **fields** and **templates**).\nThe themed-Form component merges together any theme-specific **widgets**, **fields** and **templates** with the default **widgets**, **fields** and **templates**.\nFor instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name.\nThus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`.\nNote that you are not required to pass in either custom **widgets**, **fields** or **templates** when using the custom-themed HOC component;\nyou can essentially redefine the default Form by simply doing `const Form = withTheme({});`.\n\n### Widgets and fields\n\n**widgets** and **fields** should be in the same format as shown [here](./custom-widgets-fields.md).\n\nExample theme with custom widget:\n\n```tsx\nimport { WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst myWidgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst ThemeObject: ThemeProps = { widgets: myWidgets };\nexport default ThemeObject;\n```\n\nThe above can be similarly done for **fields** and **templates**.\n\n### Templates\n\nEach template should be passed into the theme object via the **templates** object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](./custom-templates.md#arrayfieldtemplate) and [ErrorListTemplate](./custom-templates.md#errorlisttemplate) in the theme object:\n\n```tsx\nimport { ArrayFieldTemplateProps, ErrorListProps } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nfunction MyArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nfunction MyErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
    \n {errors.map((error) => (\n
  • {error.stack}
    • \n ))}\n
\n );\n}\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n ErrorListTemplate: MyErrorListTemplate,\n },\n widgets: myWidgets,\n};\n\nexport default ThemeObject;\n```\n\n## Overriding other Form props\n\nJust as the theme can override **widgets**, **fields**, any of the **templates**, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.\n\n```tsx\nimport { ThemeProps } from '@rjsf/core';\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n },\n fields: myFields,\n showErrorList: false,\n widgets: myWidgets,\n};\n```\n\nThus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).\n","isInternal":false,"tokens":1012,"sizeBytes":4286},{"name":"custom-widgets-fields.md","path":"packages/docs/docs/advanced-customization/custom-widgets-fields.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/advanced-customization/custom-widgets-fields.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Custom Widgets and Fields\n\nThe API allows to specify your own custom _widget_ and _field_ components:\n\n- A _widget_ represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A _field_ usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n## Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `BooleanField`\nrenders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the\n`fields` and `widgets` props:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n default: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkbox',\n};\n\nconst CustomCheckbox = function (props: WidgetProps) {\n return (\n \n );\n};\n\nconst widgets: RegistryWidgetsType = {\n CheckboxWidget: CustomCheckbox,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```tsx\nimport { RegistryFieldsType, RegistryWidgetsType } from '@rjsf/utils';\nimport { FormProps } from '@rjsf/core';\n\nconst customFields: RegistryFieldsType = { StringField: CustomString };\nconst customWidgets: RegistryWidgetsType = { CheckboxWidget: CustomCheckbox };\n\nfunction MyForm(props: FormProps) {\n return ;\n}\n```\n\nThe default fields you can override are:\n\n- `ArrayField`\n- `ArraySchemaField`\n- `BooleanField`\n- `DescriptionField`\n- `OneOfField`\n- `AnyOfField`\n- `LayoutGridField`\n- `LayoutMultiSchemaField`\n- `LayoutHeaderField`\n- `NullField`\n- `NumberField`\n- `ObjectField`\n- `SchemaField`\n- `StringField`\n- `TitleField`\n- `UnsupportedField`\n- `FallbackField`\n- `CyclicSchemaField`\n\nThe default widgets you can override are:\n\n- `AltDateTimeWidget`\n- `AltDateWidget`\n- `CheckboxesWidget`\n- `CheckboxWidget`\n- `ColorWidget`\n- `DateTimeWidget`\n- `DateWidget`\n- `EmailWidget`\n- `FileWidget`\n- `HiddenWidget`\n- `PasswordWidget`\n- `RadioWidget`\n- `RangeWidget`\n- `SelectWidget`\n- `TextareaWidget`\n- `TextWidget`\n- `TimeWidget`\n- `UpDownWidget`\n- `URLWidget`\n\n## Raising errors from within a custom widget or field\n\nYou can raise custom 'live validation' errors by overriding the `onChange` method to provide feedback while users are actively changing the form data.\nIf you do set errors this way, you must also clear them this way by passing `undefined` to the `onChange()` for the `errorSchema` parameter.\n\n:::warning\n\nWhile these errors are retained during validation, it is still preferred for you to use the [`customValidate` Form prop](../api-reference/form-props.md#customvalidate) mechanism instead.\n\n:::\n\n```tsx\nimport { ErrorSchema, RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'text',\n default: 'hello',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'text',\n};\n\nconst CustomTextWidget = function (props: WidgetProps) {\n const { id, value } = props;\n const raiseErrorOnChange = ({ target: { value } }: ChangeEvent) => {\n let raiseError: ErrorSchema | undefined;\n if (value !== 'test') {\n raiseError = {\n __errors: ['Value must be \"test\"'],\n };\n }\n props.onChange(value, [], raiseError, id);\n };\n\n return ;\n};\n\nconst widgets: RegistryWidgetsType = {\n TextWidget: CustomTextWidget,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis creates a custom text widget that raises an error if the input value does not match 'test'.\n\n## Adding your own custom widgets\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `array`\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: Schema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this widget, used to provide unique `name`s and `id`s for the HTML field elements rendered by widgets;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema; Provided in support of custom widgets;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `hideLabel`: A boolean value, if true, will cause the label to be hidden. This is useful for nested fields where you don't want to clutter the UI. Customized via `label` in the `UiSchema`;\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: A [registry](#the-registry-object) object (read next).\n\n### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst widgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'myCustomWidget',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction MyCustomWidget(props: WidgetProps) {\n const { options } = props;\n const { color, backgroundColor } = options;\n return ;\n}\n\nMyCustomWidget.defaultProps = {\n options: {\n color: 'red',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': MyCustomWidget,\n 'ui:options': {\n backgroundColor: 'yellow',\n },\n};\n\n// renders red on yellow input\nrender(, document.getElementById('app'));\n```\n\n> Note: This also applies to [registered custom components](#custom-component-registration).\n\n### Customizing widgets' text input\n\nAll the widgets that render a text input use the `BaseInputTemplate` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInputTemplate` component in the `templates` property of `Form` (see [Custom Templates](./custom-templates.md#baseinputtemplate)).\n\n### Wrapping an existing widget to customize it\n\nSometimes you just need to customize the properties that are passed to an existing widget.\nThe way to do this varies based upon whether you are using core or some other theme (such as mui).\n\nHere is an example of modifying the `SelectWidget` to change the ordering of `enumOptions`:\n\n```tsx\nimport { WidgetProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Widgets } from '@rjsf/mui';\n\nimport myOptionsOrderFunction from './myOptionsOrderFunction';\n\nconst {\n widgets: { SelectWidget },\n} = getDefaultRegistry(); // To get widgets from core\n// const { SelectWidget } = Widgets; // To get widgets from a theme do this\n\nfunction MySelectWidget(props: WidgetProps) {\n const { options } = props;\n let { enumOptions } = options;\n // Reorder the `enumOptions` however you want\n enumOptions = myOptionsOrderFunction(enumOptions);\n return ;\n}\n```\n\n## Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a _latitude_ and a _longitude_:\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n required: ['lat', 'lon'],\n properties: {\n lat: { type: 'number' },\n lon: { type: 'number' },\n },\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n constructor(props: FieldProps) {\n super(props);\n this.state = { ...props.formData };\n }\n\n onChange(name) {\n return (event) => {\n this.setState(\n {\n [name]: parseFloat(event.target.value),\n },\n () => this.props.onChange(this.state),\n );\n };\n }\n\n render() {\n const { lat, lon } = this.state;\n return (\n
\n \n \n
\n );\n }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema: UiSchema = { 'ui:field': 'geo' };\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields: RegistryFieldsType = { geo: GeoPosition };\n\n// Render the form with all the properties we just defined passed\n// as props\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n> Note: Registered fields can be reused across the entire schema.\n\n### Field props\n\nA field component will always be passed the following props:\n\n- `schema`: The JSON subschema object for this field;\n- `uiSchema`: The [uiSchema](../api-reference/uiSchema.md) for this field;\n- `idSchema`: The FieldPathId of the field in the hierarchy\n- `formData`: The data for this field;\n- `errorSchema`: The tree of errors for this field and its children;\n- `registry`: A [registry](#the-registry-object) object (read next).\n- `required`: The required status of this field;\n- `disabled`: A boolean value stating if the field is disabled;\n- `readonly`: A boolean value stating if the field is read-only;\n- `autofocus`: A boolean value stating if the field should autofocus;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema\n- `rawErrors`: `An array of strings listing all generated error messages from encountered errors for this field\n- `onChange`: The field change event handler; called with the updated field value, the optional change path for the value (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed\n- `onBlur`: The input blur event handler; call it with the field id and value;\n- `onFocus`: The input focus event handler; call it with the field id and value;\n\n## The `registry` object\n\nThe `registry` is an object containing the registered core, theme and custom fields and widgets as well as the root schema, form context, schema utils.\n\n- `fields`: The set of all fields used by the `Form`. Includes fields from `core`, theme-specific fields and any [custom registered fields](#custom-field-components);\n- `widgets`: The set of all widgets used by the `Form`. Includes widgets from `core`, theme-specific widgets and any [custom registered widgets](#custom-component-registration), if any;\n- `templates`: The set of templates used by the `Form`. Includes templates from `core`, theme-specific templates and any custom registered templates\n- `rootSchema`: The root schema, as passed to the `Form`, which can contain referenced [definitions](../json-schema/definitions.md);\n- `schemaUtils`: The current implementation of the `SchemaUtilsType` (from `@rjsf/utils`) in use by the `Form`. Used to call any of the validation-schema-based utility functions.\n- `translateString`: The string translation function to use when displaying any of the RJSF strings in templates, fields or widgets\n- `globalFormOptions`: The global Form Options that are available for all templates, fields and widgets to access\n- `globalUiOptions`: The optional global UI Options that are available for all templates, fields and widgets to access\n\nThe registry is passed down the component tree, so you can access it from your custom field, custom widget, custom template and `SchemaField` components.\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSchemaField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n SchemaField: CustomSchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n\n### Custom ArraySchemaField\n\nEverything that was mentioned above for a `Custom SchemaField` applies, but this is only used to render the Array item `children` that are then passed to the `ArrayFieldItemTemplate`.\nBy default, `ArraySchemaField` is not actually implemented in the `fields` list since `ArrayField` falls back to `SchemaField` if `ArraySchemaField` is not provided.\nIf you want to customize how the individual items for an array are rendered, provide your implementation of `ArraySchemaField` as a `fields` override.\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomArraySchemaField = function (props: FieldProps) {\n const { index, registry } = props;\n const { SchemaField } = registry.fields;\n const name = `Index ${index}`;\n return ;\n};\n\nconst fields: RegistryFieldsType = {\n ArraySchemaField: CustomArraySchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom Field by Id\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the field component that applies to any schema or sub-schema based on the schema's `$id` value. This is useful when your custom field should be conditionally applied based on the schema rather than the property name or data type.\n\nTo provide a custom field in this way, the `fields` prop should be an object which contains a key that matches the `$id` value of the schema which should have a custom field; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomIdField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n '/schemas/my-id': CustomIdField,\n};\n\nconst schema: RJSFSchema = {\n $id: '/schemas/my-id',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Wrapping an existing field to customize it\n\nSometimes you just need to customize the properties that are passed to an existing field.\n\nHere is an example of wrapping the `ObjectField` to tweak the `onChange` handler to look for a specific kind of bad data:\n\n```tsx\nimport { useCallback } from 'react';\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nimport checkBadData from './checkBadData';\n\nconst {\n fields: { ObjectField },\n} = getDefaultRegistry();\n\nfunction MyObjectField(props: FieldProps) {\n const { onChange } = props;\n const onChangeHandler = useCallback(\n (newFormData: T | undefined, path: (number | string)[], es?: ErrorSchema, id?: string) => {\n let data = newFormData;\n let error = es;\n if (checkBadData(newFormData)) {\n // Format the `error` and fix the `data` here\n }\n onChange(data, path, error, id);\n },\n [onChange],\n );\n return ;\n}\n```\n","isInternal":false,"tokens":4705,"sizeBytes":19829},{"name":"internals.md","path":"packages/docs/docs/advanced-customization/internals.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/advanced-customization/internals.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Internals\n\nMiscellaneous internals of react-jsonschema-form are listed here.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. We currently support JSON Schema-07 by default, but we also support other JSON schema versions through the [custom schema validation](../usage/validation.md#custom-meta-schema-validation) feature. Due to the limitation of form widgets, there are some exceptions as follows:\n\n- `additionalItems` keyword for arrays\n\n This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n\n- `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`)\n\n The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties \"outside\" of the `anyOf/oneOf`.\n\n You can also use `oneOf` with [schema dependencies](../json-schema/dependencies.md#schema-dependencies) to dynamically add schema properties based on input data.\n\n The `allOf` keyword is supported; it uses [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema.\n\n- `\"additionalProperties\":false` produces incorrect schemas when used with [schema dependencies](../json-schema/dependencies.md#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `\"additionalProperties\":false` when you use schema dependencies. See [#848](https://github.com/rjsf-team/react-jsonschema-form/issues/848) [#902](https://github.com/rjsf-team/react-jsonschema-form/issues/902) [#992](https://github.com/rjsf-team/react-jsonschema-form/issues/992)\n\n## Handling of schema defaults\n\nThis library automatically fills default values defined in the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](../json-schema/dependencies.md#schema-dependencies).\n\nSince there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.\n\nCheck out the defaults example on the [live playground](https://rjsf-team.github.io/react-jsonschema-form/) to see this in action.\n\n### Merging of defaults into the form data\n\nThere are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.\n\nThis are the rules which are used when injecting the defaults:\n\n- When there is a scalar in the form data, nothing is changed.\n- When the value is `undefined` in the form data, the default is created in the form data.\n- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.\n- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.\n\nA boolean property that is listed in its parent's `required` array and has no `default` of its own is populated with `false`. You can turn this off using the experimental [`requiredBooleanDefault`](../api-reference/form-props.md#requiredbooleandefault) flag, so that the property stays `undefined` until the user answers it.\n\n### Merging of defaults within the schema\n\nIn the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together, with the deeper (descendant) default taking precedence for any overlapping properties by default. You can change this behavior using the experimental [`nestedDefaultsPrecedence`](../api-reference/form-props.md#nesteddefaultsprecedence) flag. If the parent node defines properties which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.\n\nFor arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.\n\n## Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, copy, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons).\nIf you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n> NOTE this only applies to the `@rjsf/core` theme\n\n```css\ni.glyphicon {\n display: none;\n}\n.btn-add::after {\n content: 'Add';\n}\n.array-item-copy::after {\n content: 'Copy';\n}\n.array-item-move-up::after {\n content: 'Move Up';\n}\n.array-item-move-down::after {\n content: 'Move Down';\n}\n.array-item-remove::after {\n content: 'Remove';\n}\n```\n\n## Submit form programmatically\n\nYou can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.\nThis method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onSubmit = ({ formData }) => console.log('Data submitted: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.submit();\n```\n\n## Update field value in form programmatically\n\nYou can use the reference to get your `Form` component and call the `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void` method to change the value of a field.\nThis method will dispatch the `onChange` event of the form.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onChange = ({ formData }) => console.log('Data updated to: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: {\n type: 'object',\n required: ['input'],\n properties: {\n input: {\n type: 'string',\n },\n },\n },\n },\n required: ['foo'],\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.setFieldValue('foo.input', 'value');\nformRef.current.setFieldValue(['foo'], { input: 'newvalue' });\nformRef.current.setFieldValue('', { foo: { input: 'another value' } });\nformRef.current.setFieldValue([], { foo: { input: 'more values' } });\n```\n","isInternal":false,"tokens":1735,"sizeBytes":7701},{"name":"typescript.md","path":"packages/docs/docs/advanced-customization/typescript.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/advanced-customization/typescript.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Typescript Support\n\nRJSF fully supports Typescript.\nThe [types and functions](../api-reference/utility-functions.md) exported by `@rjsf/utils` are fully typed (as needed) using one or more of the following 3 optional generics:\n\n- `T = any`: This represents the type of the `formData` and defaults to `any`.\n- `S extends StrictRJSFSchema = RJSFSchema`: This represents the type of the `schema` and extends the `StrictRJSFSchema` type and defaults to the `RJSFSchema` type.\n- `F extends FormContextType = any`: This represents the type of the `formContext`, extends the `FormContextType` type and defaults to `any`.\n\nEvery other library in the `@rjsf/*` ecosystem use these same generics in their functions and React component definitions.\nFor instance, in the `@rjsf/core` library the definitions of the `Form` component and the `withTheme()` and `getDefaultRegistry()` functions are as follows:\n\n```ts\nexport default class Form<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n> extends Component, FormState> {\n // ... class implementation\n}\n\nexport default function withTheme(\n themeProps: ThemeProps\n) {\n // ... function implementation\n}\n\nexport default function getDefaultRegistry<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n>(): Omit, 'schemaUtils'> {\n // ... function implementation\n}\n```\n\nOut of the box, the defaults for these generics will work for all use-cases.\nProviding custom types for any of these generics may be useful for situations where the caller is working with typed `formData`, `schema` or `formContext` props, Typescript is complaining and type casting isn't allowed.\n\n## Overriding generics\n\n### T\n\nThe generic `T` is used to represent the type of the `formData` property passed into `Form`.\nIf you are working with a simple, unchanging JSON Schema and you have defined a type for the `formData` you are working with, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formData: FormData = {};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} formData={formData} />, document.getElementById('app'));\n```\n\n### S\n\nThe generic `S` is used to represent the type of the `schema` property passed into `Form`.\nIf you are using something like the [Ajv utility types for schemas](https://ajv.js.org/guide/typescript.html#utility-types-for-schemas) typing system, you can override this generic as follows:\n\n```tsx\nimport { JSONSchemaType } from 'ajv';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} />, document.getElementById('app'));\n\n// Alternatively since you have the type, you could also use this\n// const validator = customizeValidator();\n// render((\n// schema={schema} validator={validator} />\n//), document.getElementById(\"app\"));\n```\n\n> NOTE: using this `Ajv typing system` has not been tested extensively with RJSF, so use carefully\n\n### F\n\nThe generic `F` is used to represent the type of the `formContext` property passed into `Form`.\nIf you have a type for this data, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formContext: FormContext = {\n myCustomWidgetData: {\n enableCustomFeature: true,\n },\n};\n\nconst validator = customizeValidator();\n\nrender(\n schema={schema} validator={validator} formContext={formContext} />,\n document.getElementById('app')\n);\n```\n\n## Overriding generics in core\n\nAs shown in previous examples, overriding the default `Form` from `@rjsf/core` is pretty straight forward.\nUsing the `withTheme()` function is just as easy:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst theme: ThemeProps = {\n widgets: { test: () =>
test
},\n};\n\nconst ThemedForm = withTheme(theme);\n\nconst validator = customizeValidator();\n\nconst Demo = () => ;\n```\n\n## Overriding generics in other themes\n\nSince all the other themes in RJSF are extensions of `@rjsf/core`, overriding parts of these themes with custom generics is a little different.\nThe exported `Theme` and `Form` from any of the themes have been created using the generic defaults, and as a result, do not take generics themselves.\nIn order to override generics, special `generateForm()` and `generateTheme()` functions are exported for your use.\n\n### Overriding a Theme\n\nIf you are doing something like the following to create a new theme based on `@rjsf/mui` to extend one or more `templates`:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\nimport { Theme } from '@rjsf/mui';\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst Demo = () => ;\n```\n\nThen you would use the new `generateTheme()` and `generateForm()` functions as follows:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { generateTheme } from '@rjsf/mui';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst Theme: ThemeProps = generateTheme();\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst validator = customizeValidator();\n\n// You could also do since they are effectively the same:\n// const ThemedForm = generateForm(myTheme);\n\nconst Demo = () => ;\n```\n\n> NOTE: The same approach works for extending `widgets` and `fields` as well.\n","isInternal":false,"tokens":2167,"sizeBytes":8650},{"name":"dynamic-ui-schema-examples.md","path":"packages/docs/docs/api-reference/dynamic-ui-schema-examples.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/dynamic-ui-schema-examples.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# Dynamic uiSchema Examples\n\n## Backward Compatibility Examples\n\n### Example 1: Traditional Static uiSchema (No Changes Required)\n\n```typescript\nimport { UiSchema } from '@rjsf/utils';\n\n// This continues to work exactly as before\nconst uiSchema: UiSchema = {\n guests: {\n items: {\n name: { 'ui:placeholder': 'Enter guest name' },\n age: { 'ui:widget': 'updown' },\n relationship: { 'ui:widget': 'select' },\n },\n },\n};\n```\n\n### Example 2: Dynamic uiSchema with Function\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface GuestData {\n name?: string;\n age?: number;\n relationship?: 'child' | 'adult' | 'senior';\n guardianName?: string;\n mealPreference?: string;\n}\n\n// New functionality - dynamic UI based on item data\nconst uiSchema: UiSchema = {\n guests: {\n items: (itemData: GuestData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Note: For newly added items, `itemData` will be undefined or contain default values.\n // Using optional chaining (`?.`) is recommended to handle this case gracefully.\n\n // Base UI schema for all items\n const baseUiSchema: UiSchema = {\n name: { 'ui:placeholder': `Guest ${index + 1} name` },\n relationship: { 'ui:widget': 'select' },\n };\n\n // Conditionally modify UI based on data\n if (itemData?.relationship === 'child') {\n return {\n ...baseUiSchema,\n age: {\n 'ui:widget': 'updown',\n 'ui:help': 'Age is required for children',\n 'ui:options': { min: 0, max: 17 },\n },\n guardianName: {\n 'ui:placeholder': 'Parent/Guardian name',\n },\n mealPreference: { 'ui:widget': 'hidden' },\n };\n }\n\n if (itemData?.relationship === 'adult') {\n return {\n ...baseUiSchema,\n age: { 'ui:widget': 'hidden' },\n guardianName: { 'ui:widget': 'hidden' },\n mealPreference: {\n 'ui:widget': 'select',\n 'ui:placeholder': 'Select meal preference',\n },\n };\n }\n\n // Default for new items or unknown relationships\n return baseUiSchema;\n },\n },\n};\n```\n\n### Example 3: Using Form Context\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ParticipantData {\n name?: string;\n email?: string;\n workshop?: string;\n}\n\ninterface MyFormContext extends FormContextType {\n eventType?: 'conference' | 'workshop' | 'webinar';\n}\n\nconst uiSchema: UiSchema = {\n participants: {\n items: (itemData: ParticipantData | undefined, index: number, formContext?: MyFormContext): UiSchema => {\n // Access form-wide settings\n const isConference = formContext?.eventType === 'conference';\n\n return {\n name: { 'ui:placeholder': 'Participant name' },\n email: { 'ui:widget': 'email' },\n // Show workshop selection only for conference events\n workshop: isConference ? { 'ui:widget': 'select' } : { 'ui:widget': 'hidden' },\n };\n },\n },\n};\n```\n\n### Example 4: Falsy Return Values\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ItemData {\n needsCustomUI?: boolean;\n field1?: string;\n field2?: string;\n}\n\nconst uiSchema: UiSchema = {\n items: {\n items: (itemData: ItemData | undefined, index: number): UiSchema | null | undefined => {\n // Only apply custom UI to specific items\n if (itemData?.needsCustomUI) {\n return {\n field1: { 'ui:widget': 'textarea' },\n field2: { 'ui:help': 'This item needs special attention' },\n };\n }\n\n // Return null or undefined to use default UI rendering\n // This is useful for conditionally applying custom UI\n return null;\n },\n },\n};\n```\n\n### Example 5: Dynamic UI for Fixed Arrays\n\nFor fixed/tuple arrays (where schema.items is an array), the dynamic function can be applied to each position:\n\n```typescript\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\ninterface DetailsData {\n age?: number;\n role?: string;\n}\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: [\n { type: 'string', title: 'First Name' },\n { type: 'string', title: 'Last Name' },\n { type: 'object', title: 'Details', properties: { age: { type: 'number' }, role: { type: 'string' } } },\n ],\n};\n\nconst uiSchema: UiSchema = {\n items: [\n { 'ui:placeholder': 'Enter first name' }, // Static UI for first item\n { 'ui:placeholder': 'Enter last name' }, // Static UI for second item\n // Dynamic UI for third item based on its data\n (itemData: DetailsData | undefined, index: number): UiSchema => {\n if (itemData?.role === 'admin') {\n return {\n age: { 'ui:widget': 'hidden' },\n role: { 'ui:help': 'Admin role selected' },\n };\n }\n return {\n age: { 'ui:widget': 'updown' },\n role: { 'ui:widget': 'select' },\n };\n },\n ],\n};\n```\n\n## Schema Example\n\n```typescript\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n guests: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: { type: 'string', title: 'Name' },\n age: { type: 'number', title: 'Age' },\n relationship: {\n type: 'string',\n title: 'Relationship',\n enum: ['adult', 'child', 'senior'],\n },\n guardianName: { type: 'string', title: 'Guardian Name' },\n mealPreference: {\n type: 'string',\n title: 'Meal Preference',\n enum: ['vegetarian', 'vegan', 'standard', 'gluten-free'],\n },\n },\n required: ['name', 'relationship'],\n },\n },\n },\n};\n```\n\n## Key Benefits\n\n1. **Backward Compatible**: Existing forms with object-based `uiSchema.items` continue to work without any changes\n2. **Progressive Enhancement**: Developers can opt-in to dynamic behavior when needed\n3. **Flexible**: Access to item data, index, and form context enables complex UI logic\n4. **Safe**: Built-in error handling prevents the entire form from crashing if your function throws an error. When an error occurs for a specific item, it will be caught and logged to the developer console, and the UI for that item will fall back to the default rendering. This ensures the rest of the form remains functional while making debugging easier.\n5. **On-Demand Execution**: The function is executed on-demand during the render cycle. However, as it runs for each array item, performance should be carefully managed for large lists (see Performance Considerations below).\n\n## Key Behaviors\n\n- **Falsy Returns**: If your function returns a falsy value (e.g., `null` or `undefined`), the UI for that specific item will fall back to its default rendering. This allows you to conditionally apply custom UI only when needed.\n- **Error Handling**: If your function throws an error, it will be caught and logged to the console. The form will continue to work, using default UI for the affected item.\n- **New Items**: When a new item is added to the array, `itemData` will be `undefined` or contain default values from the schema. Always use optional chaining (`?.`) to safely access properties.\n\n## Performance Considerations\n\nWhen using dynamic `uiSchema.items` functions, keep in mind:\n\n- The function is executed **on every render** for **each array item**\n- For large arrays, this can impact performance if the function performs expensive operations\n- Best practices:\n - Keep the function logic lightweight and fast\n - Avoid heavy computations or external API calls within the function\n - Consider memoizing results if the same inputs produce the same outputs\n - For complex logic, pre-compute values and store them in formContext or component state\n\nExample of a performance-optimized approach:\n\n```typescript\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema, FormContextType, IChangeEvent } from '@rjsf/utils';\n\ninterface ItemData {\n type?: string;\n field?: any;\n}\n\ninterface ExpensiveDataConfig {\n widget: string;\n}\n\ninterface MyFormProps {\n schema: RJSFSchema;\n formData?: any;\n}\n\n// In your React component that renders the form:\nfunction MyFormComponent({ schema, formData }: PropsWithChildren) {\n // Pre-compute expensive data once, and only re-compute if dependencies change\n const expensiveData = useMemo>(() => computeExpensiveData(), [/* dependencies */]);\n\n const defaultConfig: ExpensiveDataConfig = { widget: 'text' };\n\n // Define the uiSchema inside the component so it can access the memoized data\n const uiSchema: UiSchema = {\n myArrayField: { // Target your specific array field\n items: (itemData: ItemData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Use the pre-computed data - this is very fast\n const config = expensiveData[itemData?.type || ''] || defaultConfig;\n\n return {\n field: { 'ui:widget': config.widget }\n };\n }\n }\n };\n\n return ;\n}\n\n// Placeholder for the expensive computation function\ndeclare function computeExpensiveData(): Record;\n```\n","isInternal":false,"tokens":2259,"sizeBytes":9385},{"name":"form-props.md","path":"packages/docs/docs/api-reference/form-props.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/form-props.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"---\ntitle: Props\n---\n\n# <Form /> props\n\n## acceptCharset\n\nThe value of this prop will be passed to the `accept-charset` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-accept-charset).\n\n## action\n\nThe value of this prop will be passed to the `action` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action).\n\nNote that this just renders the `action` attribute in the HTML markup. There is no real network request being sent to this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()` and then calls the [`onSubmit`](#onSubmit) function, where you could send a request programmatically with `fetch` or similar.\n\n## autoComplete\n\nThe value of this prop will be passed to the `autocomplete` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete).\n\n## className\n\nThe value of this prop will be passed to the `class` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## children\n\nYou can provide custom buttons to your form via the `Form` component's `children`. If no children are provided, by default a `Submit` button will be rendered.\n\nFor other ways to modify the default `Submit` button, see both the [Submit Button Options](./uiSchema.md#submitbuttonoptions) and the [SubmitButton Template](../advanced-customization/custom-templates.md#submitbutton) documentation.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(\n \n
\n \n \n
\n ,\n document.getElementById('app'),\n);\n```\n\n> **Warning:** There needs to be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n## customValidate\n\nFormerly the `validate` prop.\nThe `customValidate` prop requires a function that specifies custom validation rules for the form.\nSee [Validation](../usage/validation.md) for more information.\n\n## experimental_componentUpdateStrategy\n\nExperimental feature to specify an alternative component update strategy that accepts one of the following value:\nReact's default `Component` rendering strategy is to re-render on every state change, see `shouldComponentUpdate` docs.\n`PureComponent`'s strategy uses shallow equality. One can also always update (not recommended for performance reasons, but can be useful for testing)\n\n| Option | Description |\n| ---------- | ------------------------------------------------- |\n| customDeep | Legacy behavior - uses RJSF's deepEquals function |\n| shallow | shallow equality |\n| always | component always rerenders |\n\n## experimental_defaultFormStateBehavior\n\nExperimental features to specify different form state behavior.\nCurrently, this only affects the handling of optional array fields where `minItems` is set and handling of setting defaults based on the value of `emptyObjectFields`.\n\n> **Warning:** This API is experimental and unstable, therefore breaking changes may be shipped in minor or patch releases. If you want to use this feature, we recommend pinning exact versions of `@rjsf/\\*` packages in your package.json file or be ready to update your use of it when necessary.\n\nThe following subsections represent the different keys in this object, with the tables explaining the values and their meanings.\n\n### arrayMinItems\n\nThis optional subsection is an object with two optional fields, `populate` and `mergeExtraDefaults`.\nWhen not specified, it defaults to `{ populate: 'all', mergeExtraDefaults: false }`.\n\n#### arrayMinItems.populate\n\nOptional enumerated flag controlling how array minItems are populated, defaulting to `all`:\n\n| Flag Value | Description |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `all` | Legacy behavior - populate minItems entries with default values initially and include empty array when no values have been defined. |\n| `requiredOnly` | Ignore `minItems` on a field when calculating defaults unless the field is required. |\n| `never` | Ignore `minItems` on a field when calculating defaults for required and non-required. Value will set only if defined `default` and from `formData` |\n\n#### arrayMinItems.computeSkipPopulate\n\nThe signature and documentation for this property is as follow:\n\n##### computeSkipPopulate <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nA function that determines whether to skip populating the array with default values based on the provided validator, schema, and root schema.\nIf the function returns `true`, the array will not be populated with default values.\nIf the function returns `false`, the array will be populated with default values according to the `populate` option.\n\n###### Parameters\n\n- validator: ValidatorType<T, S, F> - An implementation of the `ValidatorType` interface that is used to detect valid schema conditions\n- schema: S - The schema for which resolving a condition is desired\n- [rootSchema]: S - The root schema that will be forwarded to all the APIs\n\n###### Returns\n\n- boolean: A boolean indicating whether to skip populating the array with default values.\n\n##### Example\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n stringArray: {\n type: 'array',\n items: { type: 'string' },\n minItems: 1,\n },\n numberArray: {\n type: 'array',\n items: { type: 'number' },\n minItems: 1,\n },\n },\n required: ['stringArray', 'numberArray'],\n};\n\nconst computeSkipPopulateNumberArrays = (validator, schema, rootSchema) =>\n // These conditions are needed to narrow down the type of the schema.items\n !Array.isArray(schema?.items) &&\n typeof schema?.items !== 'boolean' &&\n schema?.items?.type === 'number',\n\nrender(\n ,\n document.getElementById('app')\n);\n```\n\n#### arrayMinItems.mergeExtraDefaults\n\nOptional boolean flag, defaulting to `false` when not specified.\nWhen `formData` is provided and does not contain `minItems` worth of data, this flag controls whether the extra data provided by the defaults is appended onto the existing `formData` items to ensure the `minItems` condition is met.\nWhen `false` (legacy behavior), only the `formData` provided is merged into the default form state, even if there are fewer than the `minItems`.\nWhen `true`, the defaults are appended onto the end of the `formData` until the `minItems` condition is met.\n\n### emptyObjectFields\n\nOptional enumerated flag controlling how empty object fields are populated, defaulting to `populateAllDefaults`:\n\n| Flag Value | Description |\n| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `populateAllDefaults` | Legacy behavior - set default when there is a primitive value, an non-empty object field, or the field itself is required |\n| `populateRequiredDefaults` | Only sets default when a value is an object and its parent field is required, or it is a primitive value and it is required |\n| `skipDefaults` | Does not set defaults |\n| `skipEmptyDefaults` | Does not set an empty default. It will still apply the default value if a default property is defined in your schema |\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: { type: 'string' },\n minItems: 3,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### allOf\n\nOptional enumerated flag controlling how empty defaults are populated when `allOf` schemas are provided, defaulting to `skipDefaults`:\n\n| Flag Value | Description |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------- |\n| `skipDefaults` | Skip parsing defaults from `allOf` schemas nested inside the schema defaults are computed from, with the exceptions below |\n| `populateDefaults` | Generate default values for properties in the `allOf` schema including `if-then-else` syntax |\n\n`skipDefaults` only skips the `allOf` schemas nested inside the schema that defaults are computed from, not that schema's own `allOf`.\nWhich schema that is depends on what the form is doing:\n\n- When the form computes defaults from the root schema, a root-level `allOf` provides its defaults with either value.\n- Some actions compute defaults from a subschema as if it were the root, such as adding an array item or optional data, or switching a `oneOf` or `anyOf` option, so that subschema's own `allOf` provides its defaults with either value. When switching options, though, the `if` of an `if-then-else` in the new option's `allOf` is checked against the data of the option being left, so under `skipDefaults` its `then` default is filled in only when that data matches the `if`.\n- The option picked on the initial render is not computed as if it were the root, even when its `oneOf` or `anyOf` is in the root schema, so under `skipDefaults` its `allOf` is left out until the user switches away from that option and back.\n\nThe branch of an `if-then-else` is picked from the form data, not from the computed defaults, except in a `dependencies` entry, as the last item below says:\n\n- When the `if` lists a property in `required` and only a default provides that property, the `then` default is left out until the form data holds the value, for instance on the initial render.\n- Without `required`, a missing property still satisfies the `if`'s `properties`, so such an `if` passes with no data, and its `then` default is filled in even when the `if` does not match the defaulted value.\n- With one `allOf` entry per `enum` value and no form data, the default `allOf` merger merges the `then` defaults of all the entries, and the first entry that defaults a property wins. An `experimental_customMergeAllOf` that throws on the conflicting `default`s drops the whole `allOf` instead.\n\nAn `allOf` in an object property or in an array's `items` is skipped as a whole, plain property defaults included, so it usually needs `populateDefaults` to provide its defaults.\nThis is specific to `allOf`:\n\n- An `if-then-else` placed directly in a nested object schema is resolved with either value, unless `emptyObjectFields` is `skipEmptyDefaults`. For example, under `skipDefaults`, `items: { type: 'object', if, then }` fills in the `then` default, while `items: { type: 'object', allOf: [{ if, then }] }` does not.\n- Adding a direct `if` to that `items` schema resolves its whole `allOf` too, unless `emptyObjectFields` is `skipEmptyDefaults`.\n- With an `experimental_customMergeAllOf` built on a deep merger, such as `createDeepAllOfMerge` from `@x0k/json-schema-merge` given a shallow merge built with that library's `createMerger` and `createShallowAllOfMerge`, merging an `allOf` also turns a property's `allOf: [{ if, then }]` into a direct `if-then-else`, so that property's `then` default is filled in under `skipDefaults`, unless `emptyObjectFields` is `skipEmptyDefaults`. That happens wherever an `allOf` is merged: the root's own `allOf`, or the `allOf` of an object or `items` schema that also has a direct `if`, but not a nested `allOf` on its own.\n- A `dependencies` entry in a nested object schema is resolved once its property has a value, its `allOf` and `if-then-else` included, even when `emptyObjectFields` is `skipEmptyDefaults`. A default counts as that value, and the entry's `if` is checked against it, so an `if` that lists the property in `required` passes with no form data, while one that does not match the default fails. For example, under `skipDefaults`, `items: { type: 'object', properties: { animal: { default: 'Cat' } }, dependencies: { animal: { allOf: [{ if, then }] } } }` fills in the `then` default. A root `dependencies` entry counts a default only while the form data is empty: once the form data holds any value, the entry is applied only when the form data holds its property.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Example',\n type: 'object',\n properties: {\n animalInfo: {\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n allOf: [\n {\n if: {\n properties: {\n animal: {\n const: 'Cat',\n },\n },\n },\n then: {\n properties: {\n food: {\n type: 'string',\n default: 'meat',\n enum: ['meat', 'grass', 'fish'],\n },\n },\n required: ['food'],\n },\n },\n ],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### constAsDefaults\n\nOptional enumerated flag controlling how const values are merged into the form data as defaults when dealing with undefined values, defaulting to `always`.\nThe defaulting behavior for this flag will always be controlled by the `emptyObjectField` flag value.\nFor instance, if `populateRequiredDefaults` is set and the const value is not required, it will not be set.\n\n| Flag Value | Description |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `always` | A const value will always be merged into the form as a default. If there is are const values in a `oneOf` (for instance to create an enumeration with title different from the values), the first const value will be defaulted |\n| `skipOneOf` | If const is in a `oneOf` it will NOT pick the first value as a default |\n| `never` | A const value will never be used as a default |\n\n### mergeDefaultsIntoFormData\n\nOptional enumerated flag controlling how the defaults are merged into the form data when dealing with undefined values, defaulting to `useFormDataIfPresent`.\n\nNOTE: If there is a default for a field and the `formData` is unspecified, the default ALWAYS merges.\n\n| Flag Value | Description |\n| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| `useFormDataIfPresent` | Legacy behavior - Do not merge defaults if there is a value for a field in `formData` even if that value is explicitly set to `undefined` |\n| `useDefaultIfFormDataUndefined` | If the value of a field within the `formData` is `undefined`, then use the default value instead |\n\n### nestedDefaultsPrecedence\n\nOptional enumerated flag controlling how defaults defined on multiple levels are merged together for overlapping properties, defaulting to `descendantWins`.\n\n| Flag Value | Description |\n| -----------------| --------------------------------------------------------------------------------------------------|\n| `descendantWins` | The innermost (descendant) default value definition takes precedence over its ancestor's defaults |\n| `ancestorWins` | The outermost (ancestor) default value definition takes precedence over any descendant's defaults |\n\n#### Example\n\nIn the following example, the `animal` property is a descendant of the root schema and both define a default value for `animal`. By default, the `animal`'s default value `Cat` would take precedence over its ancestor's `Fish`. However, since `nestedDefaultsPrecedence` is set to `ancestorWins`, the root schema's default value takes precedence and `animal` is set to `Fish` by default.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n default: {\n animal: 'Fish',\n },\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### requiredBooleanDefault\n\nOptional enumerated flag controlling whether a boolean listed in its parent's `required` array, with no `default` of its own, is populated with `false`, defaulting to `populateFalse`.\nAn explicit schema `default`, a parent default and an existing `formData` value always take precedence; this flag only decides what happens when none of them provides a value.\n\n| Flag Value | Description |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| `populateFalse` | A required boolean with no `default` is set to `false` |\n| `skip` | No value is synthesized; the property stays `undefined` until the user answers it, so `required` remains a validation concern |\n\n#### Example\n\nIn the following example, `agree` is required but has no `default`. By default it would start as `false`, and the form would report `{ agree: false }` through `onChange` on mount. With `requiredBooleanDefault` set to `skip`, `formData` stays `{}` until the user answers, and validation reports `agree` as missing until then. This is the behavior to choose when a boolean question is rendered with an explicit \"unanswered\" state, for example a `- - -` / Yes / No select, rather than a checkbox.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n agree: {\n type: 'boolean',\n title: 'Do you agree?',\n },\n },\n required: ['agree'],\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## experimental_customMergeAllOf\n\nThe `experimental_customMergeAllOf` function allows you to provide a custom implementation for merging `allOf` schemas. This can be particularly useful in case the where the default merge library ([@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/)) doesn't satisfy your functional or performance requirements.\n\nBy providing your own implementation, you can potentially achieve significant performance improvements. For instance, if your use case only requires a subset of JSON Schema features, you can implement a faster, more tailored merging strategy.\n\nIf you're looking for alternative `allOf` merging implementations, you might consider [allof-merge](https://github.com/udamir/allof-merge).\n\n**Warning:** This is an experimental feature. Only use this if you fully understand the implications of custom `allOf` merging and are prepared to handle potential edge cases. Incorrect implementations may lead to unexpected behavior or validation errors.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst customMergeAllOf = (schema: RJSFSchema): RJSFSchema => {\n // Your custom implementation here\n};\n\nrender(\n
,\n document.getElementById('app'),\n);\n```\n\n## disabled\n\nIt's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`.\n\n## readonly\n\nIt's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to make some fields read-only, see the `ui:readonly` parameter in `uiSchema`.\n\n## enctype\n\nThe value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).\n\n## extraErrors\n\nThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation.\nBy default, these are non-blocking errors, meaning that you can still submit the form when these are the only errors displayed to the user.\nSee [Validation](../usage/validation.md) for more information.\n\n## extraErrorsBlockSubmit\n\nIf set to true, causes the `extraErrors` to become blocking when the form is submitted.\n\n## fields\n\nDictionary of registered fields in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n## focusOnFirstError\n\nIf set to true, then the first field with an error will receive the focus when the form is submitted with errors.\n\nYou can also provide a custom callback function to handle what happens when this function is called.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, RJSFValidationError } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst focusOnError = (error: RJSFValidationError) => {\n console.log('I need to handle focusing this error');\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.\n\nSee [AntD Customization](themes/antd/uiSchema.md#formcontext) for formContext customizations for the `antd` theme.\nSee [Semantic UI Customization](themes/semantic-ui/uiSchema.md#formcontext) for formContext customizations for the `semantic-ui` theme.\n\n## formData\n\nThe data for the form, used to load a \"controlled\" form with its current data. If you want an \"uncontrolled\" form with initial data, then use `initialFormData` instead.\n\n## id\n\nThe value of this prop will be passed to the `id` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## idPrefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of ``\n\n## idSeparator\n\nTo avoid using a path separator that is present in field names, it is possible to change the separator used for ids (the default is `_`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n first: {\n type: 'string',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of `` when rendering `first`.\n\n## initialFormData\n\nThe initial data for the form, used to fill an \"uncontrolled\" form with existing data on the initial render and when `reset()` is called programmatically.\n\n## nameGenerator\n\nThe `nameGenerator` prop allows you to customize how HTML `name` attributes are generated for form fields. This is essential when submitting form data to backend frameworks that expect specific naming conventions for structured data.\n\n**Default behavior:** When no `nameGenerator` is provided, the `name` attribute will equal the `id` attribute (e.g., `root_tasks_0_title`).\n\nRJSF provides two built-in generators:\n\n**`bracketNameGenerator`** - Generates bracket notation for PHP/Rails (e.g., `root[tasks][0][title]`). Automatically appends `[]` for multi-value fields like checkboxes.\n\n**`dotNotationNameGenerator`** - Generates dot notation for other frameworks (e.g., `root.tasks.0.title`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { bracketNameGenerator, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n firstName: { type: 'string' },\n tasks: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n title: { type: 'string' },\n },\n },\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also create a custom generator by implementing the `NameGeneratorFunction` type, which receives `path` (array of path segments), `idPrefix` (typically `'root'`), and optional `isMultiValue` (boolean for multi-value fields).\n\n## liveOmit\n\nFlag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to\nto `true` and the form's data is updated by the user.\n\nIf no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for\nthe flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live omit will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## liveValidate\n\nFlag that describes when live validation will be performed. Live validation means that the form will perform\nvalidation and show any validation errors whenever the form data is updated, rather than just on submit.\n\nIf no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for\nthe flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live validation will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## method\n\nThe value of this prop will be passed to the `method` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method).\n\n## name\n\nThe value of this prop will be passed to the `name` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name).\n\n## noHtml5Validate\n\nIf set to true, turns off HTML5 validation on the form. Set to `false` by default.\n\n## noValidate\n\nIf set to true, turns off all validation. Set to `false` by default.\n\n> NOTE: In a future major release, this flag may be deleted replaced by making `validator` prop optional\n\n## omitExtraData\n\nIf set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.\n\n## onBlur\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n## onChange\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same first argument as `onSubmit` any time a value is updated in the form.\nIt will also receive, as the second argument, the `id` of the field which experienced the change.\nGenerally, this will be the `id` of the field for which input data is modified.\nIn the case of adding/removing of new fields in arrays or objects with `additionalProperties` or `patternProperties` and the rearranging of items in arrays, the `id` will be that of the array or object itself, rather than the item/field being added, removed or moved.\n\n## onError\n\nTo react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onError = (errors) => console.log('I have', errors.length, 'errors to fix');\n\nrender(, document.getElementById('app'));\n```\n\n## onFocus\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## onSubmit\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid.\nIt will be passed a result object having a `formData` attribute, which is the valid form data you're usually after.\nThe original event will also be passed as a second parameter:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onSubmit = ({ formData }, e) => console.log('Data submitted: ', formData);\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, you may need to set the `omitExtraData` and/or `liveOmit` props.\n\n## removeEmptyOptionalObjects\n\n> **Deprecated**: This prop no longer has any effect and will be removed in a future release. The behavior of pruning optional empty objects is now built into [`omitExtraData`](#omitextradata) — enable that prop instead.\n\nWhen a JSON Schema has a required field inside an optional object, any user interaction with that optional object \"activates\" it. Even if the user clears all the fields within that object, the empty object property (e.g., `{ test: {} }` or `{ test: { field1: \"\" } }`) remains in the `formData`. Because the object contains required fields that are now empty, the form becomes unsubmittable.\n\nPreviously, setting `removeEmptyOptionalObjects` to `true` caused the form to recursively prune these optional empty objects from the `formData` during `onChange`, `onBlur`, and `onSubmit`. This pruning is now performed automatically by `omitExtraData`.\n\n## schema\n\n**Required**! Form schema. We support JSON schema draft-07 by default. See [Schema Reference](https://json-schema.org/draft-07/json-schema-release-notes.html) for more information.\n\n## showErrorList\n\nWhen this prop is set to `top` or `bottom`, a list of errors (or the custom error list defined in the `ErrorList`) will also show at the `bottom` or `top` of the form. When set to false, only inline input validation errors will be shown. Set to `top` by default. See [Validation](../usage/validation.md) for more information.\n\n## tagName\n\nIt's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.\n\n```tsx\n\n```\n\nYou can also provide a class/function component.\n\n```tsx\nconst CustomForm = props => \n// ...\n\n```\n\n## target\n\nThe value of this prop will be passed to the `target` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-target).\n\n## templates\n\nDictionary of registered templates in the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## transformErrors\n\nA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation. See [Validation](../usage/validation.md) for more information.\n\n## translateString\n\nOptional string translation function, if provided, allows users to change the translation of the RJSF internal strings.\nSome strings contain replaceable parameter values as indicated by `%1`, `%2`, etc.\nThe number after the `%` indicates the order of the parameter.\nThe ordering of parameters is important because some languages may choose to put the second parameter before the first in its translation. In addition to replaceable parameters, some of the strings support the use of markdown and simple html.\n\nOne can use the [documentation](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts) of the `TranslatableString` enums to determine which enum values contain replaceable parameters and which support markdown and simple html.\n\nOne could use this function to alter one or more of the existing english strings to better suit one's application or fully translate all strings into a different language.\nBelow is an example of changing a few of the english strings to something else:\n\n```ts\nimport { TranslatableString, englishStringTranslator, replaceStringParameters } from '@rjsf/utils';\n\nfunction fixupSomeEnglishStrings(stringToTranslate: TranslatableString, params?: string[]): string {\n switch (stringToTranslate) {\n case TranslatableString.NewStringDefault:\n return ''; // Use an empty string for the new additionalProperties string default value\n case TranslatableString.KeyLabel:\n return replaceStringParameters('%1 Key Name', params); // Add \"Name\" onto the end of the WrapIfAdditionalTemplate key label\n default:\n return englishStringTranslator(stringToTranslate, params); // Fallback to the default english\n }\n}\n```\n\n## uiSchema\n\nForm uiSchema. See [uiSchema Reference](uiSchema.md) for more information.\n\n## useFallbackUiForUnsupportedType\n\nIf set to true, when an unsupported schema type is encountered, the form will render a fallback UI instead of displaying an error. The fallback UI will display a widget that allows the user to select a JSON Schema primitive type, and a field containing the form data that matches the selected type. Set to false by default.\n\n## validator\n\n**Required**! An implementation of the `ValidatorType` interface that is needed for form validation to work.\n`@rjsf/validator-ajv8` exports the implementation of this interface from RJSF version 4.\n\n## widgets\n\nDictionary of registered widgets in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n","frontmatter":{"title":" Props"},"isInternal":false,"tokens":8195,"sizeBytes":38050},{"name":"LayoutGridField.md","path":"packages/docs/docs/api-reference/LayoutGridField.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/LayoutGridField.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# LayoutGridField\n\nThe `LayoutGridField` will render a schema, uiSchema and formData combination out into a `GridTemplate` in the shape\ndescribed in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in\nthe uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):\n\n```json\n{\n \"field1\" : {\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": { ... }\n }\n }\n}\n```\n\nSee the [LayoutGridField usage](../usage/layout-grid.md) for more detailed walk-through on how to use the component. This page is condensed\nversion of the `uiSchema` APIs for faster reference.\n\n## `ui:row`\n\nThe outermost level of a `LayoutGridField` is the `ui:row` that defines the nested rows, columns, and/or condition\nelements (i.e. \"grid elements\") in the grid. This definition is either a simple \"grid elements\" OR an object with\nnative `GridTemplate` implementation-specific props and a `children` array of \"grid elements\". E.g. (as JSON objects):\n\nSimple `ui:row` definition, without additional `GridTemplate` props:\n\n```json\n{\n \"ui:row\": [\n { \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ... },\n ...\n ]\n}\n```\n\nComplex `ui:row` definition, with additional `GridTemplate` (this example uses `@mui/material/Grid2` native props):\n\n```json\n{\n \"ui:row\": {\n \"spacing\": 2,\n \"size\": {\n \"md\": 4\n },\n \"alignContent\": \"flex-start\",\n \"className\": \"GridRow\",\n \"children\": [\n {\n \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ...\n },\n ...\n ]\n }\n }\n```\n\n> NOTE: Special note about the native `className` prop values. All className values will automatically be looked up in\n> the `formContext.lookupMap` in case they have been defined using a CSS-in-JS approach. In other words, from the\n> example above, if the `Form` was constructed with a `layoutGridLookupMap` set to `{ GridRow: cssInJs.GridRowClass }`\n> then when rendered, the native `GridTemplate` will get the `className` with the value from\n> `cssInJs.GridRowClass`. This automatic lookup will happen for any of the \"grid elements\" when rendering with\n> `GridTemplate` props. If multiple className values are present, for example:\n> `{ className: 'GridRow GridColumn' }`, the classNames are split apart, looked up individually, and joined\n> together to form one className with the values from `cssInJs.GridRowClass` and `cssInJs.GridColumnClass`. See the\n> [example](../usage/layout-grid.md#named-lookup-support-for-classname) in the usage documentation.\n\n## `ui:col`\n\nThe `ui:col` grid element is used to specify the list of columns within a grid row. A `ui:col` element can take on\nseveral forms:\n\n1. a simple list of dotted-path field names within the root field;\n2. a list of objects containing the dotted-path field `name` any other props that are gathered into `ui:options` for the field;\n3. a list with a one-off `render` functional component with or without a non-field `name` identifier and any other to-be-spread props; and\n4. an object with native `GridTemplate` implementation specific props and a `children` array with 1) or 2) or even a nested `ui:row` or a `ui:condition` containing a `ui:row` (although this should be used carefully). E.g. (as JSON objects):\n\nSimple `ui:col` definition, without additional `GridTemplate` props and form 1 only children:\n\n```json\n{\n \"ui:col\": [\"innerField\", \"inner.grandChild\", ...]\n}\n```\n\nComplicated `ui:col` definition, without additional `GridTemplate` props and form 2 only children:\n\n```json\n{\n \"ui:col\": [\n { \"name\": \"innerField\", \"fullWidth\": true },\n { \"name\": \"inner.grandChild\", \"fullWidth\": false },\n ...\n ]\n}\n```\n\nMore complicated `ui:col` definition, without additional `GridTemplate` props and form 2 children, one being a\none-off `render` functional component without a non-field `name` identifier\n\n```json\n{\n \"ui:col\": [\n \"innerField\",\n {\n \"render\": \"WizardNavButton\",\n \"isNext\": true,\n \"size\": \"large\"\n }\n ]\n}\n```\n\nMost complicated `ui:col` definition, additional `GridTemplate` props and form 1, 2 and 3 children (this example\nuses @mui/material/Grid2 native props):\n\n```json\n{\n \"ui:col\": {\n \"size\": { \"md\": 4 },\n \"className\": \"GridColumn\",\n \"children\": [\n \"innerField\",\n { \"name\": \"inner.grandChild\", \"fullWidth\": true },\n { \"name\": \"customRender\", \"render\": \"CustomRender\", \"toSpread\": \"prop-value\" },\n { \"ui:row|ui:condition\": ... },\n ...\n ]\n }\n}\n```\n\n> NOTE: If a `name` prop does not exist or its value does not match any field in a schema, then it is assumed to be a\n> custom `render` component. If the `render` prop does not exist, a null render will occur. If `render` is a\n> string, its value will be looked up in the `formContext.lookupMap` first before defaulting to a null render. If the\n> resulting looked up `render` is not a function (React components are functions), then it will be a null render.\n\n## `ui:columns`\n\nThe `ui:columns` grid element is syntactic sugar to specify a set of `ui:col` columns that all share the same set of\nnative `GridTemplate` props. In other words rather than writing the following configuration that renders a\n`` element with 3 `` nodes and 2\n`` nodes within it (one for each of the fields contained in the `children`\nlist):\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"inner.grandChild\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [{ \"name\": \"inner.grandChild2\" }]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\nOne can write this instead:\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:columns\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\", \"inner.grandChild\", { \"name\": \"inner.grandChild2\", \"fullWidth\": true }]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\", \"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\n> NOTE: This syntax differs from `\"ui:col\": { \"className\": \"col-md-6\", \"children\": [\"innerField2\", \"inner.grandChild3\"] }` in that\n> the `ui:col` will render the two children fields inside a single ``\n> element.\n\n## `ui:condition`\n\nThe final grid element, `ui:condition`, allows for conditionally displaying \"grid elements\" within a row based on the\ncurrent value of a field as it relates to a (list of) hard-coded value(s). There are four elements that make up a\n`ui:condition`:\n\n1. the dotted-path `field` name within the root field that makes up the left-side of the condition;\n2. the hard-coded `value` (single or list) that makes up the right-side of the condition;\n3. the `operator` that controls how the left and right sides of the condition are compared; and\n4. the `children` array that defines the \"grid elements\" to display if the condition passes.\n\nA `ui:condition` uses one of three `operators` when deciding if a condition passes:\n\n1. The `all` operator will pass when the right-side and left-side contains all the same value(s);\n2. the `some` operator will pass when the right-side and left-side contain as least one value in common;\n3. the `none` operator will pass when the right-side and left-side do not contain any values in common. E.g. (as JSON objects):\n\nHere is how to render an if-then-else for `field2` which is an enum that has 3 known values and supports allowing\nany other value:\n\n```json\n{\n \"ui:row\": [\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"all\",\n \"value\": \"value1\",\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"some\",\n \"value\": [\"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"none\",\n \"value\": [\"value1\", \"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ]\n }\n }\n ]\n}\n```\n","isInternal":false,"tokens":2305,"sizeBytes":8676},{"name":"uiSchema.md","path":"packages/docs/docs/api-reference/themes/antd/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/themes/antd/uiSchema.md","title":"Antd Skill","category":"anthropic-skill","format":"markdown","content":"# AntD Customization\n\n## formContext\n\nYou can customize the look of the form by passing options to Ant-Design theme fields.\n\nThe formContext antd object accepts `descriptionLocation`, `readonlyAsDisabled` properties.\n\n`descriptionLocation` can be `'below' | 'tooltip'`, the default is `'below'` which places the description below the form item.\nYou can set it to `tooltip` that put the description inside the tooltip.\nNote that you should have antd 4.7+ to use `'tooltip'`.\n\nSetting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as disabled.\n\n```tsx\n\n```\n\nThese are the `formContext` properties that you can modify to adjust the `antd` presentation:\n\n- `descriptionLocation`: Where to display the description, either 'below' or 'tooltip', defaults to 'below'\n- `readonlyAsDisabled`: Whether to make the antd theme treat readOnly fields as disabled, defaults to true\n\n## Using Antd v5 theme\n\nYou can use AntD v5 styling by wrapping your application with `StyleProvider` from `@ant-design/cssinjs`.\n\nBy default, `@rjsf/antd` components are using the v4 styling.\n\n```tsx\nimport { StyleProvider } from '@ant-design/cssinjs';\n\nconst Component = () => {\n return (\n \n \n \n );\n};\n```\n","isInternal":false,"tokens":333,"sizeBytes":1410},{"name":"uiSchema.md","path":"packages/docs/docs/api-reference/themes/chakra-ui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/themes/chakra-ui/uiSchema.md","title":"Chakra-ui Skill","category":"anthropic-skill","format":"markdown","content":"# Chakra-UI Customization\n\nWhen using `@rjsf/chakra-ui` there are a couple of ways to customize the feel of the form.\n\n## Styling\n\nYou can use `ChakraProvider`, where you can customize the field components at a theme level.\nAnd, `uiSchema` allows for the use of a `\"chakra\"` `\"ui:option\"` to customize the styling of the form widgets.\n\n```json\n{\n \"yourField\": {\n \"ui:options\": {\n \"chakra\": {\n \"p\": \"1rem\",\n \"color\": \"blue.200\",\n \"sx\": {\n \"margin\": \"0 auto\"\n }\n }\n }\n }\n}\n```\n\nIt accepts the theme accessible [style props](https://chakra-ui.com/docs/features/style-props) provided by [Chakra](https://chakra-ui.com/docs/getting-started) and [Emotion](https://emotion.sh/docs/introduction).\n\n### Limitations\n\n- The `chakra` option is only available for the Chakra-UI theme.\n- The props are given to the parent component in the individual widget. To pass styles to the inner components, use the [`sx` prop](https://chakra-ui.com/docs/features/the-sx-prop).\n","isInternal":false,"tokens":267,"sizeBytes":1009},{"name":"uiSchema.md","path":"packages/docs/docs/api-reference/themes/mui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/themes/mui/uiSchema.md","title":"Mui Skill","category":"anthropic-skill","format":"markdown","content":"# MUI Customization\n\nYou can customize the underlying Material UI (MUI) components used by `@rjsf/mui` by passing props directly through the `uiSchema`. This is extremely useful for applying simple customizations (like adding an `endAdornment` to an input field, tweaking margins, or changing variants) without having to build a completely custom Widget or Template.\n\n## Basic Usage\n\nThe `@rjsf/mui` package looks for a `mui` key inside the `ui:options` of your `uiSchema`. Any top-level properties defined here will be applied to the primary MUI wrapper component for that field (e.g. `TextField` for inputs, `FormGroup` for checkboxes, `Paper`/`Grid` for object/array wrappers).\n\n```json\n{\n \"myField\": {\n \"ui:options\": {\n \"mui\": {\n \"variant\": \"filled\",\n \"fullWidth\": false,\n \"sx\": {\n \"backgroundColor\": \"background.paper\",\n \"padding\": 2\n }\n }\n }\n }\n}\n```\n\n## `slotProps` vs `rjsfSlotProps`\n\n`@rjsf/mui` distinguishes between two kinds of slot customization:\n\n- **`slotProps`**: Passed directly to MUI's native `slotProps` API on a component (e.g., `TextField`'s `htmlInput`, `input`, `inputLabel` targets). These are standard MUI customization points.\n- **`rjsfSlotProps`**: Used by RJSF template components (e.g., `ArrayFieldTemplate`, `ObjectFieldTemplate`) to target their specific sub-components (e.g., `paper`, `grid`, `box`). This key is explicitly extracted before spreading, which **prevents prop bleeding** — ensuring configuration is not accidentally passed to unintended child components.\n\n### Using `slotProps` (for MUI widgets like `BaseInputTemplate`)\n\n```json\n{\n \"myPriceField\": {\n \"ui:options\": {\n \"mui\": {\n \"slotProps\": {\n \"input\": {\n \"startAdornment\": \"$\"\n }\n }\n }\n }\n }\n}\n```\n\n### Using `rjsfSlotProps` (for structural templates)\n\n```json\n{\n \"myArrayField\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayPaper\": {\n \"elevation\": 10\n }\n }\n }\n }\n }\n}\n```\n\n## Customizing Templates (e.g. Object and Array wrappers)\n\nMUI theme customizations are natively passed down into both your standard fields and their wrapping structural templates (like `ArrayFieldTemplate` or `ObjectFieldTemplate`) (see [table below](#components-and-their-rjsfslotprops-targets)).\n\nIf you wish to specifically target the _individual array items_ handled by `ArrayFieldItemTemplate` instead of the whole array container, you nest these overrides by targeting the `items` inside the schema:\n\n```json\n{\n \"myArrayField\": {\n \"items\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayItemGridContainer\": {\n \"spacing\": 2\n }\n }\n }\n }\n }\n }\n}\n```\n\n### Components and their `rjsfSlotProps` targets\n\nDifferent templates and widgets expose different `rjsfSlotProps` targets based on their underlying MUI composition.\n\n| RJSF Component | `rjsfSlotProps` targets available | Description |\n| ---------------------------- | --------------------------------- | ------------------------------------------------------------------------------------- |\n| **BaseInputTemplate** | _(uses native `slotProps`)_ | Uses MUI's `slotProps.htmlInput`, `slotProps.input`, `slotProps.inputLabel` directly. |\n| **FieldTemplate** | `fieldFormControl` | Props passed to the outer `FormControl` wrapper. |\n| | `fieldTypography` | Props passed to the `Typography` component used for the description. |\n| **ObjectFieldTemplate** | `objectGridContainer` | Props passed to the outer `Grid` container. |\n| | `objectGridItem` | Props passed to each property's `Grid` item. |\n| | `objectAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `objectAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| **ArrayFieldTemplate** | `arrayBox` | Props passed to the inner `Box` container holding the array items. |\n| | `arrayPaper` | Props passed to the outer `Paper` wrapper. |\n| | `arrayAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `arrayAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| | `arrayAddButtonBox` | Props passed to the `Box` wrapping the Add button. |\n| **ArrayFieldItemTemplate** | `arrayItemGridContainer` | Props passed to the outer `Grid` container for the item row. |\n| | `arrayItemGridItem` | Props passed to the content `Grid` item. |\n| | `arrayItemOuterBox` | Props passed to the outer `Box`. |\n| | `arrayItemPaper` | Props passed to the `Paper` elevation component. |\n| | `arrayItemInnerBox` | Props passed to the inner `Box` holding the children. |\n| | `arrayItemToolbarGrid` | Props passed to the `Grid` holding the toolbar buttons. |\n| **CheckboxesWidget** | `formGroup` | Props passed to the `FormGroup` container. |\n| | `checkbox` | Props passed to individual `Checkbox` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each checkbox. |\n| **CheckboxWidget** | `checkbox` | Props passed to the single `Checkbox` component. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` component wrapping the checkbox. |\n| **RadioWidget** | `radioGroup` | Props passed to the `RadioGroup` component. |\n| | `radio` | Props passed to the individual `Radio` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each radio. |\n| **SelectWidget** | `inputLabel` | Props passed to the native MUI `InputLabel` component. |\n| | `select` | Props passed to the native MUI `Select` component. |\n| **ErrorList** | `errorBox` | Props passed to the inner `Box`. |\n| | `errorList` | Props passed to the `List` container. |\n| | `errorListItem` | Props passed to individual `ListItem` components wrapping each error. |\n| | `errorListItemIcon` | Props passed to the `ListItemIcon` next to each error. |\n| | `errorListItemText` | Props passed to the `ListItemText` displaying the error. |\n| | `errorPaper` | Props passed to the outer `Paper` wrapper. |\n| | `errorTypography` | Props passed to the `Typography` displaying the \"Errors\" title. |\n| **FieldErrorTemplate** | `fieldErrorList` | Props passed to the `List` container. |\n| | `fieldErrorListItem` | Props passed to individual `ListItem` components. |\n| | `fieldErrorFormHelperText` | Props passed to the `FormHelperText` displaying the error text. |\n| **FieldHelpTemplate** | `helpFormHelperText` | Props passed to the `FormHelperText` used for help text. |\n| **DescriptionField** | `descTypography` | Props passed to the `Typography` component. |\n| **TitleField** | `titleBox` | Props passed to the outer `Box` wrapper. |\n| | `titleDivider` | Props passed to the `Divider` element. |\n| | `titleTypography` | Props passed to the `Typography` component used for the title. |\n| | `titleGridContainer` | Props passed to `Grid` container when title has optional data controls. |\n| | `titleGridItem` | Props passed to the `Grid` item containing the title. |\n| | `titleOptionalDataGridItem` | Props passed to the `Grid` item containing the optional data control. |\n| **MultiSchemaFieldTemplate** | `multiBox` | Props passed to the wrapper `Box`. |\n| | `multiFormControl` | Props passed to the wrapper `FormControl`. |\n| **SubmitButton** | `submitBox` | Props passed to the `Box` wrapping the submit button. |\n| | `submitButton` | Props passed to the `Button` element. |\n| **WrapIfAdditionalTemplate** | `wrapGridContainer` | Props passed to the outer `Grid` container. |\n| | `wrapKeyGridItem` | Props passed to the `Grid` item containing the key `TextField`. |\n| | `wrapChildrenGridItem` | Props passed to the `Grid` item containing the field children. |\n| | `wrapRemoveButtonGridItem` | Props passed to the `Grid` item containing the remove button. |\n","isInternal":false,"tokens":2115,"sizeBytes":11780},{"name":"uiSchema.md","path":"packages/docs/docs/api-reference/themes/primereact/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/themes/primereact/uiSchema.md","title":"Primereact Skill","category":"anthropic-skill","format":"markdown","content":"# PrimeReact Customization\n\nYou may set PrimeReact-specific options in the `uiSchema` object using the `\"prime\"` `\"ui:option\"`.\n\n```json\n{\n \"password\": {\n \"ui:options\": {\n \"prime\": {\n \"feedback\": true,\n \"weakLabel\": \"Too weak\",\n \"mediumLabel\": \"Could be stronger\",\n \"strongLabel\": \"Strong password\",\n \"toggleMask\": true\n }\n }\n }\n}\n```\n\n## Components\n\nThe `@rjsf/primereact` theme renders to the following PrimeReact components:\n\n- [`InputText`](https://primereact.org/inputtext/) as the default widget\n- [`AutoComplete`](https://primereact.org/autocomplete/) as the default with `examples`\n- [`Checkbox`](https://primereact.org/checkbox/) for boolean fields and `checkboxes` widget\n- [`ColorPicker`](https://primereact.org/colorpicker/) as `color` widget\n- [`Password`](https://primereact.org/password/) as `password` widget\n- [`RadioButton`](https://primereact.org/radiobutton/) as `radio` widget\n- [`Slider`](https://primereact.org/slider/) as `range` widget\n- [`Dropdown`](https://primereact.org/dropdown/) as `select` widget\n- [`MultiSelect`](https://primereact.org/multiselect/) as `select` widget with `multiple` option\n- [`InputTextarea`](https://primereact.org/inputtextarea/) as `textarea` widget\n- [`InputNumber`](https://primereact.org/inputnumber/) as `updown` widget\n\nPlease refer to the [PrimeReact documentation](https://primereact.org/) for the available PrimeReact-specific options\nof each component.\n","isInternal":false,"tokens":378,"sizeBytes":1471},{"name":"uiSchema.md","path":"packages/docs/docs/api-reference/themes/semantic-ui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/themes/semantic-ui/uiSchema.md","title":"Semantic-ui Skill","category":"anthropic-skill","format":"markdown","content":"# Semantic-UI Customization\n\nThere are various options to pass to semantic theme fields.\n\nNote that every semantic property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {semantic:{[property]: [value]}}}`\n\nIn other words, the following uiSchema is equivalent:\n\n> Note: All fields have the following settings below as their default\n\n```\nfluid: Take on the size of its container.\ninverted: Format to appear on dark backgrounds.\n```\n\n```json\n{\n \"ui:options\": {\n \"semantic\": {\n \"fluid\": true,\n \"inverted\": false,\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\"\n }\n }\n }\n}\n```\n\n#### Semantic Widget Optional Properties\n\n- [Semantic props for TextWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for CheckboxWidget](https://react.semantic-ui.com/modules/checkbox/)\n- [Semantic props for SelectWidget](https://react.semantic-ui.com/modules/dropdown/)\n- [Semantic props for RangeWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for RadioWidget](https://react.semantic-ui.com/addons/radio/)\n- [Semantic props for PasswordWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for UpDownWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for TextAreaWidget](https://react.semantic-ui.com/addons/text-area/)\n\n## errorOptions\n\nThe uiSchema semantic object accepts an `errorOptions` property for each field of the schema:\n\n```\nsize: determines the size of the error message dialog\npointing: determines the direction of the arrow on the error message dialog\n```\n\nBelow are the current defaults\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n errorOptions: {\n size: 'small',\n pointing: 'above',\n },\n },\n },\n};\n```\n\n## semantic options uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the semantic uiSchema value within the `ui:options` property:\n\n```\nwrapItem: wrap each array item in a Segment\nhorizontalButtons: vertical buttons instead of the default horizontal\n```\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n wrapItem: true,\n horizontalButtons: false,\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nThe formContext semantic object accepts `wrapContent` ,`wrapLabel` properties.\n\n```\nwrapContent: wrap all inputs field content in a div, for custom styling\nwrapLabel: wrap all labels in a div, for custom styling via CSS\n```\n\n```tsx\n\n```\n","isInternal":false,"tokens":713,"sizeBytes":2961},{"name":"uiSchema.md","path":"packages/docs/docs/api-reference/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/uiSchema.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# uiSchema\n\nJSON Schema is limited for describing how a given data type should be rendered as a form input component. That's why this library introduces the concept of uiSchema.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.\n\nNote that almost every property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {[property]: [value]}}`, or `{\"ui:[property]\": value}`.\n\nIn other words, the following `uiSchema`s are equivalent:\n\n```json\n{\n \"ui:title\": \"Title\",\n \"ui:description\": \"Description\",\n \"ui:classNames\": \"my-class\",\n \"ui:submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n}\n```\n\n```json\n{\n \"ui:options\": {\n \"title\": \"Title\",\n \"description\": \"Description\",\n \"classNames\": \"my-class\",\n \"submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n }\n}\n```\n\nFor a full list of what is supported in the `uiSchema` see the `UiSchema` type in [@rjsf/utils/types.ts](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\nBe sure to pay attention to the hierarchical intersection to these other types: `UIOptionsBaseType` and `TemplatesType`.\n\n## Exceptions to the equivalence\n\nThere are 4 properties that exist in a `UiSchema` that will not be found in an inner `ui:options` object.\n\n### `ui:globalOptions`\n\nThe set of globally relevant `UiSchema` options that are read from the root-level `UiSchema` and stored in the `registry` for use everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': { copyable: true },\n};\n```\n\n### `ui:definitions`\n\nThe `ui:definitions` property allows you to define reusable UI customizations for schema `$ref` references. This is particularly useful for:\n\n- **Recursive schemas** - Define uiSchema once for a self-referencing schema node\n- **Reused definitions** - Apply consistent UI to schemas used in multiple places\n- **oneOf/anyOf branches** - Provide different uiSchema for branches that reference different definitions\n\nThe keys in `ui:definitions` must match the exact `$ref` path used in the schema (e.g., `#/definitions/address` or `#/$defs/node`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n },\n },\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' }, // Recursive reference\n },\n },\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/address': {\n street_address: { 'ui:placeholder': 'Street and number' },\n city: { 'ui:placeholder': 'City name' },\n },\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Enter node name' },\n children: { 'ui:options': { orderable: false } },\n },\n },\n // Local overrides take precedence over ui:definitions\n shipping_address: {\n street_address: { 'ui:placeholder': 'Shipping street (overrides definition)' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n#### Local Overrides\n\nYou can override specific properties from `ui:definitions` by providing values at the field path. Local values are merged with definitions, with local values taking precedence.\n\n#### oneOf/anyOf with Same Property Names\n\nWhen using `oneOf` or `anyOf` with branches that have properties with the same name, each branch's `$ref` maps to its own entry in `ui:definitions`, ensuring correct UI is applied:\n\n```tsx\nconst schema: RJSFSchema = {\n definitions: {\n person: { type: 'object', properties: { name: { type: 'string' } } },\n company: { type: 'object', properties: { name: { type: 'string' } } },\n },\n type: 'object',\n properties: {\n contact: {\n oneOf: [\n { title: 'Person', $ref: '#/definitions/person' },\n { title: 'Company', $ref: '#/definitions/company' },\n ],\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/person': {\n name: { 'ui:placeholder': 'Full name (e.g., John Doe)' },\n },\n '#/definitions/company': {\n name: { 'ui:placeholder': 'Company name (e.g., Acme Inc.)' },\n },\n },\n};\n```\n\n### `ui:rootFieldId` (deprecated)\n\n> DEPRECATED: Use `Form.idPrefix` instead, will be removed in a future major version\n\nBy default, this library will generate ids unique to the form for all rendered widgets.\nIf you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:rootFieldId': 'myform',\n};\n```\n\nThis will make all widgets have an id prefixed with `myform`.\n\n### `ui:field`\n\nThe `ui:field` property overrides the `Field` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a field that is used to look up an implementation from the `fields` list or an actual one-off `Field` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md#custom-field-components) for more information about how to use this property.\n\n### `ui:fieldReplacesAnyOrOneOf`\n\nBy default, any field that is rendered for an `anyOf`/`oneOf` schema will be wrapped inside the `AnyOfField` or `OneOfField` component.\nThis default behavior may be undesirable if your custom field already handles behavior related to choosing one or more subschemas contained in the `anyOf`/`oneOf` schema.\nBy providing a `true` value for this flag in association with a custom `ui:field`, the wrapped components will be omitted, so just one instance of the custom field will be rendered.\nIf the flag is omitted or set to `false`, your custom field will be wrapped by `AnyOfField`/`OneOfField`.\n\n### `ui:options`\n\nThe `ui:options` property cannot be nested inside itself and thus is the last exception.\n\n## `ui:XXX` or `ui:options.XXX`\n\nAll the properties that follow can be specified in the `uiSchema` in either of the two equivalent ways.\n\n> NOTE: The properties specific to array items can be found [here](../json-schema/arrays.md#array-item-uiSchema-options). For advanced dynamic UI schema capabilities for array items, see the [Dynamic UI Schema Examples](./dynamic-ui-schema-examples.md).\n\n### widget\n\nThe `ui:widget` property overrides the `Widget` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a widget that is used to look up an implementation from the `widgets` list or an actual one-off `Widget` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information about how to use this property.\n\n### classNames\n\nThe uiSchema object accepts a `ui:classNames` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:classNames': 'task-title foo-bar',\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### style\n\nThe uiSchema object accepts a `ui:style` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:style': { color: 'red' },\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### allowClearTextInputs\n\nThe optional `ui:allowClearTextInputs` uiSchema directive enables a clear/reset button for text-based input widgets.\nWhen set to true, a clear button will be displayed when the input field has a value and is not readonly or disabled.\nWhen omitted, no clear button will be displayed for text input fields.\n\nWhen clicked, the property value will be set to the `ui:emptyValue`, if defined.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:allowClearTextInputs': true,\n};\n```\n\nIt can also be enabled globally by setting the `allowClearTextInputs` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n allowClearTextInputs: true,\n },\n};\n```\n\n### autocomplete\n\nIf you want to mark a text input, select or textarea input to use the HTML autocomplete feature, set the `ui:autocomplete` uiSchema directive to a valid [HTML autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autocomplete': 'on',\n};\n```\n\n### autocapitalize\n\nTo control automatic capitalization on virtual keyboards for a text input, set the `ui:autocapitalize` uiSchema\ndirective to a valid [HTML autocapitalize value](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize#value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:autocapitalize': 'words',\n};\n```\n\n### autofocus\n\nIf you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autofocus': true,\n};\n```\n\n### description\n\nSometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:description': 'The best password',\n};\n```\n\n### deprecatedHandling\n\nThe `ui:deprecatedHandling` uiSchema directive controls how a field marked as `deprecated` in the JSON Schema is rendered.\n\nAccepts one of three values:\n\n- `'label'` (default): The field is rendered normally with `\"(deprecated)\"` appended to its label.\n- `'disable'`: The field is rendered but all its child widgets are disabled.\n- `'hide'`: The field is completely hidden from the form.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n legacyField: {\n 'ui:options': {\n deprecatedHandling: 'disable',\n },\n },\n};\n```\n\nIt can also be set globally by specifying the `deprecatedHandling` option in the `ui:globalOptions` uiSchema directive, which applies the chosen behavior to every deprecated field in the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n anotherOldField: { type: 'number', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n deprecatedHandling: 'hide',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### disabled\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### enableMarkdownInDescription\n\nThe `ui:enableMarkdownInDescription` uiSchema directive enables the support of Markdown syntax within the description of\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInDescription': true,\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInDescription` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInDescription: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableMarkdownInHelp\n\nThe `ui:enableMarkdownInHelp` uiSchema directive enables the support of Markdown syntax within the help displayed for\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInHelp': true,\n 'ui:help': '**bolded** text in the help',\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInHelp` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInHelp: true,\n },\n 'ui:help': '**bolded** text in the help',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableOptionalDataFieldForType\n\nThe `ui:enableOptionalDataFieldForType` uiSchema directive enables support for displaying the `Optional Data Controls` feature.\nThe intention of this feature is to allow developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields (see [examples](#add-optional-data-controls) below).\n\nThis directive takes, as its value, an array in one of four forms:\n\n1. `[]` - Disables the feature at a global or field level\n2. `['array']` - Enables the feature only for optional arrays at a global or field level\n3. `['object']` - Enables the feature only for optional object at a global or field level\n4. `['array', 'object']`- Enables the feature for both optional object and arrays at a global or field level\n\nIt can be specified in either the `ui:globalOptions` to turn the feature on for everything or in a specific field's `uiSchema`\nTo work properly this option must be coupled with the [emptyObjectFields](./form-props.md#emptyobjectfields) experimental feature on `Form` using the `populateRequiredDefaults` or `skipDefaults` options.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"undefined\" value in `formData` will NOT render any of the container's UI elements.\nInstead the object/array container's field title will have an \"Add optional data\" icon button that, when clicked will cause an empty container data element to be added to `formData`.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"defined\" value in `formData` will render all of the container's UI elements as normal AND the object/array container's field title will have a \"Remove optional data\" icon button that, when clicked will set the data for field in the `formData` to \"undefined\".\n\nHere is an example of what the UI will look like when enabled using the following `Form` configuration:\n\n```tsx\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n#### Add Optional Data Controls\n\n![add optional data controls](./OptionalDataControlsAdd.png)\n\n#### Remove Optional Data Controls\n\n![remove optional data controls](./OptionalDataControlsRemove.png)\n\n### emptyValue\n\nThe `ui:emptyValue` uiSchema directive provides the value to store when the input for a field is emptied, whether by typing or by clicking the `ui:allowClearTextInputs` clear button. It defaults to `undefined`, which omits the field from the form data entirely.\n\n### enumDisabled\n\nTo disable an option, use the `enumDisabled` property in uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': ['two'],\n};\n```\n\n### enumNames\n\nAllows a user to provide labels for enum values in the schema. Can be an array (matched by index) or a map (matched by value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchemaArray: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchemaMap: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n```\n\n### enumOrder\n\nControls the display order of enum options. Use `'*'` to represent remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n```\n\n### filePreview\n\nThe `FileWidget` can be configured to show a preview of an image or a download link for non-images using this flag.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\nconst uiSchema: UiSchema = {\n 'ui:options': {\n filePreview: true,\n },\n};\n```\n\n### help\n\nSometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:help': 'Hint: Make it strong!',\n};\n```\n\n![](https://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s) (after contextualized errors, if any).\n\n### hideError\n\nThe `ui:hideError` uiSchema directive will, if set to `true`, hide the default error display for the given field AND all of its child fields in the hierarchy.\n\nIf you need to enable the default error display of a child in the hierarchy after setting `hideError: true` on the parent field, simply set `hideError: false` on the child.\n\nThis is useful when you have a custom field or widget that utilizes either the `rawErrors` or the `errorSchema` to manipulate and/or show the error(s) for the field/widget itself.\n\n### inputType\n\nTo change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n inputType: 'tel',\n },\n};\n```\n\n### label\n\nField labels are rendered by default.\nLabels may be omitted on a per-field by setting the `label` option to `false` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThey can also be omitted globally by setting the `label` option to `false` in the `ui:globalOptions` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### optionValueFormat\n\nControls how enum-backed widgets (`select`, `radio`, `checkboxes`) encode option values in their DOM `value` attributes. Accepts `'indexed'` (default) or `'realValue'`.\n\n- `'indexed'`: options are encoded as their array index (e.g. `value=\"0\"`, `value=\"1\"`). This is the historical behavior and keeps non-primitive enum values (objects, arrays) addressable without stringifying them.\n- `'realValue'`: primitive option values are stringified directly (e.g. `value=\"admin\"`, `value=\"42\"`, `value=\"true\"`). This enables native HTML form submission and browser autocomplete since the submitted value matches the enum value. Non-primitive values (objects, arrays) still fall back to their index because `String(obj)` would produce `\"[object Object]\"`.\n\nThe form data passed to `onChange` is always the typed enum value; this option only affects the DOM-level encoding. Can be specified in `ui:globalOptions` to apply to all enum-backed fields, or per-field in `ui:options`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n role: { type: 'string', enum: ['admin', 'editor', 'viewer'] },\n },\n};\n\n// Form-wide\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n optionValueFormat: 'realValue',\n },\n};\n\n// Or per-field\nconst fieldUiSchema: UiSchema = {\n role: {\n 'ui:options': {\n optionValueFormat: 'realValue',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### order\n\nThis property allows you to reorder the properties that are shown for a particular object. See [Objects](../json-schema/objects.md) for more information.\n\n### placeholder\n\nYou can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', format: 'uri' };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'http://',\n};\n\nrender(, document.getElementById('app'));\n```\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', enum: ['First', 'Second'] };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'Choose an option',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### readonly\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only. This is equivalent to setting the `readOnly` property in the schema.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### rows\n\nYou can set the initial height of a textarea widget by specifying `rows` option.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n widget: 'textarea',\n rows: 15,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### title\n\nSometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:title': 'Your password',\n};\n```\n\n### submitButtonOptions\n\nSometimes it's convenient to change the behavior of the submit button for the form. This is the purpose of the `ui:submitButtonOptions` uiSchema directive:\n\nYou can pass any other prop to the submit button if you want, by default, this library will set the following options / props mentioned below for all submit buttons:\n\n#### `norender` option\n\nYou can set this property to `true` to remove the submit button completely from the form. Nice option, if the form is just for viewing purposes.\n\n#### `submitText` option\n\nYou can use this option to change the text of the submit button. Set to \"Submit\" by default.\n\n#### `props` section\n\nYou can pass any other prop to the submit button if you want, via this section.\n\n##### `disabled` prop\n\nYou can use this option to disable the submit button.\n\n##### `className` prop\n\nYou can use this option to specify a class name for the submit button.\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:submitButtonOptions': {\n props: {\n disabled: false,\n className: 'btn btn-info',\n },\n norender: false,\n submitText: 'Submit',\n },\n};\n```\n\n## `duplicateKeySuffixSeparator` option\n\nWhen using `additionalProperties`, key collision is prevented by appending a unique integer suffix to the duplicate key.\nFor example, when you add a key named `myKey` to a form where `myKey` is already defined, then your new key will become `myKey-1`.\nYou can use `ui:duplicateKeySuffixSeparator` to override the default separator, `\"-\"` with a string of your choice on a per-field basis.\n\nYou can also set this in the `ui:globalOptions` to have the same separator used everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n 'ui:globalOptions': {\n duplicateKeySuffixSeparator: '_',\n },\n};\n```\n\n## Using uiSchema with oneOf, anyOf\n\n### anyOf\n\nThe uiSchema will work with elements inside an `anyOf` as long as the uiSchema defines the `anyOf` key at the same level as the `anyOf` within the `schema`.\nBecause the `anyOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `anyOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n anyOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n### oneOf\n\nThe uiSchema will work with elements inside an `oneOf` as long as the uiSchema defines the `oneOf` key at the same level as the `oneOf` within the `schema`.\nBecause the `oneOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `oneOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n oneOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n## Theme Options\n\n- [AntD Customization](themes/antd/uiSchema.md)\n- [Chakra-UI Customization](themes/chakra-ui/uiSchema.md)\n- [MUI Customization](themes/mui/uiSchema.md)\n- [PrimeReact Customization](themes/primereact/uiSchema.md)\n- [Semantic-UI Customization](themes/semantic-ui/uiSchema.md)\n","isInternal":false,"tokens":7859,"sizeBytes":30861},{"name":"utility-functions.md","path":"packages/docs/docs/api-reference/utility-functions.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/utility-functions.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# RJSF utility functions, constants and types\n\nIn version 5, the utility functions from `@rjsf/core/utils` were refactored into their own library called `@rjsf/utils`.\nThese utility functions are separated into two distinct groups.\nThe first, larger, group are the [functions](#non-validator-utility-functions) that do NOT require a `ValidatorType` interface be provided as one of their parameters.\nThe second, smaller, group are the [functions](#validator-based-utility-functions) that DO require a `ValidatorType` interface be provided as a parameter.\nThere is also a helper [function](#schema-utils-creation-function) used to create a `SchemaUtilsType` implementation from a `ValidatorType` implementation and `rootSchema` object.\n\n## Constants\n\nThe `@rjsf/utils` package exports a set of constants that represent all the keys into various elements of a RJSFSchema or UiSchema that are used by the various utility functions.\nIn addition to those keys, there is the special `ADDITIONAL_PROPERTY_FLAG` flag that is added to a schema under certain conditions by the `retrieveSchema()` utility.\n\nThese constants can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/constants.ts).\n\n## Types\n\nAdditionally, the Typescript types used by the utility functions represent nearly all the types used by RJSF.\nThose types are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\n\n**`ObjectPath`** — Used by the path utilities (`getByPath`, `setByPath`, `hasByPath`, `unsetByPath`) to address a value inside a plain object. It is `string | number | FieldPathList`. A bare **string is always a single literal key**: `'a.b'` means the key `'a.b'`, never the nested path `a` → `b`. To walk a dotted path string, split it explicitly with [toPath()](#topath) first, or pass a `FieldPathList` (`(string | number)[]`) of segments. Reads and existence checks resolve **own** properties only, so inherited members never appear as form data.\n\n**`SchemaFieldPath`** — Used when navigating a JSON Schema subtree (for example with `getFromSchema` and `findFieldInSchema` on `SchemaUtilsType`, documented under [Validator-based utility functions](#validator-based-utility-functions)). It is `string | FieldPathList`: either a dotted path or an array of segments with the same rules as `FieldPathList` (`(string | number)[]`). A numeric segment denotes an array index or an object key that is numeric. Navigation skips only `undefined` or empty-string segments, so segment **`0`** is always honored (this avoids the bug from treating `0` as a falsy path unit).\n\n## Enums\n\nThere are enumerations in `@rjsf/utils` that are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese enums can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts).\n\n## Non-Validator utility functions\n\n### allowAdditionalItems()\n\nChecks the schema to see if it is allowing additional items, by verifying that `schema.additionalItems` is an object.\nThe user is warned in the console if `schema.additionalItems` has the value `true`.\n\n#### Parameters\n\n- schema: S - The schema object to check\n\n#### Returns\n\n- boolean: True if additional items is allowed, otherwise false\n\n### ariaDescribedByIds()\n\nReturn a list of element ids that contain additional information about the field that can be used to as the aria description of the field.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n- [includeExamples=false]: boolean - Optional flag, if true, will add the `examplesId` into the list\n\n#### Returns\n\n- string: The string containing the list of ids for use in an `aria-describedBy` attribute\n\n### asNumber()\n\nAttempts to convert the string into a number. If an empty string is provided, then `undefined` is returned.\nIf a `null` is provided, it is returned.\nIf the string ends in a `.` then the string is returned because the user may be in the middle of typing a float number.\nIf a number ends in a pattern like `.0`, `.20`, `.030`, string is returned because the user may be typing number that will end in a non-zero digit.\nOtherwise, the string is wrapped by `Number()` and if that result is not `NaN`, that number will be returned, otherwise the string `value` will be.\n\n#### Parameters\n\n- value: string | null - The string or null value to convert to a number\n\n#### Returns\n\n- undefined | null | string | number: The `value` converted to a number when appropriate, otherwise the `value`\n\n### bracketNameGenerator()\n\nGenerates bracketed names for form fields.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [isMultiValue]: boolean | undefined - Optional flag, if true, will append `[]` to the end of the name for multi-value fields (e.g., checkboxes, multi-select)\n\n#### Returns\n\n- string: The generated bracketed name (e.g., `root[tasks][0][title]`, or `root[hobbies][]` for multi-value fields)\n\n### buttonId()\n\nReturn a consistent `id` for the `btn` button element\n\n#### Parameters\n\n- id: FieldPathId | string - The id of the parent component for the option\n- btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove' - The button type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the button from the given `id` and `btn` type\n\n### canExpand<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks whether the field described by `schema`, having the `uiSchema` and `formData` supports expanding.\nThe UI for the field can expand if it has additional properties, is not forced as non-expandable by the `uiSchema` and the `formData` object doesn't already have `schema.maxProperties` elements.\n\n#### Parameters\n\n- schema: S - The schema for the field that is being checked\n- [uiSchema=\\{}]: UiSchema<T, S, F> - The uiSchema for the field\n- [formData]: T | undefined - The formData for the field\n\n#### Returns\n\n- boolean: True if the schema element has additionalProperties or patternProperties keywords, is expandable, and not at the maxProperties limit\n\n### createErrorHandler<T = any>()\n\nGiven a `formData` object, recursively creates a `FormValidation` error handling structure around it\n\n#### Parameters\n\n- formData: T - The form data around which the error handler is created\n\n#### Returns\n\n- FormValidation<T>: A `FormValidation` object based on the `formData` structure\n\n### dataURItoBlob()\n\nGiven the `FileReader.readAsDataURL()` based `dataURI` extracts that data into an actual Blob along with the name\nof that Blob if provided in the URL. If no name is provided, then the name falls back to `unknown`.\n\n#### Parameters\n\n- dataURI: string - The `DataUrl` potentially containing name and raw data to be converted to a Blob\n\n#### Returns\n\n- \\{ blob: Blob, name: string }: An object containing a Blob and its name, extracted from the URI\n\n### dateRangeOptions<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns a list of options for a date range between `start` and `stop`.\nIf the start date is greater than the end date, then the date range is reversed.\nIf `start` and `stop` are negative numbers (or zero), then they will be treated as relative to the current year.\n\n#### Parameters\n\n- start: number - The starting point of the date range\n- stop: number - The ending point of the date range\n\n#### Returns\n\n- EnumOptionsType<S>[]: The list of EnumOptionsType for the date range between `start` and `stop`\n\n#### Throws\n\n- Error when `start` and `stop` aren't both %lt;= 0 or > 0\n\n### deepEquals()\n\nImplements a deep equals that treats all functions as equivalent and tracks circular references, so self-referential inputs do not recurse infinitely.\n\n#### Parameters\n\n- a: any - The first element to compare\n- b: any - The second element to compare\n\n#### Returns\n\n- boolean: True if the `a` and `b` are deeply equal, false otherwise\n\n### descriptionId()\n\nReturn a consistent `id` for the field description element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field description element from the given `id`\n\n### dotNotationNameGenerator()\n\nGenerates dot-notation names for form fields. Multi-value fields are handled the same as single-value fields in dot notation.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [_isMultiValue]: boolean | undefined - Optional flag (unused in dot notation)\n\n#### Returns\n\n- string: The generated dot-notation name (e.g., `root.tasks.0.title`)\n\n### englishStringTranslator()\n\nTranslates a `TranslatableString` value `stringToTranslate` into english.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `stringToTranslate` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\nstringToTranslate: TranslatableString - The `TranslatableString` value to convert to english\n[params]: string[] - The optional list of replaceable parameter values to substitute to the english string\n\n#### Returns\n\n- string: The `stringToTranslate` itself with any replaceable parameter values substituted\n\n### enumOptionsDeselectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nRemoves the enum option value at the `valueIndex` from the currently `selected` (list of) value(s).\nIf `selected` is a list, then that list is updated to remove the enum option value with the `valueIndex` in `allEnumOptions`.\nIf it is a single value, then if the enum option value with the `valueIndex` in `allEnumOptions` matches `selected`, undefined is returned, otherwise the `selected` value is returned.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value to be removed from the selected list or single value\n- [selected]: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined - The current (list of) selected value(s)\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated `selected` list with the `value` removed from it\n\n### enumOptionSelectedValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nComputes the value to pass to a select element's `value` attribute.\nWhen `format` is `'realValue'`, converts form data values to strings.\nWhen `format` is `'indexed'` (the default), resolves to index-based values via `enumOptionsIndexForValue`.\nReturns `emptyValue` when the current value is empty.\n\n#### Parameters\n\n- value: any - The current form data value\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- multiple: boolean - Whether the select allows multiple selections\n- [format='indexed']: OptionValueFormat - How option values are encoded on the DOM\n- emptyValue: any - The value to return when the selection is empty\n\n#### Returns\n\n- any: The value to use for the select element's `value` attribute\n\n### enumOptionsIndexForValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the index(es) of the options in `allEnumOptions` whose value(s) match the ones in `value`.\nAll the `enumOptions` are filtered based on whether they are a \"selected\" `value` and the index of each selected one is then stored in an array.\nIf `multiple` is true, that array is returned, otherwise the first element in the array is returned.\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The single value or list of values for which indexes are desired\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [multiple=false]: boolean - Optional flag, if true will return a list of index, otherwise a single one\n\n#### Returns\n\n- string | string[] | undefined: A single string index for the first `value` in `allEnumOptions`, if not `multiple`. Otherwise, the list of indexes for (each of) the value(s) in `value`.\n\n### enumOptionsIsSelected<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetermines whether the given `value` is (one of) the `selected` value(s).\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] - The value being checked to see if it is selected\n- selected: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The current selected value or list of values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- boolean: true if the `value` is one of the `selected` ones, false otherwise\n\n### enumOptionsSelectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nAdd the `value` to the list of `selected` values in the proper order as defined by `allEnumOptions`.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value that should be selected\n- selected: EnumOptionsType<S>[\"value\"][] - The current list of selected values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated list of selected enum values with `value` added to it in the proper location\n\n### enumOptionsValueForIndex<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the value(s) from `allEnumOptions` at the index(es) provided by `valueIndex`.\nIf `valueIndex` is not an array AND the index is not valid for `allEnumOptions`, `emptyValue` is returned.\nIf `valueIndex` is an array, AND it contains an invalid index, the returned array will have the resulting undefined values filtered out, leaving only valid values or in the worst case, an empty array.\n\n#### Parameters\n\n- valueIndex: string | number | Array<string | number> - The index(es) of the value(s) that should be returned\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [emptyValue]: EnumOptionsType<S>[\"value\"] | undefined - The value to return when the non-array `valueIndex` does not refer to a real option\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined: The single or list of values specified by the single or list of indexes if they are valid. Otherwise, `emptyValue` or an empty list.\n\n### enumOptionValueDecoder<S extends StrictRJSFSchema = RJSFSchema>()\n\nDecodes a string from a DOM value attribute back to a typed enum value.\nWhen `format` is `'realValue'`, does a reverse lookup: finds the enum option whose `String(value)` matches the input string and returns the original typed value.\nFor object/array values that were encoded as indices, falls back to index resolution.\nWhen `format` is `'indexed'` (the default), uses index-based resolution via `enumOptionsValueForIndex`.\n\n#### Parameters\n\n- value: string | string[] - The string value(s) from the DOM\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- [format='indexed']: OptionValueFormat - How the values were encoded on the DOM\n- emptyValue: unknown - The value to return for empty/missing selections\n\n#### Returns\n\n- unknown: The original typed enum value(s)\n\n### enumOptionValueEncoder()\n\nEncodes an enum option value into a string for a DOM value attribute.\nWhen `format` is `'realValue'`, primitive values are converted via `String()`.\nNon-primitive values (objects, arrays) fall back to the index since `String()` would produce `\"[object Object]\"`.\nWhen `format` is `'indexed'` (the default), returns the index as a string.\n\n#### Parameters\n\n- value: unknown - The typed enum value\n- index: number - The option's position in the enumOptions array\n- [format='indexed']: OptionValueFormat - How to encode the value for the DOM attribute\n\n#### Returns\n\n- string: The string to use as the DOM value attribute\n\n### logUnsupportedDefaultForEnum<S extends StrictRJSFSchema = RJSFSchema>()\n\nLogs a warning when a single-select enum widget has a schema default that is not one of its enum options.\nMulti-select widgets are ignored because they do not use the same single-value default handling.\n\n#### Parameters\n\n- id: string - The field id used in the warning message\n- schema: S - The schema whose default value is checked\n- [enumOptions]: EnumOptionsType<S>[] - The enum options available to the widget\n- [multiple=false]: boolean - Whether the widget allows multiple selections\n\n### errorId()\n\nReturn a consistent `id` for the field error element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field error element from the given `id`\n\n### examplesId()\n\nReturn a consistent `id` for the field examples element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field examples element from the given `id`\n\n### findSchemaDefinition<S extends StrictRJSFSchema = RJSFSchema>()\n\nGiven the name of a `$ref` from within a schema, using the `rootSchema`, look up and return the sub-schema using the path provided by that reference.\nIf `#` is not the first character of the reference, or the path does not exist in the schema, then throw an Error.\nOtherwise, return the sub-schema. Also deals with nested `$ref`s in the sub-schema.\n\n#### Parameters\n\n- $ref: string - The ref string for which the schema definition is desired\n- [rootSchema={}]: S - The root schema in which to search for the definition\n\n#### Returns\n\n- S: The sub-schema within the `rootSchema` which matches the `$ref` if it exists\n\n#### Throws\n\n- Error indicating that no schema for that reference exists\n\n### getByPath<R = unknown>()\n\nGets the value at `path` of `obj`, returning `defaultValue` when the resolved value is `undefined`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment must be an **own** property, matching [hasByPath()](#hasbypath), so the two can be used as a guard/read pair.\nInherited members are never resolved: `getByPath({}, 'toString')` returns `defaultValue` rather than `Function.prototype.toString`. For the plain form data and schemas RJSF navigates, an inherited member is never data, and the own-property rule also makes prototype internals such as `__proto__` unreachable unless they are genuine own data keys.\n\nAn empty segment list resolves to nothing, so `defaultValue` is returned rather than `obj` itself; this matches [hasByPath()](#hasbypath), which is `false` for an empty path.\n\nThe value at a runtime-computed path cannot be known statically, so `R` is the caller's declaration of the expected type (like `Map.get()`); it defaults to `unknown`, which forces narrowing when no type is given.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments at which to get the value\n- [defaultValue]: R - The value returned when the resolved value is `undefined`\n\n#### Returns\n\n- R: The resolved value, otherwise `defaultValue`\n\n#### Example\n\n```typescript\ngetByPath({ a: { b: 1 } }, ['a', 'b']); // 1\ngetByPath({ 'a.b': 1 }, 'a.b'); // 1, a bare string is one literal key\ngetByPath({ a: { b: 1 } }, toPath('a.b')); // 1\ngetByPath({ a: {} }, ['a', 'missing'], 'fallback'); // 'fallback'\ngetByPath({}, 'toString', 'fallback'); // 'fallback', inherited members are not read\ngetByPath({ a: 1 }, [], 'fallback'); // 'fallback', an empty path resolves to nothing\n```\n\n### getChangedFields(a: unknown, b: unknown, deep?: boolean)\n\nCompares two objects and returns the names of the fields that have changed.\nThis function iterates over each field of object `a`, using `_.isEqual` to compare the field value with the corresponding field value in object `b`.\nIf the values are different, the field name will be included in the returned array.\n\nWhen `deep` is true, a field holding a nested object or a same-length array is descended into and the dotted path of the deepest field that changed is returned instead of the name of the top-level field holding it.\nA key that contains a `.` or a `[` is descended into like any other: the path it produces cannot be told apart from a path through nested keys, and neither can the entry an `ErrorSchema` keeps for it, since [toErrorSchema()](#toerrorschema) spells such a name out as a path in the same way.\n\n#### Parameters\n\n- a: unknown - The first object, representing the original data to compare.\n- b: unknown - The second object, representing the updated data to compare.\n- [deep=false]: boolean - Optional flag that, when true, returns the dotted path of the deepest field that changed.\n\n#### Returns\n\n- string[] : An array of field names that have changed.\n\n#### Example\n\n```typescript\nconst a = { name: 'John', age: 30 };\nconst b = { name: 'John', age: 31 };\nconst changedFields = getChangedFields(a, b);\nconsole.log(changedFields); // Output: ['age']\n```\n\n#### Example (deep)\n\n```typescript\nconst a = { items: [{ qux: '', corge: '' }] };\nconst b = { items: [{ qux: 'a', corge: '' }] };\nconsole.log(getChangedFields(a, b)); // Output: ['items']\nconsole.log(getChangedFields(a, b, true)); // Output: ['items.0.qux']\n```\n\n### getDecimalSeparator(languages?: string | string[])\n\nDetermines the locale-specific decimal separator.\nIt uses the provided locale or the first locale in navigator.languages (if available) and falls back to \"en\".\n\n#### Parameters\n\n- languages?: string | string[] - Optional array of locales or a single locale string.\n\n#### Returns\n\n- string : The decimal separator character (typically '.' or ',').\n\n#### Example\n\n```typescript\nconst separator = getDecimalSeparator('fr');\nconsole.log(separator); // Output: ','\n```\n\n### getDiscriminatorFieldFromSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the `discriminator.propertyName` when defined in the `schema` if it is a string. A warning is generated when it is not a string.\nReturns `undefined` when a valid discriminator is not present.\n\n#### Parameters\n\n- schema: S - The schema from which the discriminator is potentially obtained\n\n#### Returns\n\n- string | undefined: The `discriminator.propertyName` if it exists in the schema, otherwise `undefined`\n\n### getDateElementProps()\n\nGiven date & time information with optional yearRange & format, returns props for DateElement\n\n#### Parameters\n\n- date: DateObject - Object containing date with optional time information\n- time: boolean - Determines whether to include time or not\n- [yearRange=[1900, new Date().getFullYear() + 2]]: [number, number] - Controls the list of years to be displayed\n- [format='YMD']: DateElementFormat - Controls the order in which day, month and year input element will be displayed\n\n#### Returns\n\n- Array of props for DateElement\n\n### getInputProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nUsing the `schema`, `defaultType` and `options`, extract out the props for the `` element that make sense.\n\n#### Parameters\n\n- schema: S - The schema for the field provided by the widget\n- [defaultType]: string | undefined - The default type, if any, for the field provided by the widget\n- [options={}]: UIOptionsType<T, S, F> - The UI Options for the field provided by the widget\n- [autoDefaultStepAny=true]: boolean - Determines whether to auto-default step=any when the type is number and no step\n\n#### Returns\n\n- InputPropsType: The extracted `InputPropsType` object\n\n### getOptionMatchingSimpleDiscriminator()\n\nCompares the value of `discriminatorField` within `formData` against the value of `discriminatorField` within schema for each `option`. Returns index of first `option` whose discriminator matches formData. Returns `undefined` if there is no match.\n\nThis function does not work with discriminators of `\"type\": \"object\"` and `\"type\": \"array\"`\n\n#### Parameters\n\n- [formData]: T | undefined - The current formData, if any, used to figure out a match\n- options: S[] - The list of options to find a matching options from\n- [discriminatorField]: string | undefined - The optional name of the field within the options object whose value is used to determine which option is selected\n\n#### Returns\n\n- number | undefined: index of the matched option\n\n### getOptionValueFormat()\n\nResolves the effective `optionValueFormat` for enum-backed widgets.\nProvides a single source of truth for the default DOM encoding format (`'indexed'`) used by `SelectWidget`, `RadioWidget`, and `CheckboxesWidget`.\nWidgets should call this helper once and pass the result to `enumOptionValueEncoder`, `enumOptionValueDecoder`, and `enumOptionSelectedValue` rather than reading `options.optionValueFormat` directly.\n\n#### Parameters\n\n- [options]: \\{ optionValueFormat?: OptionValueFormat } | undefined - The widget options (typically from the `options` prop, already resolved from `ui:options` and `ui:globalOptions`)\n\n#### Returns\n\n- OptionValueFormat: The resolved `OptionValueFormat`, defaulting to `'indexed'` when not set\n\n### getPropertySchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the sub-schema declared for `property` in the `properties` of `schema`, falling back to an empty schema when the schema has no such property.\nCallers treat the properties of a schema as schemas of the same type `S`, which the `JSONSchema7` typing of `properties` cannot express, so this function owns that single assertion rather than repeating it at every lookup.\n\n#### Parameters\n\n- schema: S | undefined - The schema, if any, from which to read the property sub-schema\n- property: string - The name of the property whose sub-schema is desired\n\n#### Returns\n\n- S: The sub-schema for `property`, or an empty schema when it is not declared\n\n### getSchemaType()\n\nGets the type of a given `schema`.\nIf the type is not explicitly defined, then an attempt is made to infer it from other elements of the schema as follows:\n\n- schema.const: Returns the `guessType()` of that value\n- schema.enum: Returns `string`\n- schema.properties: Returns `object`\n- schema.additionalProperties: Returns `object`\n- schema.patternProperties: Returns `object`\n- type is an array with a length of 2 and one type is 'null': Returns the other type\n\n#### Parameters\n\n- schema: S - The schema for which to get the type\n\n#### Returns\n\n- string | string[] | undefined: The type of the schema\n\n### getSubmitButtonOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nExtracts any `ui:submitButtonOptions` from the `uiSchema` and merges them onto the `DEFAULT_OPTIONS`\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - the UI Schema from which to extract submit button props\n\n#### Returns\n\n- UISchemaSubmitButtonOptions: The merging of the `DEFAULT_OPTIONS` with any custom ones\n\n### getTemplate<Name extends keyof TemplatesType<T, S, F>, T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nReturns the template with the given `name` from either the `uiSchema` if it is defined or from the `registry`\notherwise. NOTE, since `ButtonTemplates` are not overridden in `uiSchema` only those in the `registry` are returned.\n\n#### Parameters\n\n- name: Name - The name of the template to fetch, restricted to the keys of `TemplatesType`\n- registry: Registry<T, S, F> - The `Registry` from which to read the template\n- [uiOptions=\\{}]: UIOptionsType<T, S, F> - The `UIOptionsType` from which to read an alternate template\n\n#### Returns\n\n- TemplatesType<T, S, F>[Name] - The template from either the `uiSchema` or `registry` for the `name`\n\n### getTestIds()\n\nReturns an object of test IDs that can only be used in test mode.\nIf the function is called in a test environment (`NODE_ENV === 'test'`, this is set by jest) then a Proxy object will be returned.\nIf a key within the returned object is accessed, if the value already exists the object will return that value, otherwise it will create that key\nwith a generated `uuid` value and return the generated ID.\nIf it is called outside of a test environment, the function will return an empty object, therefore returning `undefined` for any property within the object and excluding the prop from the rendered output of the component in which it is used.\nTo use this helper, you will want to generate a separate object for each component to avoid potential overlapping of ID names.\nYou will also want to export the object for use in tests, because the keys will be generated in the component file, and used in the test file.\nWithin the component file, add: `export const TEST_IDS = getTestIds();`\nThen pass `TEST_IDS.examplePropertyName` as the value of the test ID attribute of the intended component.\nThis will allow you to use `TEST_IDS.examplePropertyName` within your tests, while keeping the test IDs out of your rendered output.\n\n#### Returns\n\n- TestIdShape: An object that auto-generates test ids upon request the first time and then returns the same value on subsequent calls\n\n### getUiOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGet all passed options from ui:options, and ui:<optionName>, returning them in an object with the `ui:` stripped off.\nAny `globalOptions` will always be returned, unless they are overridden by options in the `uiSchema`.\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - The UI Schema from which to get any `ui:xxx` options\n- [globalOptions={}]: GlobalUISchemaOptions - The optional Global UI Schema from which to get any fallback `xxx` options\n\n#### Returns\n\n- UIOptionsType<T, S, F> An object containing all of the `ui:xxx` options with the `ui:` stripped off along with all `globalOptions`\n\n### getWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGiven a schema representing a field to render and either the name or actual `Widget` implementation, returns the\nReact component that is used to render the widget. If the `widget` is already a React component, then it is wrapped\nwith a `MergedWidget`. Otherwise an attempt is made to look up the widget inside of the `registeredWidgets` map based\non the schema type and `widget` name. If no widget component can be found an `Error` is thrown.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- Widget<T, S, F>: The `Widget` component to use\n\n#### Throws\n\n- An error if there is no `Widget` component that can be returned\n\n### hasByPath()\n\nDetermines whether `obj` has an **own** property at `path`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment is checked with `Object.hasOwn()`, so inherited properties report `false` — `hasByPath({}, 'toString')` is `false`. [getByPath()](#getbypath) applies the same own-property rule, so the two can be used as a guard/read pair.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments to check for\n\n#### Returns\n\n- boolean: True if the own property exists at `path`, otherwise false\n\n#### Example\n\n```typescript\nhasByPath({ a: { b: undefined } }, ['a', 'b']); // true, the key exists\nhasByPath({ a: { b: 1 } }, 'a.b'); // false, there is no key named 'a.b'\nhasByPath({}, 'toString'); // false, inherited properties are not own properties\n```\n\n### hashObject()\n\nStringifies an `object` and returns the hash of the resulting string.\nSorts object fields in consistent order before stringify to prevent different hash ids for the same object.\n\n#### Parameters\n\n- object: object - The object for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified object\n\n### hashString()\n\nHashes a string using the algorithm based on Java's hashing function.\n\n#### Parameters\n\n- string: string - The string for which to get the hash\n\n#### Returns\n\n- string: The resulting hash of the string in hex format\n\n### guessType()\n\nGiven a specific `value` attempts to guess the type of a schema element. In the case where we have to implicitly\ncreate a schema, it is useful to know what type to use based on the data we are defining.\n\n#### Parameters\n\n- value: any - The value from which to guess the type\n\n#### Returns\n\n- string: The best guess for the object type\n\n### hashForSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nStringifies the schema and returns the hash of the resulting string.\n\n#### Parameters\n\n- schema: S - The schema for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified schema\n\n### hasWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nDetects whether the `widget` exists for the `schema` with the associated `registryWidgets` and returns true if it does, or false if it doesn't.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- boolean: True if the widget exists, false otherwise\n\n### helpId()\n\nReturn a consistent `id` for the field help element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field help element from the given `id`\n\n### isConstant<S extends StrictRJSFSchema = RJSFSchema>()\n\nThis function checks if the given `schema` matches a single constant value.\nThis happens when either the schema has an `enum` array with a single value or there is a `const` defined.\n\n#### Parameters\n\n- schema: S - The schema for a field\n\n#### Returns\n\n- boolean: True if the `schema` has a single constant value, false otherwise\n\n### isCustomWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks to see if the `uiSchema` contains the `widget` field and that the widget is not `hidden`\n\n#### Parameters\n\n- uiSchema: UiSchema<T, S, F> - The UI Schema from which to detect if it is customized\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isFixedItems<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetects whether the given `schema` contains fixed items.\nThis is the case when `schema.items` is a non-empty array that only contains objects.\n\n#### Parameters\n\n- schema: S - The schema in which to check for fixed items\n\n#### Returns\n\n- boolean: True if there are fixed items in the schema, false otherwise\n\n### isFormDataAvailable<T = any>()\n\nDetermines whether the given `formData` represents valid form data, such as a primitive type, an array, or a non-empty object.\n\n#### Parameters\n\n- formData: T - The data to check\n\n#### Returns\n\n- boolean: True if `formData` is not undefined, null, a primitive type or an array or an empty object\n\n### isObject()\n\nDetermines whether a `thing` is an object for the purposes of RSJF.\nIn this case, `thing` is an object if it has the type `object` but is NOT null, an array or a File.\n\n#### Parameters\n\n- thing: any - The thing to check to see whether it is an object\n\n#### Returns\n\n- boolean: True if it is a non-null, non-array, non-File object\n\n### isPlainObject()\n\nDetermines whether `thing` is a plain object, i.e. one created by the `Object` constructor or with a `null` prototype.\nUnlike [isObject()](#isobject), class instances such as `Error` are not plain objects, which matters when recursively walking a structure whose nested values are expected to be plain data.\n\n#### Parameters\n\n- thing: unknown - The thing to check to see whether it is a plain object\n\n#### Returns\n\n- boolean: True if it is a plain object, otherwise false. When true, `thing` is narrowed to `Record`\n\n### isRootSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nHelper to check whether a JSON schema object is the root schema. The schema is a root schema with root `properties`\nkey or a root `$ref` key. If the `schemaToCompare` has a root `oneOf` property, the function will\nreturn false. Else if `schemaToCompare` and `rootSchema` are the same object or equal, the function will return\n`true`. Else if the `rootSchema` has a $ref, it will be resolved using `schemaUtils.resolveSchema` utility. If the\nresolved schema matches the `schemaToCompare` the function will return `true`. Otherwise, it will return false.\n\n#### Parameters\n\n- registry: Registry<T, S, F> - The `Registry` used to get the `rootSchema` and `schemaUtils`\n- schemaToCompare: S - The JSON schema object to check. If `schemaToCompare` is an root schema, the function will return true.\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isValueEmpty()\n\nReturns true when a form value is considered empty: `null`, `undefined`, or `''` (empty string), an empty array (`[]`), or a plain object whose every own value is itself empty (checked recursively). Scalar values such as `0` and `false` are not considered empty.\n\n#### Parameters\n\n- value: unknown - The value to check\n\n#### Returns\n\n- boolean: True if the value is considered empty, false otherwise\n\n### labelValue()\n\nHelper function that will return the value to use for a widget `label` based on `hideLabel`.\nThe `fallback` is used as the return value from the function when `hideLabel` is true.\nDue to the implementation of theme components, it may be necessary to return something other than `undefined` to cause the theme component to not render a label.\nSome themes require may `false` and others may require an empty string.\n\n#### Parameters\n\n- [label]: string | ReactElement | undefined - The label string or component to render when not hidden\n- [hideLabel]: boolean| undefined - Flag, if true, will cause the label to be hidden\n- [fallback]: undefined | false | '' - One of 3 values, `undefined` (the default), `false` or an empty string\n\n- #### Returns\n\n- string | boolean | undefined: `fallback` if `hideLabel` is true, otherwise `label`\n\n### localToUTC()\n\nConverts a local Date string into a UTC date string\n\n#### Parameters\n\n- dateString: string - The string representation of a date as accepted by the `Date()` constructor\n\n#### Returns\n\n- string | undefined: A UTC date string if `dateString` is truthy, otherwise undefined\n\n### lookupFromFormContext<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, R = unknown>()\n\nGiven a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`.\nThis might be contained within the lookup map in the formContext.\nIf no such value exists, return the `fallback` value.\n\n#### Parameters\n\n- regOrFc: Registry<T, S, F> | Registry<T, S, F>['formContext'] - The @rjsf registry or form context in which the lookup will occur\n- toLookup: string - The name of the field in the lookup map in the form context to get the value for\n- [fallback]: R - The fallback value to use if the form context does not contain a value for `toLookup`\n\n#### Returns\n\n- R: The value associated with `toLookup` in the form context or `fallback`\n\n### mergeDefaultsWithFormData<T = any>()\n\nMerges the `defaults` object of type `T` into the `formData` of type `T`\n\nWhen merging defaults and form data, we want to merge in this specific way:\n\n- objects are deeply merged\n- arrays are merged in such a way that:\n - when the array is set in form data, only array entries set in form data are deeply merged; additional entries from the defaults are ignored unless `mergeExtraArrayDefaults` is true, in which case the extras are appended onto the end of the form data\n - when the array is not set in form data, the default is copied over\n- scalars are overwritten/set by form data\n\n#### Parameters\n\n- [defaults]: T | undefined - The defaults to merge\n- [formData]: T | undefined - The form data into which the defaults will be merged\n- [mergeExtraArrayDefaults=false]: boolean - If true, any additional default array entries are appended onto the formData\n- [defaultSupercedesUndefined=false]: boolean - If true, an explicit undefined value will be overwritten by the default value\n\n#### Returns\n\n- T | undefined: The resulting merged form data with defaults\n\n### mergeObjects()\n\nRecursively merge deeply nested objects.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n- [concatArrays=false]: boolean | \"preventDuplicates\" - Optional flag that, when true, will cause arrays to be concatenated. Use \"preventDuplicates\" to merge arrays in a manner that prevents any duplicate entries from being merged.\n\n#### Returns\n\n@returns - A new object that is the merge of the two given objects\n\n### mergeSchemas()\n\nRecursively merge deeply nested schemas.\nThe difference between mergeSchemas and mergeObjects is that mergeSchemas only concats arrays for values under the 'required' keyword, and when it does, it doesn't include duplicate values. NOTE: Uses shallow comparison for the duplicate checking.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n\n#### Returns\n\n- GenericObjectType: The merged schema object\n\n### optionalControlsId()\n\nReturn a consistent `id` for the optional data controls `element`\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- element: 'Add' | 'Msg' | 'Remove' - The element type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the optional data controls element from the given `id` and `element` type\n\n### optionId()\n\nReturn a consistent `id` for the `optionIndex`s of a `Radio` or `Checkboxes` widget\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- optionIndex: number - The index of the option for which the id is desired\n\n#### Returns\n\n- string: An id for the option index based on the parent `id`\n\n### noop()\n\nA function that does nothing and returns `undefined`, useful as a placeholder for an optional callback or as the implementation of a mocked function.\n\n#### Returns\n\n- void\n\n### optionsList<T = any, S extends StrictRJSFSchema = RJSFSchema,F extends FormContextType = any>()\n\nGets the list of options from the `schema`. If the schema has an enum list, then those enum values are returned.\nThe labels for the options will be extracted from `ui:enumNames` in the `uiSchema` if provided, otherwise the label will be the same as the `value`. If `ui:enumOrder` is provided, the options will be reordered accordingly.\n\nIf the schema has a `oneOf` or `anyOf`, then the value is the list of either:\n\n-\n- The `const` values from the schema if present\n- If the schema has a discriminator and the label using either the `schema.title` or the value. If a `uiSchema` is\n provided, and it has the `ui:enumNames` matched with `enum` or it has an associated `oneOf` or `anyOf` with a list of\n objects containing `ui:title` then the UI schema values will replace the values from the schema.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the options list\n- [uiSchema]: UiSchema<T, S, F> - The optional uiSchema from which to get alternate labels for the options\n\n#### Returns\n\n- \\{ schema?: S, label: string, value: any }: The list of options from the schema\n\n### orderProperties()\n\nGiven a list of `properties` and an `order` list, returns a list that contains the `properties` ordered correctly.\nIf `order` is not an array, then the untouched `properties` list is returned.\nOtherwise `properties` is ordered per the `order` list.\nIf `order` contains a '_' then any `properties` that are not mentioned explicity in `order` will be places in the location of the `_`.\n\n#### Parameters\n\n- properties: string[] - The list of property keys to be ordered\n- order: string[] - An array of property keys to be ordered first, with an optional '\\*' property\n\n#### Returns\n\n- string[]: A list with the `properties` ordered\n\n#### Throws\n\n- Error when the properties cannot be ordered correctly\n\n### pad()\n\nReturns a string representation of the `num` that is padded with leading \"0\"s if necessary\n\n#### Parameters\n\n- num: number - The number to pad\n- width: number - The width of the string at which no lead padding is necessary\n\n#### Returns\n\n- string: The number converted to a string with leading zero padding if the number of digits is less than `width`\n\n### parseDateString()\n\nParses the `dateString` into a `DateObject`, including the time information when `includeTime` is true\n\n#### Parameters\n\n- dateString: string - The date string to parse into a DateObject\n- [includeTime=true]: boolean - Optional flag, if false, will not include the time data into the object\n\n#### Returns\n\n- DateObject: The date string converted to a `DateObject`\n\n#### Throws\n\n- Error when the date cannot be parsed from the string\n\n### rangeSpec<S extends StrictRJSFSchema = RJSFSchema>()\n\nExtracts the range spec information `{ step?: number, min?: number, max?: number }` that can be spread onto an HTML input from the range analog in the schema `{ multipleOf?: number, minimum?: number, maximum?: number }`.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the range spec\n\n#### Returns\n\n- RangeSpecType: A range specification from the schema\n\n### replaceStringParameters()\n\nPotentially substitutes all replaceable parameters with the associated value(s) from the `params` if available.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `inputString` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\n- inputString: string - The string which will be potentially updated with replacement parameters\n- [params]: string[] - The optional list of replaceable parameter values to substitute into the english string\n\n#### Returns\n\n- string: The updated string with any replacement specifiers replaced\n\n### resolveDefaultWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nComputes the widget name a field falls back to when no `ui:widget` is specified, along with the `enumOptions` (if any) that back a `select`-like fallback.\nThe default is `select` when `schema` has enumerable options, the schema's `format` when a widget is registered for it, or `text` otherwise.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- uiSchema: UiSchema<T, S, F> | undefined - The uiSchema for the field\n- schemaUtils: SchemaUtilsType<T, S, F> - The `SchemaUtilsType` used to detect whether `schema` has enumerable options\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- \\{ defaultWidget: string, enumOptions: EnumOptionsType<S>[] | undefined }: The default widget name and the `enumOptions`, if any, computed along the way\n\n### resolveUiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nResolves the uiSchema for a given schema, considering `ui:definitions` stored in the registry.\nCalled at runtime for each field. When the schema contains a `$ref`, looks up the corresponding uiSchema definition from `registry.uiSchemaDefinitions` and merges it with local overrides.\nFor schemas with `oneOf`/`anyOf` branches, also populates `uiSchema[keyword][i]` for branches whose `$ref` matches a definition, so `MultiSchemaField` can read dropdown option titles.\n\nResolution order (later sources override earlier):\n\n1. `ui:definitions[$ref]` - base definition from registry\n2. `localUiSchema` - local overrides at current path\n\n#### Parameters\n\n- schema: S - The JSON schema (may contain `$ref` or `RJSF_REF_KEY`)\n- localUiSchema: UiSchema<T, S, F> | undefined - The uiSchema at the current path (local overrides)\n- registry: Registry<T, S, F> - The registry containing `uiSchemaDefinitions`\n\n#### Returns\n\n- UiSchema<T, S, F>: The resolved uiSchema with definitions merged in\n\n### schemaHasNestedConditional<S extends StrictRJSFSchema = RJSFSchema>()\n\nRecursively checks whether the given raw `schema` contains a `dependencies` or `if` keyword anywhere below its top level, e.g. inside a nested object's `properties`, a `$ref`, an array's tuple `items`, or a `patternProperties` entry.\n`retrieveSchema()` only resolves the `dependencies`/`if` declared directly on the schema it is given, so a root-level retrieved schema never reflects a conditional branch switch that happens deeper in the tree.\n`Form` uses this to detect when a comparison of root-level retrieved schemas can't be trusted to decide whether sanitization is needed.\n\n#### Parameters\n\n- schema: S | boolean | undefined - The raw schema node to search\n- rootSchema: S - The root schema, used to resolve any `$ref`s encountered while searching\n- atRoot: boolean = true - Whether `schema` is the root of the search, whose own `dependencies`/`if` don't count\n- seenRefs: string[] = [] - The `$ref`s already resolved along this branch of the search, to guard against cycles\n\n#### Returns\n\n- boolean: True if a `dependencies` or `if` keyword exists below the root of the schema\n\n### schemaRequiresTrueValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nCheck to see if a `schema` specifies that a value must be true. This h\n\n","isInternal":false,"tokens":11872,"sizeBytes":50038},{"name":"validator-ajv8.md","path":"packages/docs/docs/api-reference/validator-ajv8.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/validator-ajv8.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# @rjsf/validator-ajv8 APIs\n\nIn RJSF version 6, the original, embedded AJV 6 validator implementation from earlier versions was removed in favor of the `@rjsf/validator-ajv8` package.\n`@rjsf/validator-ajv8` uses the AJV 8 package, including adding support for using precompiled validators.\nBelow are the exported API functions that are provided by this package.\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Types\n\nThere are a few Typescript types that are exported by `@rjsf/validator-ajv8` in support of the APIs.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ajv8/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional meta schemas the validator can access\n - `customFormats`: Additional custom format validators\n - `ajvOptionsOverrides`: Config overrides passed to the AJV constructor\n - `ajvFormatOptions`: Options for `ajv-formats`; pass `false` to disable format support entirely\n - `AjvClass`: The AJV class to construct (e.g. `Ajv2019`, `Ajv2020`)\n - `extenderFn`: A function called to extend the AJV instance (e.g. `ajvErrors()`)\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n\n#### Returns\n\n- AJV8Validator<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nThe function used to compile a schema into an output file in the form that allows it to be used as a precompiled validator.\nThe main reasons for using a precompiled validator is reducing code size, improving validation speed and, most importantly, avoiding dynamic code compilation when prohibited by a browser's Content Security Policy.\nFor more information about AJV code compilation see: https://ajv.js.org/standalone.html\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validators functions\n- output: string - The name of the file into which the precompiled validator functions will be generated\n- [options={}]: CustomValidatorOptionsType - The set of `CustomValidatorOptionsType` information used to alter the AJV validator used for compiling the schema. They are the same options that are passed to the `customizeValidator()` function in order to modify the behavior of the regular AJV-based validator.\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n","isInternal":false,"tokens":1050,"sizeBytes":4608},{"name":"validator-ata.md","path":"packages/docs/docs/api-reference/validator-ata.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/validator-ata.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# @rjsf/validator-ata APIs\n\n`@rjsf/validator-ata` is an alternative to `@rjsf/validator-ajv8`, backed by [`ata-validator`](https://www.npmjs.com/package/ata-validator) instead of AJV.\nThe public surface mirrors the AJV package, so swapping the import is enough for the form to keep working: `customizeValidator()`, `ValidatorType`, custom formats, `transformErrors`, `customValidate`, and `suppressDuplicateFiltering` all behave the same.\n\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options (`AjvClass`, `ajvFormatOptions`, `ajvOptionsOverrides`) are not accepted. The closest equivalent is `ataOptionsOverrides`, which is spread on top of the default `ata-validator` options.\n- The `ata-validator` format set is always installed, so there is no opt-in flag for formats.\n- `ata-validator`'s error params are frozen, so the pre-quote pass that `validator-ajv8` runs for `ajv-i18n` is unnecessary. Localizers that mutate `message` in place still work as-is.\n- Precompiled validators (`compileSchemaValidators` / `createPrecompiledValidator`) are supported. `ata-validator`'s `bundleStandalone` output is adapted into the validator function map the precompiled consumer expects. Error output matches the non-precompiled validator, including per-field errors for schema-valued `additionalProperties` (with `ata-validator` `>= 0.17.4`); an invalid `anyOf` reports a single error on the field, the same as the runtime path. One constraint carries over from the standalone (AOT) path: custom formats must be a RegExp or pre-anchored string pattern, since a function checker cannot be serialized into the bundle and is rejected at compile time.\n\n## Types\n\nThere are a few TypeScript types that are exported by `@rjsf/validator-ata` in support of the APIs. These types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ata/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional schemas registered for cross-schema `$ref` resolution\n - `customFormats`: Custom format checkers; values can be functions, RegExps, or pre-anchored regex source strings\n - `ataOptionsOverrides`: Overrides spread on top of the default `ata-validator` options (e.g. `coerceTypes`, `removeAdditional`, `verbose`, `abortEarly`)\n - `extenderFn`: A function called against the constructed `Validator` instance for additional setup; returning a different instance is supported\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of `ata-validator` `ValidationError`s after running the form validation\n\n#### Returns\n\n- ValidatorType<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nCompiles a schema into an output file that can be loaded later as a precompiled validator.\nThe main reasons for using a precompiled validator are reducing code size, improving startup time by skipping schema compilation, and avoiding dynamic code generation when a browser's Content Security Policy forbids it.\nUnder the hood this calls `ata-validator`'s `bundleStandalone` and wraps the result in the map the precompiled consumer expects.\n\n> NOTE: Custom formats passed through `options.customFormats` must be a RegExp or a pre-anchored string pattern. A function checker cannot be serialized into the standalone bundle and is rejected at compile time.\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validator functions\n- output: string - The name of the file into which the precompiled validator functions are generated\n- [options={}]: CustomValidatorOptionsType - The `CustomValidatorOptionsType` options accepted by `customizeValidator()`, with limits: `extenderFn`, extra schemas without an `$id` and the `ataOptionsOverrides` keys `coerceTypes`, `removeAdditional` and `keywords` cannot be carried into the generated file and are ignored with a warning, the generated file never fills in `default` values, and `suppressDuplicateFiltering` belongs to `createPrecompiledValidator()`. See the precompiled section of `usage/validation.md`\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize the list of `ata-validator` `ValidationError`s after running the form validation\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for the full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n","isInternal":false,"tokens":1436,"sizeBytes":6427},{"name":"validator-cfworker.md","path":"packages/docs/docs/api-reference/validator-cfworker.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/api-reference/validator-cfworker.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# @rjsf/validator-cfworker APIs\n\n`@rjsf/validator-cfworker` is an additional, eval-free validator option for CSP-constrained applications. It is backed by [`@cfworker/json-schema`](https://github.com/cfworker/cfworker/tree/main/packages/json-schema), interprets schemas without `eval` or `new Function`, and defaults to JSON Schema draft 2020-12.\n\nIt is not an AJV replacement. See the package [README](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/validator-cfworker) for the unsupported-keyword matrix and current upstream-state notes.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options and extensions such as `AjvClass`, `$data`, `discriminator`, and `ajv-errors`'s `errorMessage` are not supported.\n- `$dynamicRef` and `$dynamicAnchor` are not currently supported by the underlying engine.\n- Error messages differ from AJV, and there is no `ajv-i18n` localizer equivalent. Use `transformErrors` to customize messages.\n- Precompiled-validator mode is not part of this initial package.\n- The wrapper normalizes `undefined` form-data values before validation and caches validators by schema id to make repeated RJSF `isValid()` calls safe.\n\n## Types\n\nThe package exports `CustomValidatorOptionsType`, `CFWorkerValidationError`, `CFWorkerFormatChecker`, and `SuppressDuplicateFilteringType` from [`src/types.ts`](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-cfworker/src/types.ts).\n\n## APIs\n\n### `customizeValidator()`\n\nCreates a `ValidatorType` backed by `@cfworker/json-schema`.\n\n#### Parameters\n\n- `options.additionalMetaSchemas`: additional schemas registered for cross-schema `$ref` resolution\n- `options.customFormats`: format checkers expressed as functions, regular expressions, or regular-expression source strings\n- `options.draft`: `'4'`, `'7'`, `'2019-09'`, or `'2020-12'`; defaults to `'2020-12'`\n- `options.extenderFn`: hook called with every newly constructed engine validator\n- `options.shortCircuit`: stop at the first error; defaults to `false`\n- `options.suppressDuplicateFiltering`: `'none'`, `'anyOf'`, `'oneOf'`, or `'all'`\n\n#### Returns\n\n- `ValidatorType`: the customized validator implementation\n\n```ts\nimport { customizeValidator } from '@rjsf/validator-cfworker';\n\nconst validator = customizeValidator({\n draft: '2020-12',\n customFormats: { slug: /^[a-z0-9-]+$/ },\n});\n```\n","isInternal":false,"tokens":612,"sizeBytes":2474},{"name":"contributing.md","path":"packages/docs/docs/contributing.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/contributing.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Contributing\n\n## Development server\n\nWe are using `Vite` to power our `playground`, which caches all the built `@rjsf/*` distributions.\nIn order to test the `playground` locally after a new clone or fresh pull from `main`, run the following from the root directory of the monorepo:\n\n```bash\npnpm install\npnpm run build\ncd packages/playground\npnpm start\n```\n\nThis will start the live development server showcasing components at [localhost:8080](http://localhost:8080).\n\nWhenever you make changes to source code, stop the running playground and return to the root directory and rerun `pnpm run build`.\nThanks to `nx` caching, this should only rebuild what is necessary.\nAfter the build is complete, return to the root of the `playground` and restart the server via `pnpm start`.\n\n### First time step\n\nIf this is the first time you have cloned the repo, run the `pnpm run prepare` script that will set up `husky` to provide a git precommit hook that will format and lint any code you have added to a PR.\n\n### Optional development process\n\nWith the large number of packages, sometimes running `pnpm run build` or `pnpm start` from the root directory will overwhelm an underpowered computer.\nIf that is the situation for you, you can instead use `pnpm run build-serial` to build the packages one at a time instead of all at once.\nAlso, if you are only working on one package, you can `pnpm run build` and `pnpm run test` from within the subdirectory.\nFinally, you can simply `pnpm start` inside of the `playground` directory to test changes if you have already built all of your packages, without needing to watch all of the packages via the root directory `pnpm start`.\n\n### Troubleshooting build failures\n\nSometimes your local builds fail and you can't figure out why. This is most likely to happen after rebase to `main` due\nto `package.json` changes upstream. There are two commands you can use to (hopefully) get your environment back to a\nworking state. Try running the following two commands:\n\n```bash\npnpm run refresh-node-modules\npnpm run clean-build\n```\n\nThe first command will delete all of the `node_modules` directories in the environment and then rerun `pnpm install`.\nThe second command cleans up the typescript build cache files before retrying the build.\n\nWorst case scenario when neither of those commands work, try running `pnpm run nuke-build-env` and then rerun the two commands.\n\n## Cloud builds\n\nWhen building in environments with limited memory, such as Netlify, it's recommended to use `pnpm run build-serial` that builds the packages serially.\n\n## Coding style\n\nAll the JavaScript/Typescript code in this project conforms to the [prettier](https://github.com/prettier/prettier) coding style.\nCode is automatically prettified upon commit using precommit hooks, assuming you followed the `First time step` above.\n\nYou can also run `pnpm cs-format` within any package directory you are changing.\n\n## Documentation\n\nWe use [Docusaurus](https://docusaurus.io/) to build our documentation. To run documentation locally, run:\n\n```bash\ncd packages/docs\npnpm start\n```\n\nDocumentation will be served on [localhost:3000](http://localhost:3000).\n\n## Tests\n\nYou can run all tests from the root directory OR from `packages` subdirectory using the following command:\n\n```bash\npnpm run test\n```\n\n### Snapshot testing\n\nAll the themes, including `core` use snapshot testing (NOTE: `core` also has extensive non-snapshot tests).\nThe source-code of these snapshot tests reside in the `core` package in the `testSnap` directory and are shared with all the themes.\nIn order to support the various themes, the code for the tests are actually functions that take two parameters:\n\n- `Form`: ComponentType<FormProps> - The component from the theme implementation\n- `[customOptions]`: \\{ [key: string]: TestRendererOptions } - an optional map of `react-test-renderer` `TestRendererOptions` implementations that some themes need to be able properly run\n\nThere are functions in the `testSnap` directory: `arrayTests`, `formTests` and `objectTests`, each with its own definition of `customOptions`\n\nEach theme will basically run these functions by creating a `Xxx.test.tsx` file (where `Xxx` is `Array`, `Form` or `Object`) that looks like the following:\n\n```tsx\nimport { arrayTests } from '@rjsf/snapshot-tests'; // OR\n// import { formTests } from '@rjsf/snapshot-tests';\n// import { objectTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\narrayTests(Form); // OR\n// formTests(Form);\n// objectTests(Form);\n```\n\nAnytime you add a new feature, be sure to update the appropriate `xxxTests()` function in the `testSnap` directory and do `pnpm run test` from the root directory to update all the snapshots.\nIf you add a theme-only feature, it is ok to update the appropriate `Xxx.test.tsx` file to add (or update) the theme-specific `describe()` block.\nFor example:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { arrayTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\nformTests(Form);\n\ndescribe('Theme specific tests', () => {\n it('test a theme-specific option', () => {\n const schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n };\n const uiSchema: UiSchema = {\n // Enable the theme specific feature\n };\n const tree = renderer.create().toJSON();\n expect(tree).toMatchSnapshot();\n });\n});\n```\n\nSee the `antd` `Form.test.tsx` for a specific example of this.\n\n### Code coverage\n\nCode coverage reports are currently available only for the `@rjsf/core` theme package.\nThey are generated using [nyc](https://github.com/istanbuljs/nyc) each time the `pnpm test-coverage` script is run.\nThe full report can be seen by opening `./coverage/lcov-report/index.html`.\n\n#### Utils and validator-ajv8 code coverage\n\n100% code coverage is required by the `@rjsf/utils` and `@rjsf/validator-ajv8` tests.\nIf you make changes to those libraries, you will have to maintain that coverage, otherwise the tests will fail.\n\n> NOTE: All three of these directories share the same tests for verifying `validator` based APIs. See the documentation in the `getTestValidator()` functions for more information.\n\n## Releasing\n\nTo release, go to the main branch (NOT a fork) and then create a new branch with the version number (with an `rc` prefix instead of `v`).\nFor instance if you are about to create the new `6.100.10` branch, then you would run the following commands:\n\n```bash\ngit checkout -b rc6.100.10\npnpm exec nx release version --git-tag\ngit commit -m \"Releasing 6.100.10\"\ngit push\npnpm run update-version-tags\n```\n\nMake sure you use [semver](https://semver.org/) for version numbering when selecting the version.\nThe `pnpm exec nx release version --git-tag` command will update the `package*.json` files and create a new version tag.\nCommitting and pushing the branch will allow you to create the PR on GitHub.\nThe `pnpm run update-version-tags` will push the tags up to GitHub.\n\nThen, make a PR to main. Merge the PR into main -- make sure you use \"merge commit\", not squash and merge, so that\nthe original commit where the tag was based on is still present in the main branch.\n\nThen, create a release in the GitHub \"Releases\" tab, select the new tag that you have added,\nand add a description of the changes in the new release. You can copy\nthe latest changelog entry in `CHANGELOG.md` to make the release notes, and update as necessary.\n\nThis will trigger a GitHub Actions pipeline that will build and publish all packages to npm.\n\nThe package is published through an automation token belonging to the\n[rjsf-bot](https://www.npmjs.com/~rjsf-bot) user on npm. This token\nis stored as the `NPM_TOKEN` secret on GitHub Actions.\n\n### Releasing docs\n\nDocs are automatically published to GitHub Pages when the `main` branch is updated.\n\nWe are currently in the process of automatically configuring versionable documentation on our new docs site.\n\n### Releasing the playground\n\nThe playground automatically gets deployed from GitHub Pages.\n\nIf you need to manually publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/), though, run:\n\n```bash\ncd packages/playground\npnpm run publish-to-gh-pages\n```\n\n### Releasing a new package\n\nPublishing a new `@rjsf/*` package requires additional setup. The package must first be published locally, then in the NPM web app, you must set up \"Trusted Publishing\" so future releases can be published via GitHub Actions. The steps to accomplish this are:\n\n1. Create the new release as described above. Existing packages will be published, but the jobs to publish new package(s) will fail.\n2. Locally, check out the release tag (e.g. `git checkout v6.8.0`). You may need to `git fetch --tags`. Make sure your `git status` is clean.\n3. `cd packages/new-package`\n4. `pnpm login` (login to an account with RJSF publishing privileges)\n5. `pnpm publish --no-git-checks`.\n\nThe new package will be released. Then, set up Trusted Publishing:\n\n1. Navigate to the new package in NPM (e.g. `https://www.npmjs.com/package/@rjsf/new-package`)\n2. Go to Settings -> Trusted Publisher -> GitHub Actions\n3. Set up the fields to match an existing package (e.g. look at `@rjsf/core`).\n 1. Organization or user: `rjsf-team`\n 2. Repository: `react-jsonschema-form`\n 3. Workflow filename: `release.yml`\n 4. Allow `npm publish`\n","isInternal":false,"tokens":2279,"sizeBytes":9519},{"name":"arrays.md","path":"packages/docs/docs/json-schema/arrays.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/json-schema/arrays.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"# Arrays\n\nArrays are defined with a type equal to `array`, and array items' schemas are specified in the `items` keyword.\n\n## Arrays of a single field\n\nArrays of a single field type can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Arrays of objects\n\nArrays of objects can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema = {\n items: {\n 'ui:widget': 'textarea',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n> NOTE: The `items` property in `uiSchema` can also accept a function for dynamic UI schema generation based on array item data. See [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) for advanced use cases.\n\n## The `additionalItems` keyword\n\nThe `additionalItems` keyword allows the user to add additional items of a given schema. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n additionalItems: {\n type: 'boolean',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Array item uiSchema options\n\nAny of these options can be set globally if they are contained within the `ui:globalOptions` block.\nThey can also be overridden on a per-field basis inside a `ui:options` block as shown below.\n\n### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n orderable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n addable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `copyable` option\n\nA copy button is **NOT** shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance.\nYou can turn this **ON** with the `copyable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n copyable: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n removable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Multiple-choice list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. There are two alternative widgets for picking multiple elements from a list of choices. Typically, this applies when a schema has an `enum` list for the `items` property of an `array` field, and the `uniqueItems` property set to `true`.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Custom widgets\n\nIn addition to [ArrayFieldTemplate](../advanced-customization/custom-templates.md#arrayfieldtemplate) you use your own widget by providing it to the uiSchema with the property of `ui:widget`.\n\nExample:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSelectComponent = (props) => {\n return (\n \n );\n};\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'CustomSelect',\n};\n\nconst widgets = {\n CustomSelect: CustomSelectComponent,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## Specifying the minimum or maximum number of items\n\nNote that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also specify the maximum number of items in an array using the `maxItems` property.\n\n## Inline checkboxes\n\nBy default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n 'ui:options': {\n inline: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n","isInternal":false,"tokens":2230,"sizeBytes":8391},{"name":"definitions.md","path":"packages/docs/docs/json-schema/definitions.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/json-schema/definitions.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"# Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which allows you to re-use parts of your schema:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n state: { type: 'string' },\n },\n required: ['street_address', 'city', 'state'],\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nNote that this library only supports local definition referencing. The value in the `$ref` keyword should be a [JSON Pointer](https://tools.ietf.org/html/rfc6901) in URI fragment identifier format.\n\n## uiSchema for Schema Definitions\n\nTo customize the UI for schemas referenced via `$ref`, use the `ui:definitions` property in your uiSchema. This works for both reused and recursive schemas.\n\nSee [ui:definitions](../api-reference/uiSchema.md#uidefinitions) for full details and more examples.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' },\n },\n },\n },\n },\n type: 'object',\n properties: {\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Node name' },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n","isInternal":false,"tokens":517,"sizeBytes":2060},{"name":"dependencies.md","path":"packages/docs/docs/json-schema/dependencies.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/json-schema/dependencies.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"# Dependencies\n\nreact-jsonschema-form supports the `dependencies` keyword from an earlier draft of JSON Schema (note that this is not part of the latest JSON Schema spec, though). Dependencies can be used to create dynamic schemas that change fields based on what data is entered.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined, making them both required if either is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n billing_address: ['credit_card'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))_\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: {\n properties: {\n billing_address: { type: 'string' },\n },\n required: ['billing_address'],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))_\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Person',\n type: 'object',\n properties: {\n 'Do you have any pets?': {\n type: 'string',\n enum: ['No', 'Yes: One', 'Yes: More than one'],\n default: 'No',\n },\n },\n required: ['Do you have any pets?'],\n dependencies: {\n 'Do you have any pets?': {\n oneOf: [\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['No'],\n },\n },\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: One'],\n },\n 'How old is your pet?': {\n type: 'number',\n },\n },\n required: ['How old is your pet?'],\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: More than one'],\n },\n 'Do you want to get rid of any?': {\n type: 'boolean',\n },\n },\n required: ['Do you want to get rid of any?'],\n },\n ],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.\n","isInternal":false,"tokens":1112,"sizeBytes":4820},{"name":"objects.md","path":"packages/docs/docs/json-schema/objects.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/json-schema/objects.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"# Objects\n\n## Object properties\n\nObjects are defined with a type equal to `object` and properties specified in the `properties` keyword.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Required properties\n\nYou can specify which properties are required using the `required` attribute:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n required: ['name'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Specifying property order\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'string' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', 'foo'],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', '*'],\n};\n```\n\n## Additional and pattern properties\n\nThe `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n additionalProperties: {\n type: 'number',\n enum: [1, 2, 3],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this way, an add button for new properties is shown by default.\n\nYou can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.\n\nThe `patternProperties` keyword allows the user to add properties with names that match one or more of the specified regular expressions\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n patternProperties: {\n '^foo+$': {\n type: 'number',\n enum: [1, 2, 3],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nAlso in this case, an add button for new properties is shown by default.\n\n### `expandable` option\n\nYou can turn support for `additionalProperties` and `patternProperties` off with the `expandable` option in `uiSchema`:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n expandable: false,\n },\n};\n```\n","isInternal":false,"tokens":999,"sizeBytes":3855},{"name":"oneof.md","path":"packages/docs/docs/json-schema/oneof.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/json-schema/oneof.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"# oneOf, anyOf, and allOf\n\nreact-jsonschema-form supports custom widgets for oneOf, anyOf, and allOf.\n\n- A schema with `oneOf` is valid if _exactly one_ of the subschemas is valid.\n- A schema with `anyOf` is valid if _at least one_ of the subschemas is valid.\n- A schema with `allOf` is valid if _all_ of the subschemas are valid.\n\n## oneOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n ipsum: {\n type: 'string',\n },\n },\n required: ['ipsum'],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## anyOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n lorem: {\n type: 'string',\n },\n ipsum: {\n type: 'string',\n },\n },\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## allOf\n\nWhen `allOf` is specified in a schema, react-jsonschema-form uses the [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) library to merge the specified subschemas to create a combined subschema that is valid. For example, the below schema evaluates to a combined subschema of `{type: \"boolean\"}`:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Field',\n allOf: [\n {\n type: ['string', 'boolean'],\n },\n {\n type: 'boolean',\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n","isInternal":false,"tokens":547,"sizeBytes":2047},{"name":"single.md","path":"packages/docs/docs/json-schema/single.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/json-schema/single.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"# Single fields\n\nThe simplest example of a JSON Schema contains only a single field. The field type is determined by the `type` parameter.\n\n## Field types\n\nThe base field types in JSON Schema include:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `null`\n\nHere is an example of a string field:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Titles and descriptions\n\nFields can have titles and descriptions specified by the `title` keyword in the schema and the `description` keyword in the schema, respectively. These two can also be overridden by the `ui:title` and `ui:description` keywords in the uiSchema.\n\nDescription can render markdown. This feature is disabled by default. It needs to be enabled by the `ui:enableMarkdownInDescription` keyword and setting to `true`. Read more about markdown options in the `markdown-to-jsx` official [docs](https://markdown-to-jsx.quantizor.dev/).\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My form',\n description: 'My description',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Deprecated fields\n\nThe JSON Schema `deprecated` keyword can be used to indicate that a field is no longer supported.\n\nThe `deprecated` keyword is a JSON Schema Draft 2019-09 feature. You may need to configure your schema validator to properly recognize it. See the [Validation](../usage/validation.md#ajvclass) documentation for more details.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n deprecated: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, RJSF will append ` (deprecated)` to the field label. You can customize this behavior using the `deprecatedHandling` option in the uiSchema. See [deprecatedHandling](../api-reference/uiSchema.md#deprecatedhandling) for more details.\n\n## Enumerated values\n\nAll base schema types support the `enum` attribute, which restricts the user to select among a list of options. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom labels for `enum` fields\n\nJSON Schema supports the following approaches to enumerations using `oneOf`/`anyOf`; react-jsonschema-form supports it as well.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n anyOf: [\n {\n type: 'number',\n title: 'one',\n enum: [1],\n },\n {\n type: 'number',\n title: 'two',\n enum: [2],\n },\n {\n type: 'number',\n title: 'three',\n enum: [3],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n oneOf: [\n { const: 1, title: 'one' },\n { const: 2, title: 'two' },\n { const: 3, title: 'three' },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you use `enum` in your JSON Schema, you may instead specify `ui:enumNames` in your `uiSchema`, which RJSF can use to label an enumeration. `ui:enumNames` can be an array (matched by index) or a map (matched by value):\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Ordering `enum` fields\n\nTo control the display order of enum options, use `ui:enumOrder`. Use `'*'` to represent all remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Disabled attribute for `enum` fields\n\nTo disable an option, use the `ui:enumDisabled` property in the uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n enum: [true, false],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': [true],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Nullable types\n\nJSON Schema supports specifying multiple types in an array; however, react-jsonschema-form only supports a restricted subset of this -- nullable types, in which an element is either a given type or equal to null.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: ['string', 'null'],\n};\n\nrender(, document.getElementById('app'));\n```\n","isInternal":false,"tokens":1554,"sizeBytes":5912},{"name":"v2.x upgrade guide.md","path":"packages/docs/docs/migration-guides/v2.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/migration-guides/v2.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"# 2.x Upgrade Guide\n\n## Changes from v1 -> v2\n\n### Breaking changes\n\n- We now officially support the @rjsf/material-ui theme. We use a monorepo with Lerna and have published two packages (@rjsf/core and @rjsf/material-ui) with this version number. Note that react-jsonschema-form has been renamed to @rjsf/core ([#1642](https://github.com/rjsf-team/react-jsonschema-form/pull/1642))\n- Combine all themes into a single playground ([#1539](https://github.com/rjsf-team/react-jsonschema-form/pull/1539), [#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607), [#1623](https://github.com/rjsf-team/react-jsonschema-form/pull/1623))\n- Remove ui:order console warning about extraneous properties ([#1508](https://github.com/rjsf-team/react-jsonschema-form/pull/1508))\n- Capitalized Yes and No defaults ([#1395](https://github.com/rjsf-team/react-jsonschema-form/pull/1395))\n- Fix id of oneof and anyof select ([#1212](https://github.com/rjsf-team/react-jsonschema-form/pull/1212)). The oneof select id is now suffixed by \\_\\_oneof_select and the anyof select by \\_\\_anyof_select.\n- React 16+ is now a peer dependency ([#1408](https://github.com/rjsf-team/react-jsonschema-form/pull/1408))\n- We no longer actively support Node version < 8 ([#1462](https://github.com/rjsf-team/react-jsonschema-form/pull/1462))\n- Removed setState, setImmediate, safeRenderCompletion helpers/hacks ([#1454](https://github.com/rjsf-team/react-jsonschema-form/pull/1454), [#1720](https://github.com/rjsf-team/react-jsonschema-form/pull/1720))\n- Inject defaults in arrays ([#1499](https://github.com/rjsf-team/react-jsonschema-form/pull/1499))\n\n### Features\n\n- Add material-ui theme in the main repo ([#1420](https://github.com/rjsf-team/react-jsonschema-form/pull/1420)) (note: has not been fully integrated yet -- this will be fully integrated when we publish multiple packages with lerna - [#1501](https://github.com/rjsf-team/react-jsonschema-form/pull/1501))\n- Add extraErrors prop for async validation ([#1444](https://github.com/rjsf-team/react-jsonschema-form/pull/1444))\n- Add support for overriding UnsupportedField ([#1660](https://github.com/rjsf-team/react-jsonschema-form/pull/1660))\n\n### Fixes\n\n- Fix issue with false as formData on radio components ([#1438](https://github.com/rjsf-team/react-jsonschema-form/pull/1438))\n- Security patches ([#1458](https://github.com/rjsf-team/react-jsonschema-form/pull/1458), [#1459](https://github.com/rjsf-team/react-jsonschema-form/pull/1459))\n- Memo components in custom widgets and fields. ([#1447](https://github.com/rjsf-team/react-jsonschema-form/pull/1447))\n- Introduce Form autoComplete attribute and deprecate autocomplete ([#1483](https://github.com/rjsf-team/react-jsonschema-form/pull/1483))\n- Rewrite mergeSchemas to fix schema dependencies merging ([#1476](https://github.com/rjsf-team/react-jsonschema-form/pull/1476))\n- Update arrays correctly when changing index ([#1485](https://github.com/rjsf-team/react-jsonschema-form/pull/1485))\n- Update anyOf schema to correctly update items in an array ([#1491](https://github.com/rjsf-team/react-jsonschema-form/pull/1491))\n- Update schema to re-render when idschema changes ([#1493](https://github.com/rjsf-team/react-jsonschema-form/pull/1493))\n- Make sure BooleanField supports an overridable DescriptionField ([#1594](https://github.com/rjsf-team/react-jsonschema-form/pull/1594))\n- Export typings ([#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607))\n","isInternal":false,"tokens":942,"sizeBytes":3475},{"name":"v3.x upgrade guide.md","path":"packages/docs/docs/migration-guides/v3.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/migration-guides/v3.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"# 3.x Upgrade Guide\n\n## Breaking changes\n\n### Node support\n\nDropped support for Node 8, 9, 10. Minimum supported version of Node.js is now 12.\n\n### Dereferenced schemas for `anyOf`/`allOf` options\n\n`MultiSchemaField`'s `options` interface is different. Before, an option could include a `$ref`. Now, any option with a reference will be resolved/dereferenced when given as props for `MultiSchemaField`.\n\n### Help field IDs\n\nIDs for [Help fields](../api-reference/uiSchema.md#help) are now suffixed by `__help` so that the IDs are unique. Previously, their IDs would be nonexistent or the same as the fields that they were describing.\n\n### Bring your own polyfills\n\ncore-js@2 has been removed from @rjsf/core. See more about [the rationale here](https://github.com/rjsf-team/react-jsonschema-form/pull/2211#issue-563700810).\n\nIf you're using a framework like [Create React App](https://create-react-app.dev/docs/supported-browsers-features#supported-browsers), [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/browser-support/), [Next.js](https://nextjs.org/docs/basic-features/supported-browsers-features), or transpiling code through something like `@babel/preset-env`, polyfills are already included there and you won't have to do anything.\n\nIf you were directly depending on @rjsf/core's @babel/runtime pulling in core-js@2, just `npm install core-js` and using a side effectful import at the top of your entry point (`import 'core-js'`) might be enough.\n\nFor a slightly more elaborate setup, [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#how-does-it-work) is probably a good second choice.\n\nFrom `@babel/preset-env`'s docs\n\n> We leverage [`browserslist`, `compat-table`, and `electron-to-chromium`] to maintain mappings of which version of our supported target environments gained support of a JavaScript syntax or browser feature, as well as a mapping of those syntaxes and features to Babel transform plugins and core-js polyfills.\n","isInternal":false,"tokens":480,"sizeBytes":1973},{"name":"v4.x upgrade guide.md","path":"packages/docs/docs/migration-guides/v4.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/migration-guides/v4.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"# 4.x Upgrade Guide\n\n## Breaking changes\n\n### React version\n\nNo longer actively supporting React version < 16.3. The minimum supported version of React is now 16.3. [Discussion can be found here](https://github.com/rjsf-team/react-jsonschema-form/pull/2605#discussion_r792685354)\n\n### @rjsf/material-ui package - Minimum version of material-ui 4\n\nIf you are using the material-ui 4 theme, @material-ui/core and @material-ui/icons packages should be updated to the latest versions. The minimum versions supported for @material-ui/core and @material-ui/icons are 4.12.0 and 4.11.1 respectively. This change is required for [support for the material-ui version 5 theme](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/material-ui)\n","isInternal":false,"tokens":181,"sizeBytes":750},{"name":"v5.x upgrade guide.md","path":"packages/docs/docs/migration-guides/v5.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/migration-guides/v5.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"# 5.x Upgrade Guide\n\n## Breaking changes\n\nThere were several significant **breaking changes** in RJSF version 5 that were necessary in order to support the following new features:\n\n- Schema validation was decoupled from `@rjsf/core` to resolve issue [#2693](https://github.com/rjsf-team/react-jsonschema-form/issues/2693). Additionally, in order to break a circular dependency in the validation refactor, the `@rjsf/core/utils.js` file was split out into its own `@rjsf/utils` package as was suggested in [#1655](https://github.com/rjsf-team/react-jsonschema-form/issues/1655).\n- The theme for Material UI version 5 (i.e. `@rjsf/mui`) was split out of the theme for version 4 (i.e. `@rjsf/material-ui`) to resolve the following issues: [#2762](https://github.com/rjsf-team/react-jsonschema-form/issues/2762), [#2858](https://github.com/rjsf-team/react-jsonschema-form/issues/2858), [#2905](https://github.com/rjsf-team/react-jsonschema-form/issues/2905), [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945)\n- As part of the fix for [#2526](https://github.com/rjsf-team/react-jsonschema-form/issues/2526) all the existing templates in the previous version were moved into a new `templates` dictionary, similar to how `widgets` and `fields` work. This `templates` dictionary was added to the `Registry` and also the `Form` props, replacing the `ArrayFieldTemplate`, `FieldTemplate`, `ObjectFieldTemplate` and `ErrorList` props. In addition, several of the `fields` and `widgets` based components were moved into the `templates` dictionary as they were more like templates than true `Field`s or `Widget`s. Also fixes [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945)\n- Fixed `anyOf` and `oneOf` getting incorrect, potentially duplicate ids when combined with array [#2197](https://github.com/rjsf-team/react-jsonschema-form/issues/2197)\n- `CheckboxesWidget`, `RadioWidget` and `SelectWidget` in all themes now use indexes into `enumOptions[]` rather than `option.value` to allow for objects in `enumOptions` - [#1494](https://github.com/rjsf-team/react-jsonschema-form/issues/1494)\n\n### Node support\n\nVersion 5 is dropping official support for Node 12 as it is no longer a [maintained version](https://nodejs.org/en/about/releases/).\nPlease use Node 18 when making any changes to `package.json` and `package-lock.json` files.\nAll PR and branch builds are running against Node 14, 16 and 18.\n\n### React version\n\nRJSF is no longer actively supporting React version < 16.14.x.\nReact 17 is officially supported on all the themes where the underlying theme library also supports React 17.\n\nUnfortunately, there is required work pending to properly support React 18, so use it at your own risk.\n\n### New packages\n\nThere are four new packages added in RJSF version 5:\n\n- `@rjsf/utils`: All of the [utility functions](../api-reference/utility-functions.md) previously imported from `@rjsf/core/utils` as well as the Typescript types for RJSF version 5.\n - The following new utility functions were added: `ariaDescribedByIds()`, `createSchemaUtils()`, `descriptionId()`, `enumOptionsDeselectValue()`, `enumOptionsIndexForValue()`, `enumOptionsIsSelected()`, `enumOptionsSelectValue()`, `enumOptionsValueForIndex()`, `errorId()`, `examplesId()`, `getClosestMatchingOption()`, `getFirstMatchingOption()`, `getInputProps()`, `helpId()`, `mergeValidationData()`, `optionId()`, `sanitizeDataForNewSchema()` and `titleId()`\n- `@rjsf/validator-ajv6`: The [ajv](https://github.com/ajv-validator/ajv)-v6-based validator refactored out of `@rjsf/core@4.x`, that implements the `ValidatorType` interface defined in `@rjsf/utils`.\n- `@rjsf/validator-ajv8`: The [ajv](https://github.com/ajv-validator/ajv)-v8-based validator that is an upgrade of the `@rjsf/validator-ajv6`, that implements the `ValidatorType` interface defined in `@rjsf/utils`. See the ajv 6 to 8 [migration guide](https://ajv.js.org/v6-to-v8-migration.html) for more information.\n- `@rjsf/mui`: Previously `@rjsf/material-ui/v5`, now provided as its own theme.\n\n### `id` BREAKING CHANGES\n\nIn many of the themes the `id`s for the `Title`, `Description` and `Examples` blocks were update to all have a consistent value of `xxx__title`, `xxx__description` and `xxx__examples`, respectively, where `xxx` is the id of the field.\nIn addition, some of the `id`s for various input values were updated to be consistent across themes or to fix small bugs.\nFor instance, the values for radio buttons in the `RadioWidget` and checkboxes in the `CheckboxesWidget` are of the form `xxx-${option.value}`, where `xxx` is the id of the field.\n\n### `enumOptions[]` widgets BREAKING CHANGES\n\nSchemas may have `enumOptions[]` where values are objects rather than primitive types. Examples of such schemas have been added to the playground. These schemas did not work in RJSF prior to v5.\nIn every theme, the `enumOptions[]` rendering widgets `CheckboxesWidget`, `RadioWidget` and `SelectWidget` previously used the `enumOptions[].value` to as the value used for the underlying `checkbox`, `radio` and `select.option` elements.\nNow, these `CheckboxesWidget`, `RadioWidget` and `SelectWidget` components use the index of the `enumOptions[]` in the list as the value for the underlying elements.\nIf you need to build a custom widget for this kind of `enumOptions`, there are a set of `enumOptionsXXX` functions in `@rjsf/utils` to support your implementation.\n\n### `@rjsf/core` BREAKING CHANGES\n\n#### Types\n\nIn version 4, RJSF exported all its types directly from `@rjsf/core`.\nIn version 5, only the types for the `Form` component and the `withTheme()` HOC are exported directly from `@rjsf/core`.\nAll the rest of the types for RJSF are now exported from the new `@rjsf/utils` package.\n\nNOTE: The types in `@rjsf/utils` have been improved significantly from those in version 4 and as a result may require you to fix your Typescript typings and add some casts.\n\nSome of the most notable changes are:\n\n- `RJSFSchema` has replaced the use of `JSON7Schema` for future compatibility reasons.\n - Currently `RJSFSchema` is simply an alias to `JSON7Schema` so this change is purely a naming one.\n - It is highly recommended to update your use of `JSON7Schema` with `RJSFSchema` so that when the RJSF begins supporting a newer JSON Schema version out-of-the-box, your code won't be affected.\n- `RJSFSchemaDefinition` has replaced the use of `JSONSchema7Definition` for the same reasons.\n\n- The use of the generic `T` (defaulting to `any`) for the `formData` type has been expanded to cover all type hierarchies that use `formData`.\n- `StrictRJSFSchema` and `RJSFSchema` have replaced the use of `JSON7Schema` for future compatibility reasons.\n - `RJSFSchema` is `StrictRJSFSchema` joined with the `GenericObjectType` (i.e. `{ [key: string]: any }`) to allow for additional syntax related to newer draft versions\n - All definitions of `schema` and `rootSchema` elements have been replaced with a generic that is defined as `S extends StrictRJSFSchema = RJSFSchema`\n - It is highly recommended to update your use of `JSON7Schema` with `RJSFSchema` since that is the default for the new generic used for `schema` and `rootSchema`\n- A new generic `F` (extending `FormContextType` defaulting to `any`) was added for the `formContext` type, and all types in the hierarchy that use `formContext` have had that generic added to them.\n- The new `CustomValidator`, `ErrorTransformer`, `ValidationData`, `ValidatorType` and `SchemaUtilsType` types were added to support the decoupling of the validation implementation.\n- The new `TemplatesType`, `ArrayFieldDescriptionProps`, `ArrayFieldTitleProps`, `UnsupportedFieldProps`, `IconButtonProps`, `SubmitButtonProps` and `UIOptionsBaseType` were added to support the consolidation (and expansion) of `templates` in the `Registry` and `Form`.\n- **BREAKING CHANGE** The `DescriptionField` and `TitleField` props were removed from the `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps` as they can now be derived from the `templates` or `uiSchema` via the new `getTemplate()` utility function.\n- **BREAKING CHANGE** The `fields` prop was removed from the `FieldTemplateProps` as you can simply use `registry.fields` instead.\n- **BREAKING CHANGE** The `showErrorList` prop was changed to accept `false`, `\"top\"` or `\"bottom\"`. `true` is no longer a valid value. The default value is `\"top\"`, which has identical behavior to the default value/`true` in v4.\n You can view all these [types](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts) on GitHub.\n\n#### Form props\n\nIn version 5, the `Form` component's two optional props `additionalMetaSchemas` and `customFormats` were replaced with the new, required `validator` prop, in order to support the decoupling of the validation implementation.\nThis new `validator` prop is expected to be an implementation of the `ValidatorType` interface.\nThe new `@rjsf/validator-ajv6` package contains the refactored implementation of the version 4 validator; It was provided for backwards compatibility with RJSF v4, and it is deprecated. \nThe new `@rjsf/validator-ajv8` package contains the refactored implementation of the version 4 validator, that has been converted to use the `Ajv 8` validator and has more capabilities than the `Ajv 6` one. See the [Ajv migration guide](https://ajv.js.org/v6-to-v8-migration.html) for more information.\n\nThere are two ways to use this new package to provide a `validator` for a `Form`.\nFirst, you can simply import the default validator from the package and pass it to a `Form`.\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nSecond, if you were actually providing one (or both) of the removed optional props to your `Form`, you can continue using them by creating a customized validator.\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport { customizeValidator, CustomValidatorOptionsType } from \"@rjsf/validator-ajv8\";\n\n// Your schema, additionalMetaSchemas and/or customFormats\nconst schema: RJSFSchema = { ... };\nconst additionalMetaSchemas: CustomValidatorOptionsType['additionalMetaSchemas'] = [{ ... }];\nconst customFormats: CustomValidatorOptionsType['customFormats'] = { ... };\n\nconst validator = customizeValidator({ additionalMetaSchemas, customFormats });\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n##### `formElement` converted to RefObject\n\nThe `formElement` variable that stored the ref to the inner `` was converted from a simple variable assigned via a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) (ala React < 16.3) to a React.RefObject created using the `React.createRef()` API.\nAs a result, if you were using the `formElement` ref, you will need to update it to use `formElement.current`:\n\n```tsx\nimport { RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\nconst formRef = React.createRef();\n\nrender((\n \n), document.getElementById(\"app\"));\n\n...\n// Previously, to reset the form one would have called:\n// formRef.current.formElement.reset();\n// Now one calls:\nformRef.current.formElement.current.reset();\n```\n\n##### `validate` prop renamed\n\nAdditionally, in version 5, the `validate` prop on `Form` was renamed to `customValidate` to avoid confusion with the new `validator` prop.\n\n##### `fields` prop changes\n\nIn previous versions, it was possible to provide an override to the `DescriptionField`, `TitleField` and/or `UnsupportedField` components by providing a custom implementation in the `fields` prop on the `Form`.\nSince these components do not actually support the `FieldProps` interface, they were moved into the `templates` dictionary instead.\nIf you were previously overriding any (or all) of these components, you can override them now via the `templates` prop on `Form` instead:\n\n```tsx\nimport { DescriptionFieldProps, RJSFSchema, TitleFieldProps } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom fields\nconst CustomDescriptionField = (props: DescriptionFieldProps) => { ... };\nconst CustomTitleField = (props: TitleFieldProps) => { ... };\nconst CustomUnsupportedField = (props: ObjectFieldTemplateProps) => { ...\n};\n\nconst templates: Partial = {\n DescriptionFieldTemplate: CustomDescriptionField,\n TitleFieldTemplate: CustomTitleField,\n UnsupportedFieldTemplate: CustomUnsupportedField,\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n##### new `templates` prop\n\nAdditionally, in version 5, the `ArrayFieldTemplate`, `FieldTemplate`, `ObjectFieldTemplate` and `ErrorList` props were replaced with the `templates` prop as part of the `TemplatesType` consolidation.\nIf you were previously overriding any (or all) of these templates, you can simply consolidate them into the new `templates` prop on `Form` instead:\n\n```tsx\nimport { ArrayFieldTemplateProps, ErrorListProps, FieldTemplateProps, ObjectFieldTemplateProps, RJSFSchema } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom templates\nconst CustomArrayFieldTemplate = (props: ArrayFieldTemplateProps) => { ... };\nconst CustomFieldTemplate = (props: FieldTemplateProps) => { ... };\nconst CustomObjectFieldTemplate = (props: ObjectFieldTemplateProps) => { ... };\nconst CustomErrorField = (props: ErrorListProps) => { ... };\n\nconst templates: Partial = {\n ArrayFieldTemplate: CustomArrayFieldTemplate,\n FieldTemplate: CustomFieldTemplate,\n ObjectFieldTemplate: CustomObjectFieldTemplate,\n ErrorFieldTemplate: CustomErrorField,\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nNOTE: In version 5, the `ArrayField` implementation was refactored to add 3 additional templates for presenting arrays along with the `ArrayFieldTemplate`.\nIf you were updating the `ArrayFieldTemplate` to modify just a subset of the UI, it may be easier for you to implement one of the other new templates instead.\nSee the [Custom Templates](../advanced-customization/custom-templates.md) documentation for more details.\n\n##### `widgets` prop change\n\nIn the previous version, it was possible to provide an override to the `SubmitButton` component by providing a custom implementation in the `widgets` prop on the `Form`.\nSince this component only requires a tiny fraction of the `WidgetProps` interface, it was moved into the `templates.ButtonTemplates` dictionary instead with its own, reduced set of props.\nIf you were previously overriding this component, you can override it now via the `templates` prop on `Form` instead:\n\n```tsx\nimport { RJSFSchema, SubmitButtonProps } from \"@rjsf/utils\";\nimport Form from \"@rjsf/core\";\nimport validator from \"@rjsf/validator-ajv8\";\n\n// Your schema\nconst schema: RJSFSchema = { ... };\n\n// Your custom button\nconst CustomSubmitButton = (props: SubmitButtonProps) => { ...\n};\n\nconst templates: Partial = {\n ButtonTemplates: {\n SubmitButton: CustomSubmitButton,\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n#### utils.js\n\nIn version 5, all the utility functions that were previously accessed via `import { utils } from '@rjsf/core';` are now available via `import utils from '@rjsf/utils';`.\nBecause of the decoupling of validation from `@rjsf/core` there is a breaking change for all the [validator-based utility functions](../api-reference/utility-functions.md#validator-based-utility-functions), since they now require an additional `ValidatorType` parameter.\nMore over, one previously exported function `resolveSchema()` is no longer exposed in the `@rjsf/utils`, so use `retrieveSchema()` instead.\nFinally, the function `getMatchingOption()` has been deprecated in favor of `getFirstMatchingOption()`.\n\nIf you have built custom fields or widgets that utilized any of these breaking-change functions, don't worry, there is a quick and easy solution for you.\nThe `registry` has a breaking-change which removes the previously deprecated `definitions` property while adding the new `schemaUtils` property.\nThis new `registry.schemaUtils` property implements the `SchemaUtilsType` interface, which allows you to call a version of each of these breaking-change functions without the need for passing either a `validator` or `rootSchema`.\nBecause all fields and widgets are guaranteed to be passed the `registry` as a prop, if your custom field/widget happens to use either the `registry.definitions` object or a breaking-change validator-based utility function you make the following changes:\n\n```tsx\nimport { RJSFSchema, FieldProps } from '@rjsf/utils';\n\nfunction YourField(props: FieldProps) {\n const { registry } = props;\n// Change `registry.definitions` to `registry.rootSchema.definitions`\n// const { definitions } = registry; <- version 4\n const { rootSchema } = registry;\n const { definitions } = rootSchema;\n...\n}\n```\n\n```tsx\n// Change breaking-change function to schemaUtils instead, otherwise import from @rjsf/utils\n// import { utils } from '@rjsf/core'; <- version 4\n// const { isMultiSelect, resolveSchema, getUiOptions } = utils; <- version 4\nimport { RJSFSchema, WidgetProps, getUiOptions } from '@rjsf/utils';\n\nfunction YourWidget(props: WidgetProps) {\n const { registry, uiSchema } = props;\n const { schemaUtils } = registry;\n// const matchingOption = getMatchingOption({}, options, rootSchema); <- version 4\n// const isMultiSelect = isMultiSelect(schema, rootSchema); <- version 4\n// const newSchema = resolveSchema(schema, formData, rootSchema); <- version 4\n const matchingOption = schemaUtils.getFirstMatchingOption({}, options);\n const isMultiSelect = schemaUtils.isMultiSelect(schema);\n const newSchema: RJSFSchema = schemaUtils.retrieveSchema(schema, formData);\n const options = getUiOptions(uiSchema);\n\n...\n}\n```\n\n#### validator.js\n\nBecause of the decoupling of validation from `@rjsf/core` this file was refactored into its own `@rjsf/validator-ajv8` package.\nDuring that refactor a few **breaking changes** were made to how it works related to custom validation and `ErrorSchema` conversion.\n\n##### toErrorList param changed\n\nIn previous versions, the `toErrorList()` function used to take a `fieldName` string defaulted to `root`, and used it to format the `stack` message.\nIn version 5, `fieldName` was changed to `fieldPath` string array defaulted to an empty array, and is used to recursively add the field name to the errors as the `property` object along with the raw `message`.\nThe result is that if you had an `ErrorSchema` that looks like:\n\n```tsx\nconst errorSchema: ErrorSchema = {\n __errors: ['error message 1'],\n password: { __errors: 'passwords do not match' },\n};\n```\n\nThe returned result from calling `toErrorList(errorSchema)` has changed as follows:\n\n```tsx\n// version 4 result\n[{ stack: 'root: error message 1' }, { stack: 'password: passwords do not match' }][\n // version 5 result\n ({ property: '.', message: 'error message 1', stack: '. error message 1' },\n {\n property: '.password',\n message: 'passwords do not match',\n stack: '.password passwords do not match',\n })\n];\n```\n\n##### Custom validation and extraErrors\n\nIn previous versions, when using a custom validator on the `Form`, any errors that were generated were inconsistently inserted into the validations `errors` list.\nIn addition, there was an [issue](https://github.com/rjsf-team/react-jsonschema-form/issues/1596) where the non-`stack` AJV error information was lost when custom validation generated errors.\nThis issue has been fixed.\nAlso, when `extraErrors` were provided, they were being inconsistently inserted into the `errors` list and the non-`stack` AJV error information was lost.\nIn version 5, all of these errors will be consistently appended onto the end of the validation `errors` list, and the additional AJV error information is maintained.\n\nIn other words, if custom validation or `extraErrors` produced the following `ErrorSchema`:\n\n```tsx\n{\n __errors: [ \"Please correct your password\"],\n password2: { __errors: \"passwords do not match\" }\n}\n```\n\nAnd the AJV validation produced the following `ErrorSchema`:\n\n```tsx\n{\n __errors: [\n {\n message: 'should NOT be shorter than 3 characters',\n name: 'minLength',\n params: { limit: 3 },\n property: '.password2',\n schemaPath: '#/properties/password2/minLength',\n stack: '.password2 should NOT be shorter than 3 characters',\n },\n ];\n}\n```\n\nThe resulting `errors` list has changed as follows:\n\n```tsx\n// version 4\n[\n { stack: 'root: Please correct your password' },\n { stack: 'password2: passwords do not match' },\n { stack: 'password2: should NOT be shorter than 3 characters' },\n][\n // version 5\n ({\n message: 'should NOT be shorter than 3 characters',\n name: 'minLength',\n params: { limit: 3 },\n property: '.password2',\n schemaPath: '#/properties/password2/minLength',\n stack: '.password2 should NOT be shorter than 3 characters',\n },\n {\n property: '.',\n message: 'Please correct your password',\n stack: '. Please correct your password',\n },\n {\n property: '.',\n message: 'passwords do not match',\n stack: '.password2 passwords do not match',\n })\n];\n```\n\n#### Generate correct ids when arrays are combined with `anyOf`/`oneOf`\n\nIn v4, with arrays inside `anyOf` or `oneOf`, the parent name was not used to generate ids.\nFor example, given a schema such as:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"items\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"anyOf\": [\n {\n \"properties\": {\n \"foo\": {\n \"type\": \"string\"\n }\n }\n },\n {\n \"properties\": {\n \"bar\": {\n \"type\": \"string\"\n }\n }\n }\n ]\n }\n }\n }\n}\n```\n\nWe would get fields with id `root_foo` and `root_bar`.\nAs you can imagine, we could end up with duplicated ids if there's actually a `foo` or a `bar` in the root of the schema.\n\nFrom v5, the child fields will correctly use the parent id when generating its own id, generating ids such as `root_items_0_foo`.\n\n#### Deprecations added in v5\n\n##### getMatchingOption()\n\nThe utility function `getMatchingOption()` was deprecated in favor of the more aptly named `getFirstMatchingOption()` which has the exact same implementation.\n\n##### Non-standard `enumNames` property\n\n`enumNames` is a non-standard JSON Schema field that was deprecated in version 5.\n`enumNames` could be included in the schema to apply labels that differed from an enumeration value.\nThis behavior can still be accomplished with `oneOf` or `anyOf` containing `const` values, so `enumNames` support will be removed from a future major version of RJSF.\nFor more information, see [#532](https://github.com/rjsf-team/react-jsonschema-form/issues/532).\n\n##### uiSchema.classNames\n\nIn versions previous to 5, `uiSchema.classNames` was the only property that did not require the `ui:` prefix.\nAdditionally, it did not support being added into the `ui:options` object.\nThis was fixed in version 5 to be consistent with all the other properties in the `uiSchema`, so the `uiSchema.classNames` support may be removed from a future major version of RJSF.\n\nIf you are using `classNames` as follows, simply add the `ui:` prefix to it to remove the deprecation warning that will be displayed for each `uiSchema.classNames` you have:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\n// This uiSchema will log a deprecation warning to the console\nconst uiSchemaLog: UiSchema = {\n title: {\n classNames: 'myClass',\n },\n};\n// This uiSchema will not\nconst uiSchemaNoLog: UiSchema = {\n title: {\n 'ui:classNames': 'myClass',\n },\n};\n```\n\n### `@rjsf/material-ui` BREAKING CHANGES\n\nThis theme was simplified back to working only with Material UI version 4 after an unsuccessful attempt to have it fully support both versions 4 and 5 simultaneously.\nAs a result, the `MuiComponentContext`, `MuiForm5`, `Theme5` components and the `useMuiComponent` hook were removed from the export.\nIn addition, the `/v4` and `/v5` sub-packages were also removed.\n\n#### Migrating for Material UI version 4\n\nIf you were using this theme for Material UI version 4 AND you were using the sub-package, simply remove the `/v4` from your imports.\n\nIf you modified your Typescript configuration for the `/v4` sub-package, remove the following from your `tsconfig.json`:\n\n```\n{\n ...\n \"compilerOptions\": {\n ...\n \"baseUrl\": \".\",\n \"paths\": {\n \"@rjsf/material-ui/*\": [\"node_modules/@rjsf/material-ui/dist/*\"]\n }\n }\n}\n```\n\nIf you modified your Jest configuration for the `/v4` sub-package, remove the following from your `jest.config.json`:\n\n```\n \"moduleNameMapper\": {\n \"@rjsf/material-ui/v4\": \"/node_modules/@rjsf/material-ui/dist/v4.js\"\n },\n```\n\n#### Migrating for Material UI version 5\n\nIf you were using this theme for Material UI version 5, you will want to use `@rjsf/mui` instead.\nSee below for some before and after examples.\n\nIf you modified your Typescript configuration for the `/v5` sub-package, remove the following from your `tsconfig.json`:\n\n```\n{\n ...\n \"compilerOptions\": {\n ...\n \"baseUrl\": \".\",\n \"paths\": {\n \"@rjsf/material-ui/*\": [\"node_modules/@rjsf/material-ui/dist/*\"]\n }\n }\n}\n```\n\nIf you modified your Jest configuration for the `/v5` sub-package, remove the following from your `jest.config.json`:\n\n```\n \"moduleNameMapper\": {\n \"@rjsf/material-ui/v5\": \"/node_modules/@rjsf/material-ui/dist/v5.js\"\n },\n```\n\n##### Before\n\n```tsx\nimport Form5 from '@rjsf/material-ui';\n```\n\nor\n\n```tsx\nimport Form from '@rjsf/material-ui/v5';\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme } from '@rjsf/material-ui/v5';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme);\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme as Theme5 } from '@rjsf/material-ui';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme5);\n```\n\n##### After\n\n```tsx\nimport Form from '@rjsf/mui';\n```\n\nor\n\n```tsx\nimport { withTheme } from '@rjsf/core';\nimport { Theme } from '@rjsf/mui';\n// Make modifications to the theme with your own fields and widgets\nconst Form = withTheme(Theme);\n```\n","isInternal":false,"tokens":6655,"sizeBytes":27067},{"name":"v6.x upgrade guide.md","path":"packages/docs/docs/migration-guides/v6.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/migration-guides/v6.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"# 6.x Upgrade Guide\n\n## New packages\n\nThere are 5 new packages added in RJSF version 6:\n\n- `@rjsf/daisyui`: This is new theme based on the `daisyui` toolkit\n- `@rjsf/mantine`: This is new theme based on the `mantine` toolkit\n- `@rjsf/primereact`: This is a new theme based on the `PrimeReact` toolkit\n- `@rjsf/react-bootstrap`: This is rename of the `bootstrap-4` theme with an upgrade to the latest version of `react-bootstrap`\n- `@rjsf/shadcn`: This is new theme based on the `shadcn` toolkit\n\n## New deprecations\n\n### UiSchema.rootFieldId\n\nThe `ui:rootFieldId` notation on `UiSchema` was deprecated in favor of `Form.idPrefix`.\nThis notation will be removed in a future major version release\n\n### @rjsf/semantic-ui\n\nThe `semantic-ui` theme is deprecated and will be removed in a future major version release unless `sematic-ui-react` version 3 is released with React 19 support.\nAlthough that seems unlikely as no changes have been made to version 3 since December 2023.\n\n## Breaking changes\n\n### CJS build changes\n\nDue to making all of the `package.json` files for the `@rjsf/*` libraries include `\"type\": \"module\"` to better support modern `ESM` builds, the generation of the Common JS distributions were updated to produce `.cjs` files rather than `.js` files.\nHopefully this will not cause any issues with existing uses of the libraries. If so, one may need to switch from doing an `import` of the CJS build to doing a `require()`.\n\n### Theme removals\n\nThe following themes were removed due to duplication of a framework with a newer theme\n\n#### bootstrap-4\n\nThe older `bootstrap-4` theme has been removed in favor of the `react-bootstrap` theme\n\n#### fluent-ui\n\nThe older `fluent-ui` theme has been removed in favor of the `fluentui-rc` theme\n\n#### material-ui\n\nThe older `material-ui` theme has been removed in favor of the `mui` theme\n\n### validator-ajv6\n\nThis deprecated validator has been removed. Use the `validator-ajv8`.\n\n### Theme version support changes\n\n#### @rjsf/antd\n\nVersion 6 is dropping official support for `antd` version 4. You must upgrade to version 5.\n\n#### @rjsf/chakra-ui\n\nVersion 6 is dropping official support for `@chakra-ui` version 2. You must upgrade to version 3. We are also requiring\n`chakra-react-select` version >=6 as a result.\n\n#### @mui version 5 and 6\n\nVersion 6 is dropping official support for `@mui/material` and `@mui/icons-material` versions 5 and 6 due to the adoption\nof breaking changes in version 7. You must upgrade to version 7.\n\n#### @rjsf/semantic-ui\n\nVersion 6 is dropping official support for `semantic-ui-react` version 1. You must upgrade to version 2.\n\n### Node support\n\nVersion 6 is dropping official support for Node 14, 16, and 18 as they are no longer [maintained versions](https://nodejs.org/en/about/releases/).\nPlease use Node 22 when making any changes to `package.json` and `package-lock.json` files.\nAll PR and branch builds are running against Node 20 and 22.\n\n### React version\n\nRJSF is no longer actively supporting React version < 18.x.\nReact 18 is officially supported on all the themes.\n\nReact 19 support is expected before the end of beta (although several developers have already upgraded with no problems).\n\n### Form POTENTIAL BREAKING CHANGES\n\nThe `onChange()` and `onSubmit()` callbacks were accidentally returning extra data along with what was listed in the `IChangeEvent` interface.\nIn v6, this was fixed so that only the data described by the `IChangeEvent` interface is returned.\nIf you were relying on that extra data in the callbacks, we are sorry for the inconvenience.\n\nA bug was fixed such that live validation will no longer be triggered on the data provided during the initial rendering of the `Form`.\nIf you require that your initial data have errors shown, then you can [programmatically validate](../usage/validation/#validate-form-programmatically) it after the initial render.\n\n### IdSchema replacement BREAKING CHANGE\n\nThe recursive `IdSchema` type and all its usages was replaced with a much simpler `FieldPathId` type.\nThis was done to remove a performance headache associated with having to recursively generate the `IdSchema` for every change made to `formData`.\nMoreover, after some evaluation, 99% of the use cases for the `IdSchema` were simply to get the `id` for a field.\n\n`FieldPathId` is defined as:\n\n```typescript\n/** The list of path elements that represents where in the schema a field is located. When the item in the field list is\n * a string, then it represents the name of the property within an object. When it is a number, then it represents the\n * index within an array.\n *\n * For example:\n * `[]` represents the root object of the schema\n * `['foo', 'bar']` represents the `bar` element contained within the `foo` element of the schema\n * `['baz', 1]` represents the second element in the list `baz` of the schema\n */\nexport type FieldPathList = (string | number)[];\n\n/** Type describing an id and path used for a field */\nexport type FieldPathId = {\n /** The id for a field */\n $id: string;\n /** The path for a field */\n path: FieldPathList;\n};\n```\n\n#### idSchema props\n\nIn addition, everywhere the `idSchema: IdSchema` prop was part of a RJSF type, it was replaced with `fieldPathId: FieldPathId`.\n\nThe affected types are:\n\n- FieldErrorProps\n- FieldHelpProps\n- FieldProps\n- UnsupportedFieldProps\n- ArrayFieldTitleProps\n- ArrayFieldDescriptionProps\n- ArrayFieldItemButtonsTemplateProps\n- ArrayFieldTemplateProps\n- ObjectFieldTemplateProps\n\nIf you have built a custom component using one of those types that used `idSchema: IdSchema`, simply replace that type and property name with `fieldPathId: FieldPathId`.\n\nFor example, if you had a custom field:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\n\n// Version 5-based custom widget\nfunction CustomField(props: FieldProps) {\n const {\n idSchema: { $id },\n formData,\n value,\n } = props;\n\n return
// Your field implementation
;\n}\n\n// Version 6-based custom widget\nfunction CustomField(props: FieldProps) {\n const {\n fieldPathId: { $id },\n formData,\n value,\n } = props;\n\n return
// Your field implementation
;\n}\n```\n\n#### toIdSchema() removed\n\nFinally, the `toIdSchema()` utility function was deleted and replaced with a new `toFieldPathId()` function documented [here](../api-reference/utility-functions.md#tofieldpathid)\n\n### formContext BREAKING CHANGES\n\nRemoved the unnecessary `formContext` property from the following interfaces since it is readily available in the `registry`.\nIf you were using the `formContext` in your custom `template`, `field` or `widget`, simply get it from the `registry` instead.\n\nInterfaces with `formContext` removed:\n\n- `ErrorListProps` - The properties that are passed to an `ErrorListTemplate` implementation\n- `FieldProps` - The properties that are passed to a `Field` implementation\n- `FieldTemplateProps` - The properties that are passed to a `FieldTemplate` implementation\n- `ArrayFieldTemplateProps` - The properties that are passed to an `ArrayFieldTemplate` implementation\n- `WidgetProps` - The properties that are passed to a `Widget` implementation\n\n### Fields BREAKING CHANGES\n\n#### FieldProps.onChange\n\nThe `onChange` handling for fields has been changed to fix a serious bug related to nearly simultaneous updates losing data.\nPreviously in 5.x, data change handling worked by passing a complete `newFormData` object up to the `Form` from the underlying `Field`s.\nIn 6.x, data change handling now works by passing just the changed `newValue` for a `Field` and the `path` array of the `Field` within the `formData`, with the `Form` itself being responsible for injecting the changed data into the `formData`.\n\nAs a result, the `FieldProps` interface was updated with the following breaking change so that custom `Field` authors are forced to respond to this update:\n\n```typescript\n// Version 5's `onChange` handler:\n\n/** The field change event handler; called with the updated form data and an optional `ErrorSchema` */\nonChange: (newFormData: T | undefined, es?: ErrorSchema, id?: string) => any;\n\n// Version 6's `onChange` handler:\n/** The field change event handler; called with the updated field value, the optional change path for the value\n * (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed\n */\nonChange: (newValue: T | undefined, path: FieldPathList, es?: ErrorSchema, id?: string) => void;\n```\n\nIn order to support letting the `Form` know what the path of the change was, a new `path: FieldPathList` parameter was injected into the handler before the `es?: ErrorSchema` parameter.\nIf you have written a custom `Field` that implements merging the new value into the `newFormData`, now you just need to pass that value and provide the `fieldPathId.path` to the `onChange` function.\n\nHere is an example of a custom `Field` that was updated due to this change:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nconst { ArrayField } = getDefaultRegistry().fields;\n\n// Version 5-based custom field\nfunction CustomField(props: FieldProps) {\n const {\n idSchema: { $id },\n formData,\n onChange,\n } = props;\n const changeHandlerFactory = (fieldName: string) => (event: any) => {\n onChange({ ...formData, [fieldName]: event.target.value });\n };\n return (\n <>\n

Location

\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n );\n}\n\n// Version 6-based custom field\nfunction CustomField(props: FieldProps) {\n const {\n fieldPathId: { $id, path },\n formData,\n onChange,\n } = props;\n const changeHandlerFactory = (fieldName: string) => (event: any) => {\n onChange(event.target.value, [...path, fieldName]);\n };\n return (\n <>\n

Location

\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n );\n}\n```\n\nThe same change also applies to the `ErrorSchema` object being passed to the `Form`.\nTherefore, if your custom `Field` also updated the `ErrorSchema` to add a new error, now you just need to pass that error as well.\nFinally, the errors are preserved across validations, so if you want to clear an error you passed via `onChange`, you will have to pass `undefined`\n\nHere is an example of a custom `Field` that was updated due to this change:\n\n```tsx\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nconst { StringField } = getDefaultRegistry().fields;\n\n// Version 5-based custom field\nfunction StringFieldError(props: FieldProps) {\n const onChange = (newFormData: any | undefined, es?: ErrorSchema, id?: string) => {\n let raiseError = es;\n if (newFormData === 'test') {\n raiseError = {\n ...es,\n __errors: ['Value cannot be \"test\"'],\n };\n }\n props.onChange(newFormData, raiseError, id);\n };\n return ;\n}\n\n// Version 6-based custom field\nfunction StringFieldError(props: FieldProps) {\n const onChange = (newValue: any | undefined, path: FieldPathList, es?: ErrorSchema, id?: string) => {\n let raiseError = es;\n if (newValue === 'test') {\n raiseError = {\n __errors: ['Value cannot be \"test\"'],\n };\n }\n props.onChange(newValue, path, raiseError, id);\n };\n return ;\n}\n```\n\n#### FieldProps.idPrefix and FieldProps.idSeparator refactor\n\nThe `idPrefix` and `idSeparator` props were refactored from the `FieldProps` interface to the new `GlobalFormOptions` interface,\nIf your custom implementation required either of those props, you can simply obtain them from the `registry.globalFormOptions` variable instead.\n\n### FieldTemplateProps and WrapIfAdditionalTemplateProps BREAKING CHANGES\n\nDuring the conversion of `ObjectField` to a stateless functional component, the `additionalProperties`-based props in these two interfaces were simplified by replacing two callback-generators with memoized callbacks.\n\nIf you have your own implementation of the `FieldTemplate` and/or `WrapIfAdditionalTemplate` template(s), you will have to rename the props mentioned below with their replacements.\n\n#### onKeyChange replacement\n\nThe `onKeyChange: (value: string) => () => void` callback-generator function was replaced with the following 2 memoized callbacks, (one is a helper callback, since most of the key renames were triggered off of an input blur):\n\n```typescript\n/** Callback used to handle the changing of an additional property key's name with the new value\n */\nonKeyRename: (newKey: string) => void;\n/** Callback used to handle the changing of an additional property key's name when the input is blurred. The event's\n * target's value will be used as the new value. Its a wrapper callback around `onKeyRename`\n */\nonKeyRenameBlur: (event: FocusEvent) => void;\n```\n\n#### onDropPropertyClick replacement\n\nThe `onDropPropertyClick: (value: string) => () => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback used to handle the removal of the additionalProperty */\nonRemoveProperty: () => void;\n```\n\n### ObjectFieldTemplateProps BREAKING CHANGES\n\nDuring the conversion of `ObjectField` to a stateless functional component, the `additionalProperties`-based prop in this interface was simplified by replacing a callback-generator with a memoized callback.\n\nIf you have your own implementation of the `ObjectFieldTemplate` template, you will have to rename the prop mentioned below with its replacement.\n\n#### onAddClick replacement\n\nThe `onAddClick: (schema: S) => () => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback to use in order to add an new additionalProperty to the object field (to be used with\n * additionalProperties and patternProperties)\n */\nonAddProperty: () => void;\n```\n\n### Registry BREAKING CHANGES\n\nA new required prop, `globalFormOptions: GlobalFormOptions`, was added to the `Registry` interface.\nThis could affect your tests if you have your own way of creating `registry` objects to test your custom widgets, fields and/or templates.\nIf you are creating `Registry` objects, you simply need to add an empty object to the `globalFormOptions` prop.\nYou may also, provide values for any of the optional props contained within the `GlobalFormOptions` type.\n\nThe definition of the `GlobalFormOptions` object is:\n\n```typescript\n/** The set of options from the `Form` that will be available on the `Registry` for use in everywhere the `registry` is\n * available.\n */\nexport type GlobalFormOptions = {\n /** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;\n * Default is `root`. This prop is passed to the `toFieldPathId()` function within the RJSF field implementations.\n */\n readonly idPrefix?: string;\n /** To avoid using a path separator that is present in field names, it is possible to change the separator used for\n * ids; Default is `_`. This prop is passed to the `toFieldPathId()` function within the RJSF field implementations.\n */\n readonly idSeparator?: string;\n /** The component update strategy used by the Form and its fields for performance optimization */\n readonly experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';\n /** Optional function to generate custom HTML name attributes for form elements. Receives the field path segments\n * and element type (object or array), and returns a custom name string. This allows backends like PHP/Rails\n * (`root[tasks][0][title]`) or Django (`root__tasks-0__title`) to receive form data in their expected format.\n */\n readonly nameGenerator?: NameGeneratorFunction;\n};\n```\n\nTo help support this change for test writers, a new `getTestRegistry()` function has been provided in `@rjsf/core`.\n\n### Templates BREAKING CHANGES\n\n#### ArrayFieldTemplateItemType renamed\n\nThe type `ArrayFieldTemplateItemType` was renamed to `ArrayFieldItemTemplateProps` type, which matches the template properties naming pattern.\n\nAlso changed the `key: string` prop to `itemKey: string` to avoid a name collision with React\n\n#### ArrayFieldItemTemplate BREAKING CHANGES\n\nThe `ArrayFieldItemTemplateProps` was refactored to extract the following props into out a new `ArrayFieldItemButtonsTemplateProps`:\n\n- `canAdd`: A boolean value stating whether new items can be added to the array.\n- `hasCopy`: A boolean value stating whether the array item can be copied.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- ~~`onAddIndexClick: (index) => (event?) => void`: Returns a function that adds a new item at `index`.~~\n- ~~`onCopyIndexClick: (index: number) => (event?: any) => void;`: Returns a function that copies the item at `index` into the position at `index + 1`.~~\n- ~~`onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.~~\n- ~~`onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.~~\n\nIn addition to this refactor, the conversion of the `ArrayField` template to functional components caused the replacement of the 4 callback-generator functions with 5 memoizable functions.\n\n##### onAddIndexClick replacement\n\nThe `onAddIndexClick: (index) => (event?) => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback function that adds a new item below this item */\nonAddItem: (event?: any) => void;\n```\n\n##### onCopyIndexClick replacement\n\nThe `onCopyIndexClick: (index: number) => (event?: any) => void;` callback-generator function was replaced with a simpler, memoized callback:\n\n```typescript\n/** Callback function that copies this item below itself */\nonCopyItem: (event?: any) => void;\n```\n\n##### onDropIndexClick replacement\n\nThe `onDropIndexClick: (index) => (event?) => void` callback-generator function was replaced with the following memoized callback:\n\n```typescript\n/** Callback function that removes the item from the list */\nonRemoveItem: (event?: any) => void;\n```\n\n##### onReorderClick replacement\n\nThe `onReorderClick: (index, newIndex) => (event?) => void` callback-generator function was replaced with the following 2 memoized callbacks:\n\n```typescript\n/** Callback function that moves the item up one spot in the list */\nonMoveUpItem: (event?: any) => void;\n/** Callback function that moves the item down one spot in the list */\nonMoveDownItem: (event?: any) => void;\n```\n\nA new `buttonsProps` prop was added of the type `ArrayFieldItemButtonsTemplateProps`\n\nThis new type was then used to create a new `ArrayFieldItemButtonsTemplate` in the `Registry.templates`.\nSee [ArrayFieldItemButtonTemplate](../advanced-customization/custom-templates.md#arrayfielditembuttontemplate)\n\nIf you have implemented your own `ArrayFieldItemTemplate` or `ArrayField` then you will have to account for these changes.\n\n#### ArrayFieldTemplate BREAKING CHANGE\n\nIn order to support the conversion of `ArrayField` to functional components, the `items` property was changed from an\narray of `ArrayFieldItemTemplateProps` information to an array of React elements. These elements are result of the `ArrayField`\nactually rendering the `ArrayFieldItemTemplate` directly, rather than deferring it the `ArrayFieldTemplate`.\n\nIf you previously provided a custom `ArrayFieldTemplate` to do the full rendering of your arrays, now you will have to\nseparate the logic of generating the items into your own custom `ArrayFieldItemTemplate`. For example:\n\n```tsx\n// v5 ArrayFieldTemplate\n\nimport { ArrayFieldTemplateItemType, ArrayFieldTemplateProps } from '@rjsf/utils';\n\nfunction CustomArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n const { items, canAdd, onAddClick } = props;\n return (\n
\n {items &&\n items.map((element: ArrayFieldTemplateItemType) => (\n
\n
{element.children}
\n {(element.hasMoveUp || element.hasMoveDown) && (\n \n Down\n \n )}\n {(element.hasMoveUp || element.hasMoveDown) && (\n \n )}\n {element.hasCopy && (\n \n )}\n {element.hasRemove && (\n \n )}\n
\n
\n ))}\n {canAdd && (\n
\n \n
\n )}\n
\n );\n}\n```\n\n```tsx\n// v6 ArrayFieldTemplate and ArrayFieldItemTemplate (including other v6 changes mentioned in other sections)\n\nimport { ArrayFieldItemTemplateProps, ArrayFieldTemplateProps } from '@rjsf/utils';\n\nfunction CustomArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {\n const { children, buttonProps, itemKey } = props;\n return (\n
\n
{children}
\n {(buttonsProps.hasMoveUp || buttonsProps.hasMoveDown) && (\n \n )}\n {(buttonsProps.hasMoveUp || buttonsProps.hasMoveDown) && (\n \n )}\n {buttonsProps.hasCopy && (\n \n )}\n {buttonsProps.hasRemove && (\n \n )}\n
\n
\n );\n}\n\nfunction CustomArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n const { items, canAdd, onAddClick } = props;\n return (\n
\n {items}\n {canAdd && (\n
\n \n
\n )}\n
\n );\n}\n```\n\n> NOTE: the example above could also have implemented an `ArrayFieldItemButtonsTemplate` for the `buttonProps` related code.\n\n##### Potential BREAKING CHANGE\n\nThis template was also updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ArrayFieldTemplateProps` interface.\n\nIf you have your own implementation of `ArrayFieldTemplate` and want to support this new feature, please refer to any of the `ArrayFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### ArrayFieldTitleTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ArrayFieldTitleProps` interface.\n\nIf you have your own implementation of `ArrayFieldTitleTemplate` and want to support this new feature, please refer to the `ArrayFieldTitleTemplate` implementation for `@rjsf/core` or whatever theme you are using and pick up the changes.\n\n#### GridTemplate\n\nA new, theme-dependent template `GridTemplate` was added to support the new layout feature and must be provided if you are building your own `registry.templates` rather than overloading them via the `templates` props.\n\n#### MultiSchemaFieldTemplate\n\nThis new template was created to extract styling applied to the `MultiSchemaField` component in the `@rjsf/core` package.\n\nIf you have styled your form using the following classNames and you do NOT use the `@rjsf/core` theme, you may need to adjust your styles, as they may have been removed from your theme: `panel`, `panel-default`, `panel-body`, `form-group`.\n\n#### ObjectFieldTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `ObjectFieldTemplateProps` interface.\n\nIf you have your own implementation of `ObjectFieldTemplate` and want to support this new feature, please refer to the `ObjectFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### OptionalDataControlsTemplate POTENTIAL BREAKING CHANGE\n\nThis new template was created to support the new [Optional Data Controls](#optional-data-controls) feature.\n\nIf you are implementing your own theme you may need to add this new template if you anticipate supporting this new feature.\n\n#### TitleFieldTemplate POTENTIAL BREAKING CHANGE\n\nThis template was updated to support the new [Optional Data Controls](#optional-data-controls) feature by adding a new `optionalDataControl` prop to the `TitleFieldProps` interface.\n\nIf you have your own implementation of `TitleFieldTemplate` and want to support this new feature, please refer to the `TitleFieldTemplate` implementation for whatever theme you are using and pick up the changes.\n\n#### SchemaField - Addition of FallbackField POTENTIAL BREAKING CHANGE\n\nThe `SchemaField` was updated to use the new `FallbackField`, which adds opt-in support to replace the `UnsupportedField` with an interactive UI instead of an error message.\nIf you have your own implementation of `SchemaField` and want to support this new feature, please refer to the `SchemaField` implementation in `@rjsf/core` and pick up the changes.\n\nThe `UnsupportedField` component is unaffected by these changes, and is still used by the new `FallbackField`.\n\n#### SchemaUtilsType\n\nFive new functions were added to this type, so if you have your own implementation of this type, you will need to add them to yours.\nThe following new functions match the 5 new validator-based utility API functions mentioned below:\n\n- `findFieldInSchema(path: string | string[], schema: S, formData?: T): FoundFieldType`\n- `findSelectedOptionInXxxOf(schema: S, fallbackField: string, xxx: 'anyOf' | `oneOf`, formData?: T): S | undefined;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: T): T;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: S): S;`\n- `getFromSchema(schema: S, path: string | string[], defaultValue: T | S): S | T;`\n\nIn addition the `toIdSchema()` function was removed on this type in concert with the `toIdSchema()` function removal, so update your implementation to remove this as well.\n\n### Removed deprecations\n\nThe following deprecations were removed from the code base in v6\n\n#### FormProps.acceptcharset\n\nThe `acceptcharset` prop on `Form` was removed. Use the `acceptCharset` prop instead. I.e.:\n\n```tsx\n\n```\n\n#### getMatchingOption()\n\nThe `getMatchingOption()` function in `@rjsf/utils` was removed. Use the `getFirstMatchingOption()` function instead.\nI.e.:\n\n```ts\nimport { getFirstMatchingOption, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n // your schema goes here\n};\n\nconst formData = {\n /* your form data goes here */\n};\nconst options: RJSFSchema[] = [\n /* your options extracted from the schema go here */\n];\n\nconst option = getFirstMatchingOption(validator, formData, options, schema);\n```\n\n#### SchemaUtilsType.getMatchingOption()\n\nThe `getMatchingOption()` function in the `SchemaUtilsType` was removed. Use the `getFirstMatchingOption()` funciton on\nthe type instead. I.e.:\n\n```ts\nimport { createSchemaUtils, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n // your schema goes here\n};\n\nconst formData = {\n /* your form data goes here */\n};\nconst options: RJSFSchema[] = [\n /* your options extracted from the schema go here */\n];\nconst schemaUtils = createSchemaUtils(validator, schema);\n\nconst option = schemaUtils.getFirstMatchingOption(formData, options);\n```\n\n#### mergeValidationData()\n\nThe `mergeValidationData()` function from `@rjsf/utils` was removed. Use the `validationDataMerge()` function instead.\nI.e.:\n\n```ts\nimport { validationDataMerge, ValidationData, ErrorSchema } from '@rjsf/utils';\n\nconst validationData: ValidationData = {\n errors: [\n /* Your validation errors go here */\n ],\n errorSchema: {\n /* Your error schema goes here */\n },\n};\n\nconst additionalErrorSchema: ErrorSchema = {\n /* Your additional error schema goes here */\n};\n\nconst merged = validationDataMerge(validationData, additionalErrorSchema);\n```\n\n#### SchemaUtilsType.mergeValidationData()\n\nThe `mergeValidationData()` function in the `SchemaUtilsType` was removed. Use the standalone `validationDataMerge()`\nfunction instead. I.e.:\n\n```ts\nimport { toErrorList } from '@rjsf/utils';\n\nconst validationData: ValidationData = {\n errors: [\n /* Your validation errors go here */\n ],\n errorSchema: {\n /* Your error schema goes here */\n },\n};\n\nconst additionalErrorSchema: ErrorSchema = {\n /* Your additional error schema goes here */\n};\n\nconst merged = validationDataMerge(validationData, additionalErrorSchema);\n```\n\n#### ValidatorType.toErrorList()\n\nThe `toErrorList()` function on the `ValidatorType` interface was removed. Use the standalone `toErrorList()` function\nfrom `@rjsf/utils` instead. I.e.:\n\n```ts\nimport { validationDataMerge, ErrorSchema, RJSFValidationError, toErrorList } from '@rjsf/utils';\n\nconst errorSchema: ErrorSchema = {\n /* Your error schema goes here */\n};\n\nconst validationErrors: RJSFValidationError[] = toErrorList(errorSchema);\n```\n\n#### RJSF_ADDITONAL_PROPERTIES_FLAG\n\nThe constant `RJSF_ADDITONAL_PROPERTIES_FLAG` was removed from `@rjsf/utils`. Use the `RJSF_ADDITIONAL_PROPERTIES_FLAG`\nconstant instead. I.e.:\n\n```ts\nimport { RJSF_ADDITIONAL_PROPERTIES_FLAG } from '@rjsf/utils';\n```\n\n#### UiSchema.classNames\n\nThe `classNames` notation on `UiSchema` was removed. Use the `ui:classNames` notation instead. I.e.:\n\n```json\n{\n \"someField\": {\n \"ui:classNames\": \"someCustomClass\"\n }\n}\n```\n\n#### schema.enumNames\n\nThe custom `enumNames` property support on a JSON Schema that RJSF invented has been removed. Please use the `UiSchema`\nreplacement, `ui:enumNames` instead. I.e.:\n\n```ts\nimport { UiSchema, RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n attendance: {\n title: 'How did you attend the event?',\n enum: ['person', 'phone', 'video'],\n },\n rating: {\n title: 'How would you rate this event?',\n enum: ['0', '1', '2', '3', '4'],\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n attendance: {\n 'ui:enumNames': ['I joined in person', 'I called in using the phone number', 'I joined using the video link'],\n },\n rating: {\n 'ui:enumNames': [\"I did't like it\", 'It was meh', 'It was ok', 'I liked it', 'I loved it'],\n },\n};\n```\n\nUse the `ui:enumNames` in the `UiSchema` instead.\n\n### Other BREAKING CHANGES\n\n#### Primitive field handling in oneOf/anyOf schemas\n\nA bug fix was implemented that changes how primitive fields (boolean, string, number, etc.) are handled when switching between oneOf/anyOf schema options with `mergeDefaultsIntoFormData: \"useDefaultIfFormDataUndefined\"`.\n\n**Previous (buggy) behavior**: Undefined primitive fields were incorrectly set to empty objects `{}` when switching between schema variants.\n\n**New (correct) behavior**: Undefined primitive fields now remain `undefined` or receive proper default values according to their type when switching between schema variants.\n\nThis change fixes [#4709](https://github.com/rjsf-team/react-jsonschema-form/issues/4709) and was implemented in [#4710](https://github.com/rjsf-team/react-jsonschema-form/pull/4710).\n\n**Impact**: If your application was incorrectly relying on undefined primitive fields becoming `{}` objects, you may need to update your form validation or data processing logic to handle proper primitive values or `undefined` instead.\n\n#### Optional array defaulting (POTENTIAL)\n\nA bug fix was implemented that changes how optional arrays are initialized during the `formData` defaulting phase.\n\n**Previous (buggy) behavior**: Optional arrays were initialized to `[]`.\n\n**New (correct) behavior**: Optional arrays are no longer initialized.\n\n**Impact**: If your application was incorrectly relying on optional arrays being initialized this way, you may need to update it to handle the corrected behavior.\n\n#### SchemaField removed Bootstrap 3 classes\n\nIn fixing [#2280](https://github.com/rjsf-team/react-jsonschema-form/issues/2280), the following `Bootstrap 3` classes\n(`form-group`, `has-error` and `has-danger` error classes) were removed from the `classNames` prop passed down to the\n`FieldTemplate`. They were instead moved into the `core` theme's `WrapIfAdditionalTemplate` to ensure that theme was\nunchanged.\n\nAdditionally, the Bootstrap 3 classes `panel`, `panel-default`, `panel-body`, and `form-group` were removed from the\n`MultiSchemaField` component in the `@rjsf/core` package, and moved into the `core` theme's `MultiSchemaFieldTemplate`\nto ensure that the theme was unchanged.\n\nAs a result, the themes (other than `core`) will no longer render these classes.\n\nIf you use a non-`core` theme and were relying on them for in your application's styling or behavior (via css overrides\nperhaps), then you can still use the non-`Bootstrap 3` RJSF marker class (see below) or your specific theme's error classes.\n\n#### Prefixed RJSF template and field marker classes\n\nMany of the `core` RJSF templates and field implementations that are shared across all themes were updated to add the\n`rjsf-` prefix to the marker classes that are being added to the rendered HTML. The following table highlights the old\nand new marker classes. If you were relying on any of these classes, simply do a rename:\n\n| old marker class | new marker class |\n| ------------------------------ | ----------------------------------- |\n| `field` | `rjsf-field` |\n| `field-` | `rjsf-field-` |\n| `field-array` | `rjsf-field-array` |\n| `field-array-of-` | `rjsf-field-array-of-` |\n| `field-array-fixed-items` | `rjsf-field-array-fixed-items` |\n| `field-error` | `rjsf-field-error` |\n| `field-hidden` | `rjsf-field-hidden` |\n| `array-item` | `rjsf-array-item` |\n| `config-error` | `rjsf-config-error` |\n| `array-item-add` | `rjsf-array-item-add` |\n| `array-item-copy` | `rjsf-array-item-copy` |\n| `array-item-move-down` | `rjsf-array-item-move-down` |\n| `array-item-move-up` | `rjsf-array-item-move-up` |\n| `array-item-remove` | `rjsf-array-item-remove` |\n| `object-property-expand` | `rjsf-object-property-expand` |\n| `object-property-remove` | `rjsf-object-property-remove` |\n\n#### optionsList\n\nThe generics ordering on the `optionsList()` function was changed from `` to `` to be consistent with the rest of the APIs.\n\n## New Features\n\n### New types\n\nThe following new types were added to `@rjsf/utils`:\n\n- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array.\n- `ContainerFieldTemplateProps`: The common properties of the two container templates: `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps`\n- `FallbackFieldProps`: The properties passed to the new `FallbackField` component\n- `FallbackFieldTemplate`: The properties passed to the new `FallbackFieldTemplate` component\n- `FieldPathList` - The list of path elements that represents where in the schema a field is located\n- `FieldPathId` - Type describing an id and path used for a field\n- `FoundFieldType`: The interface for the return value of the `findFieldInSchema` function\n- `GlobalFormOptions`: The set of options from the `Form` that will be available on the `Registry` for use in everywhere the `registry` is available.\n- `GridTemplateProps`: The properties that are passed to a `GridTemplate`\n- `MultiSchemaFieldTemplateProps`: The properties that are passed to a `MultiSchemaFieldTemplate`\n- `OptionalDataControlsTemplateProps`: The properties that are passed to a OptionalDataControlsTemplate implementation\n- `TestIdShape`: The interface for the test ID proxy objects that are returned by the `getTestId` utility function\n\n### New non-validator utility functions\n\nMany new or formerly internally private utility functions are available in `@rjsf/utils`:\n\n- `buttonId(id: FieldPathId | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')`: Generates consistent ids for RJSF buttons\n- `getTestIds(): TestIdShape`: Returns an object of test IDs that can only be used in test mode, helpful for writing unit tests for React components\n- `hashObject(object: unknown): string`: Stringifies an `object` and returns the hash of the resulting string\n- `hashString(string: string): string`: Hashes a string into hex format\n- `isFormDataAvailable(formData?: T)(formData?: T): boolean`: Determines whether the given `formData` represents valid form data, such as a primitive type, an array, or a non-empty object\n- `isRootSchema(registry: Registry, schemaToCompare: S): boolean`: Helper to check whether a JSON schema object is the root schema\n- `lookupFromFormContext(regOrFc: Registry | Registry['formContext'], toLookup: string, fallback?: unknown)`: Given a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`\n- `optionalControlsId(id: FieldPathId | string, element: 'Add' | 'Msg' | 'Remove')`: Return a consistent `id` for the optional data controls `element`\n- `shouldRenderOptionalField(registry: Registry, schema: S, required: boolean, uiSchema?: UiSchema): boolean`: Determines if this field should be rendered with the Optional Data Controls UI\n- `sortedJSONStringify(object: unknown): string`: Stringifies an `object`, sorts object fields in consistent order before stringifying it\n- `toFieldPathId(fieldPath: string | number, globalFormOptions: GlobalFormOptions, parentPath?: FieldPathId | FieldPathList, isMultiValue?: boolean)`: Constructs the `FieldPathId` for `fieldPath` and the optional `parentPath`, using `globalFormOptions`\n- `useAltDateWidgetProps(props: WidgetProps): UseAltDateWidgetResult`: which encapsulates the logic needed to render an `AltDateWidget` with optional `time` elements\n- `useDeepCompareMemo(newValue: T): T`: Hook that stores and returns a `T` value. If `newValue` is the same as the stored one, then the stored one is returned, otherwise `newValue` is stored and returned\n- `useFileWidgetProps(value: string | string[] | undefined | null, onChange: (value?: string | null | (string | null)[]) => void, multiple?: boolean): UseFileWidgetPropsResult`: Hook which encapsulates the logic needed to read and convert a `value` of `File` or `File[]` into the props needed by a `FileWidget` implementation.\n\n### New validator-based utility functions\n\nThree new validator-based utility functions are available in `@rjsf/utils`:\n\n- `findFieldInSchema(validator: ValidatorType, rootSchema: S, path: string | string[], schema: S, formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): FoundFieldType`: Finds the field specified by the `path` within the root or recursed `schema`\n- `findSelectedOptionInXxxOf(validator: ValidatorType, rootSchema: S, schema: S, fallbackField: string,xxx: 'anyOf' | 'oneOf', formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): S | undefined`: Finds the option that matches the selector field in the `schema` or undefined if nothing is selected\n- `getFromSchema(validator: ValidatorType, rootSchema: S, schema: S, path: string | string[], defaultValue: T | S, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf): T | S`: Reads the value at `path` within a schema, additionally retrieving `$ref`s as needed to resolve schemas\n\n### Changes to existing utility functions\n\n- `getDefaultFormState()`: Added an optional `initialDefaultsGenerated` boolean flag that indicates whether or not initial defaults have been generated\n- `retrieveSchema()`: Added an optional `resolveAnyOfOrOneOfRefs` boolean flag that causes the internal `resolveAllSchemas()` to resolve `$ref`s inside of the options of `anyOf`/`oneOf` schemas\n - This new optional flag was added to the `SchemaUtilsType` interface's version of `retrieveSchema()` as well.\n- `validationDataMerge()`: Added optional `preventDuplicates` boolean flag that causes the `mergeObjects()` call to receive `preventDuplicates` instead of `true`\n\n### initialFormData prop added to Form\n\nA new `initialFormData` prop was added to `Form` to support providing initial values for an **\"uncontrolled\"** React component.\nAs a result, a small change was made so that `formData` now causes the `Form` to behave as a **\"controlled\"** React component.\n\nThe programmatic `reset()` will ensure that an **\"uncontrolled\"** form is reset back to the `initialFormData` values when triggered.\n\n### setFieldValue() added to Form\n\nA new programmatic function, `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void` was added to the `Form`.\nIt allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a `FieldPathList`.\nTo set the root element, used either `''` or `[]` for the path. Passing undefined will clear the value in the field.\n\n### liveValidate and liveOmit performance improvement\n\nBecause `liveValidate` and `liveOmit` can have serious performance impacts in the `Form`, those flags were updated to add the following new options:\n\n- 'onChange' - Live validate and live omit will happen as part of the `onChange` processing (the same as setting the flag to `true`)\n- 'onBlur' - Live validate and live omit will happen as part of the `onBlur` processing, saving the computations until the user is done inputting data. If any changes to the state occur due to this processing, the `onChange()` event will be sent back to the client with the new data.\n\n> NOTE: Due to this new feature, the old `boolean` options on those two flag has been deprecated. In a future major release, you will only be able to pass `onChange`, `onBlur` to activate the feature or `undefined` to disable it\n\n### Optional Data Controls\n\nRJSF 6.x introduces a new feature that allows developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields.\n\nSee the documentation for [enableOptionalDataFieldForType](../api-reference/uiSchema.md#enableoptionaldatafieldfortype) for more information.\n\n### Dynamic UI Schema for Array Items\n\nRJSF 6.x introduces a new feature that allows dynamic UI schema generation for array items.\nThe `items` property in a `uiSchema` can now accept a function that returns a UI schema based on the array item's data, index, and form context.\n\n```typescript\nconst uiSchema: UiSchema = {\n myArrayField: {\n items: (itemData, index, formContext) => {\n // Return different UI schemas based on item data\n if (itemData?.type === 'special') {\n return { 'ui:widget': 'textarea' };\n }\n return { 'ui:widget': 'text' };\n },\n },\n};\n```\n\nThis feature is fully backward compatible - existing forms using object-based `uiSchema.items` will continue to work without changes.\nSee the [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) documentation for comprehensive examples and usage patterns.\n\n### Custom field `name` generation\n\nRJSF 6.x adds support for customizing how HTML `name` attributes are generated for form fields via the new [`nameGenerator`](../api-reference/form-props.md#namegenerator) prop. This enables proper form data submission to backend frameworks that expect specific naming conventions like bracket notation (`root[tasks][0][title]`) for PHP/Rails or dot notation (`root.tasks.0.title`) for other frameworks.\n\nThe default behavior is unchanged if the prop is not provided.\n\n### Opt-in Fallback UI for unsupported types\n\nRJSF 6.x introduces a new `FallbackField` component that provides a user-friendly UI for unsupported or unrecognized schema types. This new functionality displays a selection box used to choose a JSON primitive type, and a field for the formData that matches the selected type. To use this new feature, which takes the place of the existing `UnsupportedField` component, set the new `useFallbackUiForUnsupportedType` prop to `true` on the `Form` component.\n","isInternal":false,"tokens":11197,"sizeBytes":47963},{"name":"layout-grid.md","path":"packages/docs/docs/usage/layout-grid.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/usage/layout-grid.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Layout Grid\n\nVersion 6 of RJSF introduced a new way of generating forms using the `UiSchema`, via the Layout Grid.\nUnlike the original method of showing each field in the JSON Schema, in order, as they appear hierarchically within the\nnested object hierarchy, the Layout Grid lets you define where each field goes on a grid in any place/order you choose.\nIt even adds the ability to pass additional props to the rendering widget for each element being displayed.\n\nThe Layout Grid takes full advantage of the `UiSchema`'s ability to customize the `ui:field` that is used to render a field\nor collection of fields by providing a new out-of-the-box field implementation called `LayoutGridField` that you can\nassign to the whole of the `schema` or just a piece of it. It also comes with its own \"syntax\" that lets you define\na `row`, a `col`umn, and a set of `columns`. It also provides `condition`al logic that describes how a subset of the grid\ncan be hidden/shown based upon the value(s) of a field. It even supports the inclusion of custom render components that\nare not associated with a field. Finally, there is built-in support for doing a named look up of data within a special\nlocation in the `FormContext`.\n\nSince each theme that RJSF supports has its own unique grid system, the `uiSchema` that one creates for the\n`LayoutGridField` for one theme will most likely not work for any other theme unless two themes have the exact same\ngrid specification props. It also requires that one understand how to use the grid system of the theme and how it\ninterplays with the `LayoutGridField`'s \"syntax\". In other words, it will likely take some experimentation to get the\ngrid looking exactly the way you want it to.\n\nLet's break down how to use the `LayoutGridField` one step at a time.\n\n## Defining the LayoutGridField to reordering rows\n\nThe `LayoutGridField` is designed to be used within the `uiSchema` via the `ui:field` syntax. It must be accompanied by\nthe definition of the grid within the new `ui:layoutGrid` syntax. First let's start with a fairly simple `schema` that\nlooks like:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"person\": {\n \"title\": \"Person Info\",\n \"type\": \"object\",\n \"properties\": {\n \"first\": {\n \"title\": \"First Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n },\n \"middle\": {\n \"title\": \"Middle Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n },\n \"last\": {\n \"title\": \"Last Name\",\n \"minLength\": 1,\n \"maxLength\": 200,\n \"type\": \"string\"\n }\n },\n \"required\": [\"first\", \"last\"]\n }\n }\n}\n```\n\nIf you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII\ndrawing:\n\n```text\nPerson Info\n First Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Middle Name\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Last Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n```\n\nIf you wanted to switch the order of the fields or remove middle name entirely, you could change the JSON schema, which\nis usually not desirable for most users. You could also use the `ui:order` feature and/or `ui:widget: \"hidden\"` in the\n`uiSchema` to accomplish this without changing the schema. And now you can also use the very flexible and powerful\n`LayoutGridField` field in the`uiSchema`.\n\nNow let's add a `uiSchema` that will allow us to change the order of the fields to be `Last Name`, `Middle Name` and `First Name`.\nThis will highlight the first elements of the new \"syntax\"; `ui:layoutGrid` and `ui:row` :\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"children\": [\"person.last\", \"person.middle\", \"person.first\"]\n }\n }\n}\n```\n\nThis results in the following UI using the `core` theme via the `Bootstrap 3` grid system:\n\n```text\n Last Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n Middle Name\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n First Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n```\n\nAs mentioned before, another theme's grid system may render the above example differently. Most likely as three fields\nlined up next to each other. Assume all examples from here on out will be shown using the `core` theme. You may have to\nadjust the `uiSchema` for your theme to achieve the same results.\n\n### `ui:layoutGrid`\n\nThe `LayoutGridField` will do nothing if used as a field without having the `ui:layoutGrid` object as its sibling.\nThis root \"syntax\" keyword defines the structure of how the grid should be laid out for the field. Due to the nature of\nJSON objects, it must contain a single `ui:row` \"syntax\" keyword inside of which the rest of the grid is defined. Providing\na second `ui:row` will create an invalid object.\n\n### `ui:row`, part 1\n\nThe `ui:row` \"syntax\" represents a row of data in the grid. It has, at minimum, a single `children` property that\ndescribes what that row will render. In this first example, the children are the ids of the fields to render in order,\nas single grid elements. There is a second version of this syntax which is identical to the first in behavior:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person.last\", \"person.middle\", \"person.first\"]\n }\n}\n```\n\nHere the array is implicitly assumed to be the `children` property. Let's take a look at another example that will generate\nthe exact same UI. The example below shows what happens when you use the `LayoutGridField` on a sub-object within the\nhierarchy:\n\n```json\n{\n \"person\": {\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"last\", \"middle\", \"first\"]\n }\n }\n}\n```\n\nHere you can see the `person.` prefix on the field ids is no longer necessary. This is because the scope of the field is\nnow the `person` object rather than the whole of the `schema`. You may have noticed from the example UI shown above that\nthe `Person Info` header for the object disappeared. This is because we are no longer iterating through the hierarchy to\nrender the object. Don't worry, there is another new field that was created to support just this use case (see next\nsection).\n\nAlso, if you wanted to entirely remove the `Middle Name` from your form because of a requirements change, you don't have\nto touch the JSON schema anymore. Instead you would just update the `uiSchema` as follows:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person.last\", \"person.first\"]\n }\n}\n```\n\n## LayoutHeaderField\n\nThe `LayoutHeaderField` is another new field built into RJSF v6. Its sole purpose is to render the `title` for a collection\nof grid elements. It will read the `title` using the exact same mechanism as does the regular `Form`; first as `ui:title`\nif specified, then as `schema.title` if specified, then as `name` of the field. In order to restore the `Person Info`\nheader to the example above, we have to make a few additions to the `uiSchema`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": [\"person\", \"person.last\", \"person.middle\", \"person.first\"]\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\n## Defining the LayoutGridField to put the fields in a single row\n\nNow let's say the requirements changed again, and you have to show the first, middle and last name fields in a single row.\nWell, in the past, that would require quite a lot of customizing of RJSF's `core` templates. Now with the `LayoutGridField`\nit's just a matter of updating the `uiSchema` again, this time using more of the new \"syntax\"; `ui:col` and `ui:columns`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n }\n ]\n },\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.first\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.middle\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\n {\n \"name\": \"person.last\"\n }\n ]\n }\n }\n ]\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nPassing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:\n\n```text\nPerson Info\n First Name* Middle Name Last Name*\n +--------------------------+ +--------------------------+ +--------------------------+\n | | | | | |\n +--------------------------+ +--------------------------+ +--------------------------+\n```\n\nThe above example uses the `core` UI theme's `Bootstrap 3` grid classes to make the `Person Info` span 12 columns within\na row and each of the person name fields span 4 columns within a row. It also adds the \"row\" grid class to the outermost\n`ui:row` to make whole UI be part of a grid row.\n\nNow sometimes, depending on the grid system, you don't need to explicitly define both second-level rows, instead\ndepending on the column grid behavior. Luckily the `core` theme's grid system is one of those, so the following UI\nschema will also produce the exact same result.\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"person.first\", \"person.middle\", \"person.last\"]\n }\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nHere is how the `LayoutGridField` \"syntax\" above is used.\n\n### `ui:row`, part 2\n\nAs the above examples show, the `ui:row` object can be nested inside of the `children` of a `ui:row`. This signifies the\nnesting of one row inside another row. It also shows that any additional properties added to the `ui:row` object, in this\ncase the `\"className\": \"row\"` will be spread onto the underlying theme's grid implementation. You may also pass other\nproperties, such as `style` blocks or, in the case of other themes, properties that will affect the underlying grid system\ncomponents.\n\n### `ui:col`\n\nThe `ui:col` \"syntax\" represents a single column of data in the grid. Like `ui:row` this syntax will spread the\n`\"className\": \"col-xs-12\"` and `\"className\": \"col-xs-4\"` properties onto the underlying theme's grid implementation, as\nwell as any other properties, such as `style` blocks, etc. In its most compact form, the `ui:col` can be written as\n`{ \"ui:col\": [\"person\"] }`, in a manner similar to `ui:row` where the array is implicitly assumed to be the `children`\nproperty.\n\nIn its most expanded form, the `ui:col` contains an array of `children` in the form of objects with `\"name\": \"\"`\nas the minimum required property. Any additional properties added within the object will be passed along to the\nunderlying `Widget` implementation in the `ui:options` portion of the `uiSchema`. This allows for fine-tuning any\nout-of-the-box or custom widgets. Let's take a look at an example where the `Middle Name` column hides its label adding\na margin to take up the space once occupied by the label, and is reduced in size relative to the `First Name` and\n`Last Name`:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"person\"]\n }\n }\n ]\n },\n {\n \"ui:row\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-5\",\n \"children\": [\"person.first\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"style\": {\n \"margin-top\": \"25px\"\n },\n \"children\": [\n {\n \"name\": \"person.middle\",\n \"label\": false\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-5\",\n \"children\": [\"person.last\"]\n }\n }\n ]\n }\n ]\n }\n },\n \"person\": {\n \"ui:field\": \"LayoutHeaderField\"\n }\n}\n```\n\nPassing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:\n\n```text\nPerson Info\n First Name* Last Name*\n +--------------------------------+ +---------+ +--------------------------------+\n | | | | | |\n +--------------------------------+ +---------+ +--------------------------------+\n```\n\n### `ui:columns`\n\nThe `ui:columns` \"syntax\" represents a group of columns in the grid. Like `ui:row` and `ui:col` this syntax will spread\nthe properties onto the underlying theme's grid implementation (in an earlier example `\"className\": \"col-xs-4\"` ), as\nwell as any other properties, such as `style` blocks, etc. It is short-hand notation for rendering a group of columns\nall with the same grid system properties. As shown in the above examples, the set of three `ui:col` definitions for\nfirst, middle and last names are the same as the single `ui:columns` definition with all three listed as children.\n\nIn its most compact form, the `ui:col` can be written as `{ \"ui:columns\": [\"person.first\", \"person.last\"] }`, in a\nmanner similar `ui:row` and `ui:col` where the array is implicitly assumed to be the `children` property. The\n`ui:columns` syntax also supports `children` in the form of objects with `\"name\": \"\"` as the minimum required\nproperty, passing along any additional properties to the underlying `Widget` as `ui:options`.\n\n## GridTemplate\n\nThe concept of a theme's grid system has been mentioned several times in the documentation so far. Remember that each\ntheme's grid system is unique to that theme. It is essential to understand how your theme's grid system works in order\nto know how to write the `uiSchema` to get the grid layout you want for your fields.\n\nIf you want to know how your theme implements its grid system, take a look at the `GridTemplate` source code. You may\nalso override your theme's `GridTemplate` with your own to fine tune how the properties you pass to the `ui:row`, `ui:col`,\nand `ui:columns` are handled. Each `ui:row` and `ui:col` will render a `GridTemplate` passing `column: false` for `ui:row`\nand `column: true` for `ui:col`. The `ui:columns` syntax will render a `GridTemplate` around each of the `children`. Any\nadditional properties besides `children` will be directly passed to the `GridTemplate`.\n\n## Defining the LayoutGridField to render fields conditionally\n\nThe `GridLayoutField` also supports the concept of conditionally rendering a set of fields based upon the value(s) of\nanother field within the `formData`. Because the layout grid works on a field-by-field basis, it treats the render of a\n`anyOf` or `oneOf` field differently. It presents to the user ONLY the checkbox group (anyOf) or radio button group\n(oneOf). In order to render any nested fields associated with them, one has to explicitly specify them in the `uiSchema`.\n\nFor the purposes of demonstrating the feature, let's work with a `schema` containing a fairly simple `oneOf` field with\nnested objects:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"title\": \"My Name\",\n \"type\": \"string\"\n },\n \"favorite\": {\n \"title\": \"My Favorite Shape\",\n \"discriminator\": {\n \"propertyName\": \"shape\"\n },\n \"oneOf\": [\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Line\",\n \"type\": \"string\",\n \"const\": \"line\"\n },\n \"length\": {\n \"title\": \"Line Length\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"length\"]\n },\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Circle\",\n \"type\": \"string\",\n \"const\": \"circle\"\n },\n \"radius\": {\n \"title\": \"Radius\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"radius\"]\n },\n {\n \"type\": \"object\",\n \"properties\": {\n \"shape\": {\n \"title\": \"Polygon\",\n \"type\": \"string\",\n \"const\": \"polygon\"\n },\n \"sides\": {\n \"title\": \"# of Sides\",\n \"type\": \"number\",\n \"minimum\": 3,\n \"default\": 3\n },\n \"length\": {\n \"title\": \"Side Length\",\n \"type\": \"number\"\n }\n },\n \"required\": [\"shape\", \"sides\"]\n }\n ]\n }\n },\n \"required\": [\"name\"]\n}\n```\n\nIf you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII\ndrawing:\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 1 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Line*\n +--------------------------------------------------------------------------+\n | line |\n +--------------------------------------------------------------------------+\n\n Line Length*\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\nThe second input is a dropdown with the values `My Favorite Shape option 1`, `My Favorite Shape option 2` and\n`My Favorite Shape option 3`. When you change the dropdown the other fields below it change to match the objects within\nthe `oneOf` as follows:\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 2 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Circle*\n +--------------------------------------------------------------------------+\n | cirle |\n +--------------------------------------------------------------------------+\n\n Radius*\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\nand\n\n```text\nMy Favorite Shape\n My Name*\n +------------------------------------------------------------------------------+\n | |\n +------------------------------------------------------------------------------+\n\n My Favorite Shape\n +--------------------------------------------------------------------------+\n | My Favorite Shape option 3 v |\n +--------------------------------------------------------------------------+\n\n Favorite\n Polygon*\n +--------------------------------------------------------------------------+\n | polygon |\n +--------------------------------------------------------------------------+\n\n # of Sides*\n +--------------------------------------------------------------------------+\n | 3 |\n +--------------------------------------------------------------------------+\n\n Side Length\n +--------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------+\n```\n\n> NOTE: The `LayoutGridField` does not currently work with a root-level `anyOf` or `oneOf` object since it requires that\n> everything being displayed in have a field id and they don't.\n\nNow let's add a `uiSchema` that will allow us to create a much more pleasing UI where the dropdown contains the actual\n`oneOf` values and the fields all show up on the side of the dropdown:\n\n```json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"name\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite\"]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"line\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.length\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"circle\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.radius\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"polygon\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:columns\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.sides\", \"favorite.length\"]\n }\n }\n ]\n }\n }\n ]\n }\n },\n \"favorite\": {\n \"ui:widget\": \"select\"\n }\n}\n```\n\nThis results in the following UI using the `core` theme via the `Bootstrap 3` grid system:\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* Line Length*\n +--------------------------+ +--------------------------+\n | Line v | | |\n +--------------------------+ +--------------------------+\n```\n\nand\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* Radius*\n +--------------------------+ +--------------------------+\n | Circle v | | |\n +--------------------------+ +--------------------------+\n```\n\nand\n\n```text\n My Name*\n +--------------------------------------------------------------------------------------+\n | |\n +--------------------------------------------------------------------------------------+\n\n My Favorite Shape* # of Sides* Side Length\n +--------------------------+ +--------------------------+ +--------------------------+\n | Polygon v | | 3 | | |\n +--------------------------+ +--------------------------+ +--------------------------+\n```\n\nAs mentioned before, another theme's grid system may render the above example differently.\n\n### `ui:condition`\n\nThe `ui:condition` \"syntax\" represents conditional rendering of data in the grid. The condition has four required\nproperties, `field`, `value`, `operator` and `children`. Let's talk about each in turn.\n\n- `field`: The dotted-path name of a leaf-level field that makes up the left-side of the condition, used to get data from the `formData`\n- `value`: A single value or a list of values that make up the right-side of the condition\n- `operator`: One of the following three options that controls how the left and right sides of the condition are compared\n 1. `all`: This operator will pass when the right-side and left-side contains all the same value(s)\n 2. `some`: This operator will pass when the right-side and left-side contain as least one value in common\n 3. `none`: This operator will pass when the right-side and left-side do not contain any values in common\n- `children`: The list of `ui:row`, `ui:col` or `ui:columns` definitions to display when the condition is true\n\nIn the example above, when the `favorite.shape` field value is `line` then the `favorite.length` field is displayed in\nthe grid spanning 4 columns. When it is `circle`, then `favorite.radius` is displayed in the grid spanning 4 columns.\nWhen it is `polygon`, then `favorite.sides` and `favorite.length` are displayed in the grid, each spanning 4 columns.\n\nWe leave it up to the reader to create other examples that use different `operator`s.\n\n## Other capabilities of the LayoutGridField\n\nThere are a few more small features that the `LayoutGridField` supports. First, there is a `FormContext` named lookup\ncapability that allows one to provide a name-mapped set of strings, components and functions in the `FormContext` inside\nof a well-known location, `layoutGridLookupMap` and then reference those names within the `uiSchema`. Second, the grid\nrendering code recognizes an alternate \"syntax\" for the objects in `children` arrays in order to display any random\nReact element within a grid. Below are examples of them both.\n\n### Named lookup support for className\n\nSince some themes, like `mui`, support CSS-in-JS class names, one cannot hard-code the actual `className` in the\n`uiSchema` easily. That is where the name-mapped information in the `FormContext` comes into play. Let's assume that\nyou are using a theme like `mui` and you need to style a `Grid` using CSS-in-JS you could do something like the following:\n\n```json uiSchema.json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"GridStyle anotherClass\",\n \"children\": [\"person.last\", \"person.first\"]\n }\n }\n}\n```\n\n```tsx\nimport { styled, Grid } from '@mui/material';\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the Person Info schema from above\nimport schema from './personSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './uiSchema.json';\n\nconst css = {\n STYLED_GRID: 'StyledGrid',\n};\n\n// Define the style\nconst StyledGrid = styled(Grid)`\n ${`& .${css.STYLED_GRID}`} {\n p {\n /* Override default presentation of

tags within a grid */\n font-weight: bold\n color: dark-purple !important;\n }\n }\n`;\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n GridStyle: css.STYLED_GRID,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nAs you can see in the example, we've created a `FormContext` that has the named-lookup map containing the\n`css.STYLED_GRID` object mapped to `GridStyle`. In the `uiSchema` we then add `GridStyle` as the `className` for the\ngrid rows. Under the hood, the `LayoutGridField` automatically goes through the `className` props and does a lookup of\neach class name in the `FormContext`, replacing the `GridStyle` with the generated `css.GRID_STYLE` name. And because the\nother class name in the example, `anotherClass`, is not mapped in the named-lookup map, it will passed to the\n`GridTemplate` as is. In summary, if the CSS-in-JS class is called `StyledGrid-1asd123` then the `className` property\npassed to the `GridTemplate` will be `\"StyledGrid-1asd123 anotherClass\"`.\n\n### Rendering a custom React element in the grid\n\nBecause you have full control of how you layout your components in the grid, what do you do when you want to add an\nelement to your presentation that isn't directly associated with a `schema`, like say an image? Well, that is actually\nreally easy using a variant of the \"syntax\" for a `children` node in the `uiSchema`. Here's how:\n\n```json shapeUiSchema.json\n{\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": {\n \"className\": \"row\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-12\",\n \"children\": [\"name\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite\"]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"line\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"LineImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.length\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"circle\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"CircleImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-xs-4\",\n \"children\": [\"favorite.radius\"]\n }\n }\n ]\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"favorite.shape\",\n \"value\": \"polygon\",\n \"operator\": \"all\",\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"col-xs-2\",\n \"children\": [\n {\n \"name\": \"\",\n \"render\": \"PolygonImageComponent\",\n \"size\": \"small-size\"\n }\n ]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-xs-3\",\n \"children\": [\"favorite.sides\", \"favorite.length\"]\n }\n }\n ]\n }\n }\n ]\n }\n },\n \"favorite\": {\n \"ui:widget\": \"select\"\n }\n}\n```\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './shapeUiSchema.json';\n// Now import my 3 shape React components\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n LineImageComponent: LineShape,\n CircleImageComponent: CircleShape,\n PolygonImageComponent: PolygonShape,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nAs you can see in the example, we've created a `FormContext` that contains the named-lookup map containing the three\ncomponents (`LineShape`, `CircleShape`, `PolygonShape`) mapped to the lookup keys `LineImageComponent`,\n`CircleImageComponent`, `PolygonImageComponent` respectively. In the `uiSchema`, we use the optional `render` property\nin the `children` object \"syntax\" to define the lookup name of the component we want to use. The `LayoutGridField` will\nthen do a lookup of the `render` string. If you forget to add the `formContext` or the mapping in the `LOOKUP_NAME_MAP`\nthen nothing will be rendered.\n\nIf you provide an empty string as the `name` along with the `render`, then your component will be rendered only with any\nadditional properties passed in the `children` object. If you provide a `name` that matches a field in the `schema`,\nthen the `render` component won't be used. Otherwise, the `render` component will be passed all of the `FieldProp`s,\nincluding the `schema`, `uiSchema`, `fieldPathId`, `errorSchema`, `formData`, `registry`, etc.\n\nSo our example will render the `LineShape` component with `size: 'small-size'` in the second column between the\n`My Favorite Shape` dropdown and the `Line Length` input. Also, it will render the `CircleShape` component with\n`size: 'small-size'` in the second column between the `My Favorite Shape` dropdown and the `Radius` input. Finally,\nit will render the `PolygonShape` component with `size: 'small-size'` in the second column between the\n`My Favorite Shape` dropdown and the `# of Sides` input.\n\n#### Passing components directly in uiSchema\n\nThe `render` \"syntax\" also works if you have an object-based `uiSchema` and pass the component function directly rather\nthan use a named lookup. For example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Now import my 3 shape React components that understand how to extract the props from `formData`\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\nconst uiSchema: UiSchema = {\n 'ui:field': 'LayoutGridField',\n 'ui:layoutGrid': {\n 'ui:row': {\n className: 'row',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: ['name'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite'],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'line',\n operator: 'all',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite.length'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'lineImage',\n render: LineShape,\n dataPath: 'favorite.length',\n },\n ],\n },\n },\n ],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'circle',\n operator: 'all',\n children: [\n {\n 'ui:col': {\n className: 'col-xs-4',\n children: ['favorite.radius'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'circleShape',\n render: CircleShape,\n dataPath: 'favorite.radius',\n },\n ],\n },\n },\n ],\n },\n },\n {\n 'ui:condition': {\n field: 'favorite.shape',\n value: 'polygon',\n operator: 'all',\n children: [\n {\n 'ui:columns': {\n className: 'col-xs-4',\n children: ['favorite.sides', 'favorite.length'],\n },\n },\n {\n 'ui:col': {\n className: 'col-xs-12',\n children: [\n {\n name: 'polygonShape',\n render: PolygonShape,\n dataPaths: ['favorite.sides', 'favorite.length'],\n },\n ],\n },\n },\n ],\n },\n },\n ],\n },\n },\n favorite: {\n 'ui:widget': 'select',\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nLet's assume that the `LineShape`, `CircleShape` and `PolygonShape` components configured above use the `dataPath[s]`\nproperty to extract the fields from the `formData` that is being passed to them in order to display the exact size of\nthe shape. The grid above will render the `*Shape` components in a 12-wide column below the field inputs.\n\n### Other named lookup situations\n\nOther `children` properties also do named lookups. In the `shapeUiSchema.json` example above, if the `*Shape` components\nare upgraded to change the input of the `size` prop to have newer values, one could use the `FormContext` to map the\n`small-size` value to a newer value. For example, if you wanted to use the new `medium` value for the `size` prop, or\nif you wanted to programmatically control which size to use outside of the `Form` you could update the example as\nfollows:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// Import the My Favorite Shape schema from above section\nimport schema from './shapeSchema.json';\n// Import the UI Schema from the file above\nimport uiSchema from './shapeUiSchema.json';\n// Now import my 3 shape React components\nimport { LineShape, CircleShape, PolygonShape } from './myShapes';\n\nconst MEDIUM_SIZE = 'medium';\n\n// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses\nconst formContext: FormContextType = {\n [LOOKUP_MAP_NAME]: {\n LineImageComponent: LineShape,\n CircleImageComponent: CircleShape,\n PolygonImageComponent: PolygonShape,\n 'small-size': MEDIUM_SIZE,\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## So much flexibility available\n\nThese examples are just a tiny fraction of the ways the `LayoutGridField` can be used. Remember, understand the theme's\ngrid system and the \"syntax\" described above and [here](../api-reference/LayoutGridField.md). Play around, you can build\njust about any UI you want and still have it populate the JSON schema's `formData`!\n\n**ENJOY!!**\n","isInternal":false,"tokens":8847,"sizeBytes":42266},{"name":"themes.md","path":"packages/docs/docs/usage/themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/usage/themes.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Themes\n\nBy default, this library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics,\nmeaning that you must load the Bootstrap stylesheet on the page to view the form properly. You can use another theme by importing one of the packages listed below.\n\n## Supported themes\n\n| Theme Name | Status | Package Name / Link |\n| --------------------- | --------- | ----------------------- |\n| antd | Published | `@rjsf/antd` |\n| Chakra UI | Published | `@rjsf/chakra-ui` |\n| Bootstrap 3 (default) | Published | `@rjsf/core` |\n| fluentui-rc | Published | `@rjsf/fluentui-rc` |\n| mantine | Published | `@rjsf/mantine` |\n| material-ui | Published | `@rjsf/mui` |\n| PrimeReact | Published | `@rjsf/primereact` |\n| react-bootstrap | Published | `@rjsf/react-bootstrap` |\n| Semantic UI | Published | `@rjsf/semantic-ui` |\n| shadcn | Published | `@rjsf/shadcn` |\n\n## Using themes\n\nTo use a theme from a package, just import the `` component from that package. For example, to use the Material UI form,\nfirst install both `@rjsf/core` and `@rjsf/mui`. Then you can import the form by doing:\n\n```ts\nimport Form from '@rjsf/mui';\n```\n\nEach theme renders against its own UI framework, so the framework's stylesheet has to be loaded for the form to look\nright. `@rjsf/shadcn` in particular carries no styling of its own: it expects your application to build Tailwind and\nscan the package for class names, or to import one of its prebuilt stylesheets. See the\n[`@rjsf/shadcn` README](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/shadcn/README.md#theming)\nfor both routes.\n\nIf you would like to contribute a theme with a new UI framework, please develop the theme using the `withTheme` component described in [Theme Customization](../advanced-customization/custom-themes.md) and make a PR!\n\nYou can also use the uiSchema to add custom CSS class names to your form.\n\n## Customizing with other frameworks\n\nThe default theme is bootstrap 3. In order to use another theme, you must first install `@rjsf/core`.\n\nFor example, to use the standard bootstrap 3 form, you can run:\n\n```ts\nimport Form from '@rjsf/core';\n```\n\nTo use the material-ui form, you should first install both `@rjsf/core` and `@rjsf/material-ui`. Then, you can run:\n\n```ts\nimport Form from '@rjsf/material-ui';\n```\n\nFor more information on how to create a custom theme, see documentation on the `withTheme` component.\n","isInternal":false,"tokens":655,"sizeBytes":2630},{"name":"validation.md","path":"packages/docs/docs/usage/validation.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/usage/validation.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Validation\n\nWhen the form is submitted, the form data is validated to conform to the given JSON schema;\n\nAs of version 5, as a result of decoupling the validation implementation from the `Form`, a `validator` implementation is required to be passed to all `Form`s.\nReact Json Schema Form provides a default `@rjsf/validator-ajv8` implementation that uses version 8 of the [ajv](https://github.com/ajv-validator/ajv) validator.\nThe error messages generated by this new validator differ from those provided by the original validator due to it using a newer version.\nIf you depend on having specifically formatted messages, then using this validator would constitute a breaking change for you.\n\nIt is also possible for you to provide your own implementation if you desire, as long as it fulfills the `ValidatorType` interface specified in `@rjsf/utils`.\n\n## API documentation\n\nThe documentation for the APIs associated with the AJV 8 validator package can be found [here](../api-reference/validator-ajv8.md)\n\n## Precompiled validators\n\nIn 5.7.0, support for precompiled validators was added to the `@rjsf/validator-ajv8` package.\nThe main use case for this is to overcome issues with `unsafe-eval` warnings from the browser caused by strict Content Security Policy settings.\nSee the [Standalone Validation Code](https://ajv.js.org/standalone.html) section of the AJV documentation for more details about precompiled validators.\n\nDue to how RJSF uses the AJV validator in determining `anyOf/oneOf` selections and how it resolves dependencies, if-then-else and references ($ref) in schemas via the `retrieveSchema()` utility method, RJSF provides its own schema compilation API built on-top-of the one provided by AJV 8.\nIf you are wanting to use a precompiled validator, two steps are required:\n\n1. Precompiling the schema into a set of validator functions\n2. Providing those precompiled validator functions to a `ValidatorType` implementation in the `Form`\n\n### Schema precompilation\n\nThe first step in the process is to compile a schema into a set of validator functions that are saved into a commonJS-based Javascript file.\nThe `@rjsf/validator-ajv8` package exports the `compileSchemaValidators()` function that does this.\nIt is expected that this function will be used in a manner similar to the following:\n\n```cjs\nconst compileSchemaValidators = require('@rjsf/validator-ajv8/compileSchemaValidators').default;\nconst yourSchema = require('path_to/yourSchema'); // If your schema is a js file\n\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.js');\n```\n\nIf you are currently using the `customizeValidator()` function to provide `additionalMetaSchemas`, `customFormats`,\n`ajvOptionsOverrides` and/or `ajvFormatOptions` then you can pass those in as the optional third parameter to the\n`compileSchemaValidators()` function in a manner similar to:\n\n```cjs\nconst { compileSchemaValidators } = require('@rjsf/validator-ajv8');\nconst yourSchema = require('path_to/yourSchema.json'); // If your schema is a json file\n\nconst options = {\n additionalMetaSchemas: [require('ajv/lib/refs/json-schema-draft-06.json')],\n customFormats: { 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/, 'area-code': /\\d{3}/ },\n ajvOptionsOverrides: {\n $data: true,\n verbose: true,\n },\n ajvFormatOptions: {\n mode: 'fast',\n },\n};\n\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.js', options);\n```\n\nIt is highly recommended to create a `compileYourSchema.js` file (or what ever name you want) with code similar to what is shown above and then, using node, run the code as follows:\n\n```\nnode compileYourSchema.js\n```\n\n> NOTE: You must have your schema provided within a file that can be parsed and turned into the set of precompiled validator functions.\n\n> Additional Note: If you are using Webpack or NextJS and are encountering an issue resolving `fs` during development, consult this [blog post](https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs) for how to solve the issue.\n\n### Using the precompiled validator\n\nAfter you have completed step 1 having generated your precompiled schema functions into the `yourCompiledSchema.js` output file (or whatever you called it), then you need to create a `ValidatorType` implementation from it to use in the `Form`.\nThe `@rjsf/validator-ajv8` package exports the `createPrecompiledValidator()` function for this.\nHere is an example of how to use your precompiled validator with your `Form`:\n\n```tsx\nimport { useMemo } from 'react';\nimport { createPrecompiledValidator, ValidatorFunctions } from '@rjsf/validator-ajv8';\nimport Form, { FormProps } from '@rjsf/core'; // Or whatever theme you use\n\nimport yourSchema from 'path_to/yourSchema'; // This needs to be the same file that was precompiled\nimport * as precompiledValidatorFns from 'path_to/yourCompiledSchema';\n\nfunction MyForm(props: Omit) {\n // Memoize the validator to avoid rerenders\n const validator = useMemo(\n () => createPrecompiledValidator(precompiledValidatorFns, yourSchema),\n [validatorFns, yourSchema],\n );\n\n return ;\n}\n\nrender(, document.getElementById('app'));\n```\n\n### Dynamically pre-compiling validators\n\nFor more advanced cases when schema needs to be precompiled on request - `compileSchemaValidatorsCode` can be used.\n\n```ts\nimport { compileSchemaValidatorsCode } from '@rjsf/validator-ajv8/compileSchemaValidators';\n\nconst code = compileSchemaValidatorsCode(schema, options);\n```\n\nFor the most part it is the same as `compileSchemaValidators`, but instead of writing the file - it returns generated code directly.\n\nTo use it on browser side - some modifications are needed to provide runtime dependencies in generated code needs to be provided.\n\nExample implementation of it:\n\n```tsx\nimport type { ValidatorFunctions } from '@rjsf/validator-ajv8';\n\nimport ajvRuntimeEqual from 'ajv/dist/runtime/equal';\nimport {\n parseJson as ajvRuntimeparseJson,\n parseJsonNumber as ajvRuntimeparseJsonNumber,\n parseJsonString as ajvRuntimeparseJsonString,\n} from 'ajv/dist/runtime/parseJson';\nimport ajvRuntimeQuote from 'ajv/dist/runtime/quote';\n// import ajvRuntimeRe2 from 'ajv/dist/runtime/re2';\nimport ajvRuntimeTimestamp from 'ajv/dist/runtime/timestamp';\nimport ajvRuntimeUcs2length from 'ajv/dist/runtime/ucs2length';\nimport ajvRuntimeUri from 'ajv/dist/runtime/uri';\nimport * as ajvFormats from 'ajv-formats/dist/formats';\n\n// dependencies to replace in generated code, to be provided by at runtime\nconst validatorsBundleReplacements: Record = {\n // '': ['', ],\n 'require(\"ajv/dist/runtime/equal\").default': ['ajvRuntimeEqual', ajvRuntimeEqual],\n 'require(\"ajv/dist/runtime/parseJson\").parseJson': ['ajvRuntimeparseJson', ajvRuntimeparseJson],\n 'require(\"ajv/dist/runtime/parseJson\").parseJsonNumber': ['ajvRuntimeparseJsonNumber', ajvRuntimeparseJsonNumber],\n 'require(\"ajv/dist/runtime/parseJson\").parseJsonString': ['ajvRuntimeparseJsonString', ajvRuntimeparseJsonString],\n 'require(\"ajv/dist/runtime/quote\").default': ['ajvRuntimeQuote', ajvRuntimeQuote],\n // re2 by default is not in dependencies for ajv and so is likely not normally used\n // 'require(\"ajv/dist/runtime/re2\").default': ['ajvRuntimeRe2', ajvRuntimeRe2],\n 'require(\"ajv/dist/runtime/timestamp\").default': ['ajvRuntimeTimestamp', ajvRuntimeTimestamp],\n 'require(\"ajv/dist/runtime/ucs2length\").default': ['ajvRuntimeUcs2length', ajvRuntimeUcs2length],\n 'require(\"ajv/dist/runtime/uri\").default': ['ajvRuntimeUri', ajvRuntimeUri],\n // formats\n 'require(\"ajv-formats/dist/formats\")': ['ajvFormats', ajvFormats],\n};\n\nconst regexp = new RegExp(\n Object.keys(validatorsBundleReplacements)\n .map((key) => key.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'))\n .join('|'),\n 'g',\n);\n\nfunction wrapAjvBundle(code: string) {\n return `function(${Object.values(validatorsBundleReplacements)\n .map(([name]) => name)\n .join(', ')}){\\nvar exports = {};\\n${code.replace(\n regexp,\n (req) => validatorsBundleReplacements[req][0],\n )};\\nreturn exports;\\n}`;\n}\n\nconst windowValidatorOnLoad = '__rjsf_validatorOnLoad';\nconst schemas = new Map<\n string,\n { promise: Promise; resolve: (result: ValidatorFunctions) => void }\n>();\nif (typeof window !== 'undefined') {\n // @ts-ignore\n window[windowValidatorOnLoad] = (loadedId: string, fn: (...args: unknown[]) => ValidatorFunctions) => {\n const validator = fn(...Object.values(validatorsBundleReplacements).map(([, dep]) => dep));\n let validatorLoader = schemas.get(loadedId);\n if (validatorLoader) {\n validatorLoader.resolve(validator);\n } else {\n throw new Error(`Unknown validator loaded id=\"${loadedId}\"`);\n }\n };\n}\n\n/**\n * Evaluate precompiled validator in browser using script tag\n * @param id Identifier to avoid evaluating the same code multiple times\n * @param code Code generated server side using `compileSchemaValidatorsCode`\n * @param nonce nonce attribute to be added to script tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce#using_nonce_to_allowlist_a_script_element)\n */\nexport function evaluateValidator(id: string, code: string, nonce: string): Promise {\n let maybeValidator = schemas.get(id);\n if (maybeValidator) return maybeValidator.promise;\n let resolveValidator: (result: ValidatorFunctions) => void;\n const validatorPromise = new Promise((resolve) => {\n resolveValidator = resolve;\n });\n schemas.set(id, {\n promise: validatorPromise,\n resolve: resolveValidator!,\n });\n\n const scriptElement = document.createElement('script');\n\n scriptElement.setAttribute('nonce', nonce);\n scriptElement.text = `window[\"${windowValidatorOnLoad}\"](\"${id}\", ${wrapAjvBundle(code)})`;\n\n document.body.appendChild(scriptElement);\n return validatorPromise;\n}\n```\n\nFrom React component this can be used as following:\n\n```tsx\nlet [precompiledValidator, setPrecompiledValidator] = React.useState();\nReact.useEffect(() => {\n evaluateValidator(\n schemaId, // some schema id to avoid evaluating it multiple times\n code, // result of compileSchemaValidatorsCode returned from the server\n nonce, // nonce script tag attribute to allow this ib content security policy for the page\n ).then(setPrecompiledValidator);\n}, [entityType.id]);\n\nif (!precompiledValidator) {\n // render loading screen\n}\nconst validator = createPrecompiledValidator(precompiledValidator, schema);\n```\n\n### Precompiled validators with `@rjsf/validator-ata`\n\n`@rjsf/validator-ata` has the same two functions. Compile the schema in a Node script:\n\n```cjs\nconst compileSchemaValidators = require('@rjsf/validator-ata/compileSchemaValidators').default;\nconst yourSchema = require('path_to/yourSchema.json');\n\n// The third argument takes the options customizeValidator() takes, with the limits listed below.\ncompileSchemaValidators(yourSchema, 'path_to/yourCompiledSchema.cjs', {\n customFormats: { 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/ },\n});\n```\n\nThen use it in the app:\n\n```tsx\nimport { createPrecompiledValidator, type ValidatorFunctions } from '@rjsf/validator-ata';\nimport yourSchema from 'path_to/yourSchema.json'; // The same schema that was precompiled\nimport precompiledValidatorFns from 'path_to/yourCompiledSchema.cjs';\n\nconst validator = createPrecompiledValidator(precompiledValidatorFns as ValidatorFunctions, yourSchema);\n```\n\nThings to know:\n\n- `customFormats` and `ataOptionsOverrides` apply at compile time. Custom formats must be a `RegExp` or a pattern string: a function cannot be written into the generated file and is rejected.\n- `additionalMetaSchemas` and `ataOptionsOverrides.schemas` that have an `$id` are compiled into the generated file, so a custom meta-schema named in `$schema` applies there too. The official json-schema.org meta-schemas are left out, since ata already knows them. Entries without an `$id` are ignored with a warning: ata requires one, so `customizeValidator()` throws for them.\n- `extenderFn` and the `ataOptionsOverrides` keys `coerceTypes`, `removeAdditional` and `keywords` cannot be carried into the generated file. They are ignored with a warning (once per process), and the generated file and the runtime validator may then disagree, in either direction: a dropped keyword lets data through that the runtime validator rejects, and a dropped `coerceTypes` rejects data it accepts.\n- The generated file never fills in `default` values. The runtime validator does (`useDefaults` is on by default in ata), so for a required field that is missing but has a `default`, the runtime validator fills it in and accepts, while the generated file rejects. The form fills in defaults itself (`getDefaultFormState`), so this shows only for data that does not come from the form.\n- Pass `suppressDuplicateFiltering` to `createPrecompiledValidator()`. Passing it to the compile step has no effect and logs a warning.\n- The generated file imports nothing, so `ata-validator` is not in your bundle, as long as the app imports only `createPrecompiledValidator` (and types). Importing the default export, `customizeValidator` or `ATAValidator` brings the runtime validator back.\n- The generated file is CommonJS, like the one from `@rjsf/validator-ajv8`. Webpack, Rollup and production Vite builds handle it. Vite's dev server does not convert CommonJS files inside your source folder.\n- The file has no type declarations. With TypeScript, cast it to `ValidatorFunctions` as above and add `declare module '*.cjs';` to a `.d.ts` file, or enable `allowJs`.\n- Run the compile step again when the schema changes.\n- To get the code as a string instead of a file, use `compileSchemaValidatorsCode(schema, options)` from `@rjsf/validator-ata/compileSchemaValidators`. The code imports nothing, so unlike the ajv8 example above it needs no runtime dependencies replaced.\n\n## Live validation\n\nBy default, form data are only validated when the form is submitted or when a new `formData` prop is passed to the `Form` component.\n\nYou can enable live form data validation by passing a `liveValidate` prop to the `Form` component, and set it to `true`. Then, every time a value changes within the form data tree (e.g. the user entering a character in a field), a validation operation is performed, and the validation results are reflected into the form state.\n\nBe warned that this is an expensive strategy, with possibly strong impact on performances.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: ['string'],\n const: 'test',\n};\n\nconst formData = 'a';\n\nrender(, document.getElementById('app'));\n```\n\n## Validate form programmatically\n\nIt is possible to programmatically validate a form using the `validateForm()` function on `Form`.\nAdd a `ref` to your `Form` component and call the `validateForm()` method to validate the form programmatically.\nThe `validateForm()` method returns true if the form is valid, false otherwise.\nIf you have provided an `onError` callback it will be called with the list of errors when the `validatorForm()` method returns false.\n\n```tsx\nimport { createRef } from 'react';\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst formRef = createRef();\nconst onError = (errors) => alert(errors);\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n\nif (formRef.current.validateForm()) {\n alert('Form is valid');\n}\n```\n\n## HTML5 Validation\n\nBy default, the form uses HTML5 validation. This may cause unintuitive results because the HTML5 validation errors (such as when a field is `required`) may be displayed before the form is submitted, and thus these errors will display differently from the react-jsonschema-form validation errors. You can turn off HTML validation by setting the `noHtml5Validate` to `true`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n required: true,\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Custom validation rules\n\nForm data is always validated against the JSON schema.\n\nBut it is possible to define your own custom validation rules that will run in addition to (and after) the `validator` implementation.\nThis is especially useful when the validation depends on several interdependent fields.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nfunction customValidate(formData, errors, uiSchema, errorSchema) {\n if (formData.pass1 !== formData.pass2) {\n errors.pass2.addError(\"Passwords don't match\");\n }\n return errors;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n pass1: { type: 'string', minLength: 3 },\n pass2: { type: 'string', minLength: 3 },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n> Notes:\n>\n> - The `customValidate()` function must implement the `CustomValidator` interface found in `@rjsf/utils`.\n> - The `customValidate()` function must **always** return the `errors` object received as second argument.\n> - The `customValidate()` function is called **after** the JSON schema validation.\n> - The `customValidate()` function is passed the `uiSchema` as the third argument. This allows the `customValidate()` function to be able to derive additional information from it for generating errors.\n> - The `customValidate()` function is passed the `errorSchema` as the fourth argument. This allows the `customValidate()` function to be able to access errors raised by JSON schema validation.\n\n## Custom error messages\n\nValidation error messages are provided by the JSON Schema validation by default.\nIf you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nfunction transformErrors(errors, uiSchema) {\n return errors.map((error) => {\n if (error.name === 'pattern') {\n error.message = 'Only digits are allowed';\n }\n return error;\n });\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n onlyNumbersString: { type: 'string', pattern: '^\\\\d*$' },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n> Notes:\n>\n> - The `transformErrors()` function must implement the `ErrorTransformer` interface found in `@rjsf/utils`.\n> - The `transformErrors()` function must return the list of errors. Modifying the list in place without returning it will result in an error.\n> - The `transformErrors()` function is passed the `uiSchema` as the second argument. This allows the `transformErrors()` function to be able to derive additional information from it for transforming errors.\n\nEach element in the `errors` list passed to `transformErrors` is a `RJSFValidationError` interface (in `@rjsf/utils`) and has the following properties:\n\n- `name`: optional name of the error, for example, \"required\" or \"minLength\"\n- `message`: optional message, for example, \"is a required property\" or \"should NOT be shorter than 3 characters\"\n- `params`: optional object with the error params returned by ajv ([see doc](https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#error-parameters) for more info).\n- `property`: optional string in Javascript property accessor notation to the data path of the field with the error. For example, `.name` or `.first-name`.\n- `schemaPath`: optional JSON pointer to the schema of the keyword that failed validation. For example, `#/fields/firstName/required`. (Note: this may sometimes be wrong due to a [bug in ajv](https://github.com/ajv-validator/ajv/issues/512)).\n- `stack`: full error name, for example \".name is a required property\".\n- `title`: optional string containing title property for the field with error.\n\n## Error List Display\n\nTo take control over how the form errors are displayed, you can define an _error list template_ for your form.\nThis list is the form global error list that appears at the top of your forms.\n\nAn error list template is basically a React stateless component being passed errors as props, so you can render them as you like:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, ErrorListProps } from \"@rjsf/utils\";\nimport validator from \"@rjsf/validator-ajv8\";\n\nfunction ErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n

\n

Custom error list

\n
    \n {errors.map(error => (\n
  • \n {error.stack}\n
    • \n ))}\n
\n
\n );\n}\n\nconst schema: RJSFSchema = {\n type: \"string\",\n const: \"test\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: Your custom `ErrorList` template will only render when `showErrorList` is `top` or `botttom`.\n\nThe following props are passed to `ErrorList` as defined by the `ErrorListProps` interface in `@rjsf/utils`:\n\n- `errors`: An array of the errors.\n- `errorSchema`: The errorSchema constructed by `Form`.\n- `schema`: The schema that was passed to `Form`.\n- `uiSchema`: The uiSchema that was passed to `Form`.\n- `formContext`: The `formContext` object that you passed to `Form`.\n\n## The case of empty strings\n\nWhen a text input is empty, the field in form data is set to `undefined`.\nHowever, since `undefined` isn't a valid JSON value according to [the official JSON standard](https://www.ecma-international.org/wp-content/uploads/ECMA-404_2nd_edition_december_2017.pdf) (ECMA-404, Section 5), the values get stored as `null`.\n\nString fields that use `enum` and a `select` widget will have an empty option at the top of the options list that when selected will result in the field being `null`.\n\nOne consequence of this is that if you have an empty string in your `enum` array, selecting that option in the `select` input will cause the field to be set to `null`, not an empty string.\n\nIf you want to have the field set to a default value when empty you can provide a `ui:emptyValue` field in the `uiSchema` object.\n\n## Custom meta schema validation\n\nTo have your schemas validated against any other meta schema than draft-07 (the current version of [JSON Schema](http://json-schema.org/)), make sure your schema has a `$schema` attribute that enables the validator to use the correct meta schema.\nFor example:\n\n```json\n{\n \"$schema\": \"http://json-schema.org/draft-04/schema#\",\n ...\n}\n```\n\nNote that react-jsonschema-form supports JSON Schema draft-07 by default.\nTo support additional meta schemas, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:\n\n### additionalMetaSchemas\n\nThe `additionalMetaSchemas` prop allows you to validate the form data against one (or more than one) JSON Schema meta schema, for example, JSON Schema draft-04.\nYou can import a meta schema as follows:\n\n```tsx\nconst metaSchemaDraft04 = require('ajv/lib/refs/json-schema-draft-04.json');\n```\n\nIn this example `schema` passed as props to `Form` component can be validated against draft-07 (default) and by draft-04 (added), depending on the value of `$schema` attribute.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport AjvDraft04 from 'ajv-draft-04';\n\nconst validator = customizeValidator({ AjvClass: AjvDraft04 });\n\nconst schema: RJSFSchema = {\n $schema: 'http://json-schema.org/draft-04/schema#',\n type: 'string',\n};\n\nreturn ;\n```\n\n### customFormats\n\n[Pre-defined semantic formats](https://json-schema.org/draft/2019-09/json-schema-validation.html#rfc.section.7) are limited.\nreact-jsonschema-form adds two formats, `color` and `data-url`, to support certain [alternative widgets](./widgets.md).\nTo add formats of your own, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'phone-us',\n};\n\nconst customFormats = {\n 'phone-us': /\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4}$/,\n};\n\nconst validator = customizeValidator({ customFormats });\n\nrender(, document.getElementById('app'));\n```\n\nFormat values can be anything AJV's [`addFormat` method](https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#addformatstring-name-stringregexpfunctionobject-format---ajv) accepts.\n\n### Async validation\n\nHandling async errors is an important part of many applications. Support for this is added in the form of the `extraErrors` prop.\n\nFor example, a request could be made to some backend when the user submits the form. If that request fails, the errors returned by the backend should be formatted like in the following example.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, ErrorSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: {\n type: 'string',\n },\n candy: {\n type: 'object',\n properties: {\n bar: {\n type: 'string',\n },\n },\n },\n },\n};\n\nconst extraErrors: ErrorSchema = {\n foo: {\n __errors: ['some error that got added as a prop'],\n },\n candy: {\n bar: {\n __errors: ['some error that got added as a prop'],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nAn important note is that these errors are \"display only\" and will not block the user from submitting the form again.\n\n### ajvOptionsOverrides\n\nIn version 5, with the advent of the decoupling of the validation implementation from the `Form`, it is now possible to provide additional options to the `ajv` instance used within `@rjsf/validator-ajv8`.\nFor instance, if you need more information from `ajv` about errors via the `verbose` option, now you can turn it on!\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'phone-us',\n};\n\nconst ajvOptionsOverrides = {\n verbose: true,\n};\n\nconst validator = customizeValidator({ ajvOptionsOverrides });\n\nrender(, document.getElementById('app'));\n```\n\n## Using the raw Ajv instance\n\nThe `customizeValidator()` function returns the `AJV8Validator` implementation class, which has an internal raw `ajv` instance within it.\nIf you need to do some deep customization of the instance using any of the `ajv` libraries (like `ajv-keywords`), you can do so using this raw instance as follows:\n\n```ts\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvKeywords from 'ajv-keywords';\n\nconst validator = customizeValidator();\najvKeywords(validator.ajv, ['your-keyword']);\n\n// use your update validator with a `Form`\n```\n\n## Ajv8 validator\n\nOur implementation of `@rjsf/validator-ajv8` utilizes Ajv's internal cache to avoid unnecessarily re-compiling schemas, which can be an expensive operation. The cache key is the schema `$id`.\n\nThe `ajvOptionsOverrides` for the Ajv 8 validator are the ones supported by that version.\nSecond, the data formats previously provided in Ajv 6 now need to be added explicitly using the `ajv-formats` package.\nA new `ajvFormatOptions` option is available on the `customizeValidator()` API to be able to configure this.\nAdditionally, a new `AjvClass` option is available on the `customizeValidator()` API to support using one of the other [JSON schema versions](https://ajv.js.org/json-schema.html#json-schema-versions) provided by Ajv 8 besides the `draft-07` default.\nFinally, the Ajv 8 validator supports the localization of error messages.\n\n### ajvFormatOptions\n\nBy default, ALL formats are being added to the default `@rjsf/validator-ajv8` that you get when you import it.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'email',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you don't actually need any of the [ajv-formats](https://github.com/ajv-validator/ajv-formats#formats) and want to reduce the memory footprint, then you can turn it off as follows:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({ ajvFormatOptions: false });\n\nrender(, document.getElementById('app'));\n```\n\nIf you only need some of them, you can pass any of the [options](https://github.com/ajv-validator/ajv-formats#options) to the formatter:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ ajvFormatOptions: ['date'] });\n// or\n// const validator = customizeValidator({ ajvFormatOptions: { mode: \"fast\", formats: [\"date\"], keywords: true } });\n\nrender(, document.getElementById('app'));\n```\n\n### AjvClass\n\nBy default, the `@rjsf/validator-ajv8` uses the `draft-07` schema version.\nIt is possible to use one of the other version it supports, like `draft-2019-09` or `draft-2020-12`.\nNOTE: `draft-2020-12` has breaking changes and hasn't been fully tested with `@rjsf`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport Ajv2019 from 'ajv/dist/2019';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ AjvClass: Ajv2019 });\n// or\n// const validator = customizeValidator({ AjvClass: Ajv2020 });\n\nrender(, document.getElementById('app'));\n```\n\n### extenderFn\n\nIf you need to use an additional library, such as `ajv-errors`, with our validators you can do so by creating a custom validator and pass it the `ajv` library \"extender\" via the `extenderFn` prop on the `options` parameter.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvErrors from 'ajv-errors';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'date',\n};\n\nconst validator = customizeValidator({ extenderFn: ajvErrors });\n\nrender(, document.getElementById('app'));\n```\n\n### suppressDuplicateFiltering\n\nWhen AJV validates against `anyOf` or `oneOf` schemas, it generates a separate error for each failed branch, which often produces many duplicate messages.\nBy default, the validator filters out these duplicates so that only the first occurrence of each unique error is shown.\nUse `suppressDuplicateFiltering` to override this behavior when you need to see all errors from every branch.\n\nThe option accepts a `SuppressDuplicateFilteringType` value (exported from `@rjsf/validator-ajv8`):\n\n| Value | Behavior |\n| ------------------ | --------------------------------------------------------------------------- |\n| `'none'` (default) | Duplicates filtered for both `anyOf` and `oneOf` |\n| `'anyOf'` | `anyOf` duplicate filtering disabled; `oneOf` duplicates still filtered |\n| `'oneOf'` | `oneOf` duplicate filtering disabled; `anyOf` duplicates still filtered |\n| `'all'` | All duplicate filtering disabled; every error from every branch is returned |\n\nFor a standard validator via `customizeValidator()`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n asc: {\n title: 'Low to high',\n type: 'boolean',\n default: true,\n },\n desc: {\n title: 'High to low',\n type: 'boolean',\n default: true,\n },\n },\n anyOf: [\n {\n required: ['asc'],\n properties: {\n asc: {\n const: true,\n },\n },\n },\n {\n required: ['desc'],\n properties: {\n desc: {\n const: true,\n },\n },\n },\n ],\n};\n\n// Disable all duplicate filtering — show every error from every anyOf/oneOf branch\nconst validator = customizeValidator({ suppressDuplicateFiltering: 'all' });\n\nrender(, document.getElementById('app'));\n```\n\nFor a precompiled validator, pass the value as the fourth argument to `createPrecompiledValidator()`:\n\n```tsx\nimport { createPrecompiledValidator } from '@rjsf/validator-ajv8';\nimport * as precompiledValidatorFns from 'path_to/yourCompiledSchema';\nimport yourSchema from 'path_to/yourSchema';\n\nconst validator = createPrecompiledValidator(precompiledValidatorFns, yourSchema, undefined, 'all');\n```\n\n### Localization (L10n) support\n\nThe Ajv 8 validator supports the localization of error messages using [ajv-i18n](https://github.com/ajv-validator/ajv-i18n).\nIn addition, you may provide a custom solution by implementing a function that conforms to the `Localizer` interface if your language is not supported.\n\n```ts\nimport { ErrorObject } from 'ajv';\n/** The type describing a function that takes a list of Ajv `ErrorObject`s and localizes them\n */\nexport type Localizer = (errors?: null | ErrorObject[]) => void;\n```\n\nNOTE: The `ajv-i18n` validators implement the `Localizer` interface.\n\n#### Some examples\n\nUsing a specific locale while including all of `ajv-i18n`:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport localizer from 'ajv-i18n';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, localizer.it);\n\nrender(, document.getElementById('app'));\n```\n\nUsing a specific locale minimizing the bundle size\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport spanishLocalizer from 'ajv-i18n/localize/es';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, spanishLocalizer);\n\nrender(, document.getElementById('app'));\n```\n\nAn example of a custom `Localizer` implementation:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { ErrorObject } from 'ajv';\n\nfunction localize_ru(errors: null | ErrorObject[] = []) {\n if (!(errors && errors.length)) return;\n errors.forEach(function (error) {\n let outMessage = '';\n\n switch (error.keyword) {\n case 'pattern': {\n outMessage = 'должно соответствовать образцу \"' + error.params.pattern + '\"';\n break;\n }\n case 'required': {\n outMessage = 'поле обязательно для заполнения';\n break;\n }\n default:\n outMessage = error.message;\n }\n\n error.message = outMessage;\n });\n}\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst validator = customizeValidator({}, localize_ru);\n\nrender(, document.getElementById('app'));\n```\n\nNOTES:\n\n- If you provided your own function, modify the list in place.\n- You must process all the cases which you need by yourself. See the full list of possible cases [here](https://github.com/ajv-validator/ajv-i18n/blob/master/messages/index.js).\n- Each element in the `errors` list passed to the custom function represent a **raw** error object returned by ajv ([see doc](https://github.com/ajv-validator/ajv/blob/master/docs/api.md#error-objects)).\n- [HTML 5 Validation](#html5-validation) will cause the browser to display a \"popup\" message, the text of which is entirely under control of the browser. If you are seeing messages which aren't translated \"popping up\", then add `noHtml5Validate` to your form.\n","isInternal":false,"tokens":9192,"sizeBytes":37775},{"name":"widgets.md","path":"packages/docs/docs/usage/widgets.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/docs/usage/widgets.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Widgets\n\nThe uiSchema `ui:widget` property tells the form which UI widget should be used to render a field.\n\nExample:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n done: {\n type: 'boolean',\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n done: {\n 'ui:widget': 'radio', // could also be \"select\"\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nHere's a list of supported alternative widgets for different JSON Schema data types:\n\n## For `boolean` fields\n\n- `radio`: a radio button group with `true` and `false` as selectable values;\n- `select`: a select box with `true` and `false` as options;\n- by default, a checkbox is used\n\n> Note: To set the labels for a boolean field, instead of using `true` and `false`, your schema can use `oneOf` with `const` values for both true and false, where you can specify the custom label in the `title` field. You will also need to specify a widget in your `uiSchema`. See the following example:\n\nschema:\n\n```json\n{\n \"properties\": {\n \"booleanWithCustomLabels\": {\n \"type\": \"boolean\",\n \"oneOf\": [\n { \"const\": true, \"title\": \"Custom label for true\" },\n { \"const\": false, \"title\": \"Custom label for false\" }\n ]\n }\n }\n}\n```\n\nuiSchema:\n\n```json\n{\n \"booleanWithCustomLabels\": {\n \"ui:widget\": \"radio\" // or \"select\"\n }\n}\n```\n\n## For `string` fields\n\n- `textarea`: a `textarea` element is used;\n- `password`: an `input[type=password]` element is used;\n- `color`: an `input[type=color]` element is used;\n- by default, a regular `input[type=text]` element is used.\n\n### String formats\n\nThe built-in string field also supports the JSON Schema `format` property, and will render an appropriate widget by default for the following string formats:\n\n- `email`: An `input[type=email]` element is used;\n- `uri`: An `input[type=url]` element is used;\n- `data-url`: By default, an `input[type=file]` element is used; in case the string is part of an array, multiple files will be handled automatically (see [File widgets](#file-widgets)).\n- `date`: By default, an `input[type=date]` element is used;\n- `date-time`: By default, an `input[type=datetime-local]` element is used.\n- `time`: By default an `input[type=time]` element is used;\n\n![](https://i.imgur.com/xqu6Lcp.png)\n\nPlease note that, even though they are standardized, `datetime-local`, `date` and `time` input elements are not supported by IE. If you plan on targeting IE, two alternative widgets are available:\n\n- `alt-datetime`: Six `select` elements are used to select the year, the month, the day, the hour, the minute and the second;\n- `alt-date`: Three `select` elements are used to select the year, month and the day.\n\n![](https://i.imgur.com/VF5tY60.png)\n\nYou can customize the list of years displayed in the `year` dropdown by providing a `yearsRange` property to `ui:options` in your uiSchema.\nThe range can be descending by specifying the larger value first.\nIt's also possible to remove the `Now` and `Clear` buttons with the `hideNowButton` and `hideClearButton` options.\n\nYou can also, customize the order in which date input fields are displayed by providing `format` property to `ui:options` in your uiSchema, available values are `YMD`(default), `MDY` and `DMY`.\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'alt-datetime',\n 'ui:options': {\n yearsRange: [1980, 2030],\n format: 'MDY',\n hideNowButton: true,\n hideClearButton: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also specify negative values which will be treated relative to the current year, so if it is 2020 and the range is set as follows.\n\n```\n yearsRange: [-120, -18],\n```\n\nYears from 1900-2002 will be shown. You can also specify the dates with the higher date first to display dates in reverse order.\n\n```\n yearsRange: [2030, 1980],\n ...\n yearsRange: [-18, -120],\n```\n\nYears from 2030-1980 and 2002-1900, respectively will be shown.\n\n## For `number` and `integer` fields\n\n- `updown`: an `input[type=number]` updown selector;\n- `range`: an `input[type=range]` slider;\n- `radio`: a radio button group with enum values. This can only be used when `enum` values are specified for this input.\n- By default, a regular `input[type=number]` element is used.\n\n> Note: If JSON Schema's `minimum`, `maximum` and `multipleOf` values are defined, the `min`, `max` and `step` input attributes values will take those values.\n\n## Hidden widgets\n\nIt's possible to use a hidden widget for a field by setting its `ui:widget` uiSchema directive to `hidden`:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'boolean' },\n },\n};\n\nconst uiSchema: UiSchema = {\n foo: { 'ui:widget': 'hidden' },\n};\n\nrender(, document.getElementById('app'));\n```\n\nNotes:\n\n- Hiding widgets is only supported for `boolean`, `string`, `number` and `integer` schema types;\n- A hidden widget takes its value from the `formData` prop.\n\n## File widgets\n\nThis library supports a limited form of `input[type=file]` widgets, in the sense that it will propagate file contents to form data state as [data-url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)s.\n\nThere are two ways to use file widgets.\n\n1. By declaring a `string` json schema type along a `data-url` [format](#string-formats):\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\n\nrender(, document.getElementById('app'));\n```\n\n2. By specifying a `ui:widget` field uiSchema directive as `file`:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'file',\n};\n```\n\n### Multiple files\n\nMultiple files selectors are supported by defining an array of strings having `data-url` as a format:\n\n```ts\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n format: 'data-url',\n },\n};\n```\n\n> Note that storing large dataURIs into form state might slow rendering.\n\n### File widget input ref\n\nThe included `FileWidget` exposes a reference to the `` element node as an `inputRef` component property.\n\nThis allows you to programmatically trigger the browser's file selector, which can be used in a custom file widget.\n\n### `accept` option\n\nYou can use the accept attribute to specify a filter for what file types the user can upload:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': { accept: '.pdf' },\n};\n```\n","isInternal":false,"tokens":1975,"sizeBytes":7426},{"name":"package.json","path":"packages/docs/package.json","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/package.json","title":"@rjsf/docs","category":"anthropic-skill","format":"json","content":"{\n \"name\": \"@rjsf/docs\",\n \"version\": \"6.11.0\",\n \"private\": true,\n \"scripts\": {\n \"docusaurus\": \"docusaurus\",\n \"start\": \"docusaurus start\",\n \"build\": \"docusaurus build\",\n \"swizzle\": \"docusaurus swizzle\",\n \"deploy\": \"docusaurus deploy\",\n \"clear\": \"docusaurus clear\",\n \"serve\": \"docusaurus serve\",\n \"write-translations\": \"docusaurus write-translations\",\n \"write-heading-ids\": \"docusaurus write-heading-ids\",\n \"typecheck\": \"tsc\",\n \"precommit\": \"lint-staged\",\n \"cs-check\": \"oxfmt --check \\\"src/**/*.{ts,tsx}\\\"\",\n \"cs-format\": \"oxfmt \\\"src/**/*.{ts,tsx}\\\"\"\n },\n \"lint-staged\": {\n \"src/**/*.{ts,tsx}\": [\n \"oxfmt\"\n ]\n },\n \"dependencies\": {\n \"@docusaurus/core\": \"^3.10.2\",\n \"@docusaurus/preset-classic\": \"^3.10.2\",\n \"@mdx-js/react\": \"^3.1.1\",\n \"prism-react-renderer\": \"^2.4.1\"\n },\n \"devDependencies\": {\n \"@docusaurus/module-type-aliases\": \"^3.10.2\",\n \"@docusaurus/plugin-content-docs\": \"^3.10.2\",\n \"@docusaurus/types\": \"^3.10.2\",\n \"@tsconfig/docusaurus\": \"^2.0.9\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.5%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"engines\": {\n \"node\": \">=20\"\n }\n}\n","frontmatter":{"name":"@rjsf/docs","version":"6.11.0","private":true,"scripts":{"docusaurus":"docusaurus","start":"docusaurus start","build":"docusaurus build","swizzle":"docusaurus swizzle","deploy":"docusaurus deploy","clear":"docusaurus clear","serve":"docusaurus serve","write-translations":"docusaurus write-translations","write-heading-ids":"docusaurus write-heading-ids","typecheck":"tsc","precommit":"lint-staged","cs-check":"oxfmt --check \"src/**/*.{ts,tsx}\"","cs-format":"oxfmt \"src/**/*.{ts,tsx}\""},"lint-staged":{"src/**/*.{ts,tsx}":["oxfmt"]},"dependencies":{"@docusaurus/core":"^3.10.2","@docusaurus/preset-classic":"^3.10.2","@mdx-js/react":"^3.1.1","prism-react-renderer":"^2.4.1"},"devDependencies":{"@docusaurus/module-type-aliases":"^3.10.2","@docusaurus/plugin-content-docs":"^3.10.2","@docusaurus/types":"^3.10.2","@tsconfig/docusaurus":"^2.0.9"},"browserslist":{"production":[">0.5%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"engines":{"node":">=20"}},"isInternal":false,"tokens":443,"sizeBytes":1312},{"name":"tsconfig.json","path":"packages/docs/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/tsconfig.json","title":"Docs Skill","category":"anthropic-skill","format":"json","content":"{\n // This file is not used in compilation. It is here just for a nice editor experience.\n \"extends\": \"@tsconfig/docusaurus/tsconfig.json\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true\n }\n}\n","isInternal":false,"tokens":52,"sizeBytes":201},{"name":"00-quickstart.md","path":"packages/docs/versioned_docs/version-3.2.1/00-quickstart.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/00-quickstart.md","title":"Version-3.2.1 Skill","category":"anthropic-skill","format":"markdown","content":"# Quickstart\n\nLet's walk through setup of a form after installing the dependency properly.\n\n## Form schema\n\nFirst, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou can also render an object with multiple fields with the below schema:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nFor more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](./usage/single.md).\n\n## Form uiSchema\n\nThe uiSchema is used to add more customization to the form's look and feel. Use the `classNames`\nattribute of the uiSchema to add a custom CSS class name to the form:\n\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"string\"\n};\n\nconst uiSchema = {\n classNames: \"custom-css-class\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nTo customize object fields in the uiSchema, the structure of the\nuiSchema should be `{key: value}`, where `key` is the property key and `value` is an\nobject with the uiSchema configuration for that particular property. For example:\n\n```jsx\nconst schema = {\n title: \"Test form\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nconst uiSchema = {\n name: {\n classNames: \"custom-class-name\"\n },\n age: {\n classNames: \"custom-class-age\"\n }\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```jsx\nconst schema = {\n type: \"object\",\n properties: {\n title: {\n type: \"string\"\n },\n done: {\n type: \"boolean\"\n }\n }\n};\n\nconst formData = {\n title: \"First task\",\n done: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: If your form has a single field, pass a single value to `formData`. ex: `formData=\"Charlie\"`\n\n> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\nYou can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `` component; see the [Form Props Reference](/docs/api-reference/form-props.md) for more details.\n\n### Controlled component\n\nBy default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the\n`onChange` and `formData` props as in the below example:\n\n```jsx\nconst App = () => {\n const [formData, setFormData] = React.useState(null);\n return ( setFormData(e.formData)}\n />);\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n","isInternal":false,"tokens":814,"sizeBytes":3327},{"name":"custom-templates.md","path":"packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-templates.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-templates.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Custom Templates\n\nThis is an advanced feature that lets you customize even more aspects of the form:\n\n_ | Custom Field | Custom Template | Custom Widget\n--|---------- | ------------- | ----\n**What it does** | Overrides all behaviour | Overrides just the layout (not behaviour) | Overrides just the input box (not layout, labels, or help, or validation)\n**Usage** | Global or per-field | Global or per-field | Global or per-field\n**Global Example** | `` | `` | ``\n**Per-Field Example** | `\"ui:field\": MyCustomField` | `\"ui:ArrayFieldTemplate\": MyArrayTemplate` | `\"ui:widget\":MyCustomWidget`\n**Documentation** | [Custom Fields](custom-widgets-fields.md) | [FieldTemplate](#FieldTemplate) / [ArrayFieldTemplate](#ArrayFieldTemplate) / [ObjectFieldTemplate](#ObjectFieldTemplate) | [Custom Widgets](custom-widgets-fields.md)\n\n## ArrayFieldTemplate\n\nYou can use an `ArrayFieldTemplate` to customize how your arrays are rendered.\nThis allows you to customize your array, and each element in the array.\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nfunction ArrayFieldTemplate(props) {\n return (\n
\n {props.items.map(element => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:ArrayFieldTemplate\": ArrayFieldTemplate\n}\n```\n\nPlease see [customArray.js](https://github.com/rjsf-team/react-jsonschema-form/blob/4542cd254ffdc6dfaf55e8c9f6f17dc900d0d041/packages/playground/src/samples/customArray.js) for another example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `idSchema`: Object\n- `items`: An array of objects representing the items in the array. Each of the items represent a child with properties described below.\n- `onAddClick: (event?) => void`: A function that adds a new item to the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formContext`: The `formContext` object that you passed to Form.\n- `formData`: The formData for this array.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `items`:\n\n- `children`: The html for the item's content.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `key`: A stable, unique key for the array item.\n- `onAddIndexClick: (index) => (event?) => void`: Returns a function that adds a new item at `index`.\n- `onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.\n- `onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.\n- `readonly`: A boolean value stating if the array item is read-only.\n\n> Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.\n\n## FieldTemplate\n\nTo take control over the inner organization of each field (each form row), you can define a *field template* for your form.\n\nA field template is basically a React stateless component being passed field-related props, allowing you to structure your form row as you like.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nfunction CustomFieldTemplate(props) {\n const {id, classNames, label, help, required, description, errors, children} = props;\n return (\n
\n \n {description}\n {children}\n {errors}\n {help}\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:FieldTemplate\": CustomFieldTemplate\n}\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](#custom-css-class-names) defined in your uiSchema.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionField`](#custom-descriptions) defined).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `disabled`: A boolean value stating if the field is disabled.\n- `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.\n- `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `onChange`: The value change event handler; Can be called with a new value to change the value for this field.\n- `formContext`: The `formContext` object that you passed to Form.\n- `formData`: The formData for this field.\n- `registry`: The `registry` object.\n\n> Note: you can only define a single global field template for a form, but you can set individual field templates per property using `\"ui:FieldTemplate\"`.\n\n## ObjectFieldTemplate\n\n```jsx\nconst schema = {\n type: \"object\",\n title: \"Object title\",\n description: \"Object description\",\n properties: {\n name: {\n type: \"string\"\n },\n age: {\n type: \"number\"\n }\n }\n};\n\nfunction ObjectFieldTemplate(props) {\n return (\n
\n {props.title}\n {props.description}\n {props.properties.map(element =>
{element.content}
)}\n
\n );\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property.\n\n```js\nconst uiSchema = {\n \"ui:ObjectFieldTemplate\": ObjectFieldTemplate\n};\n```\n\nPlease see [customObject.js](https://github.com/rjsf-team/react-jsonschema-form/blob/4542cd254ffdc6dfaf55e8c9f6f17dc900d0d041/packages/playground/src/samples/customObject.js) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `disabled`: A boolean value stating if the object is disabled.\n- `properties`: An array of object representing the properties in the array. Each of the properties represent a child with properties described below.\n- `onAddClick: (schema: JSONSchema7) => () => void`: Returns a function that adds a new property to the object (to be used with additionalProperties)\n- `readonly`: A boolean value stating if the object is read-only.\n- `required`: A boolean value stating if the object is required.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `idSchema`: An object containing the id for this object & ids for it's properties.\n- `formData`: The form data for the object.\n- `formContext`: The `formContext` object that you passed to Form.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n- `hidden`: A boolean value stating if the property should be hidden.\n\n> Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.\n","isInternal":false,"tokens":2429,"sizeBytes":10393},{"name":"custom-themes.md","path":"packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-themes.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Custom Themes\n\nThe `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component. This theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react';\nimport { withTheme } from '@rjsf/core';\n\nconst theme = { widgets: {test: () => (
test
) } };\n\nconst ThemedForm = withTheme(theme); \n\nconst Demo = () => (\n \n);\n```\n\n## Theme object properties\nThe Theme object consists of the same properties as the rjsf `Form` component (such as **widgets** and **fields**). The themed-Form component merges together any theme-specific **widgets** and **fields** with the default **widgets** and **fields**. For instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name. Thus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`. Note that you are not required to pass in either custom **widgets** or **fields** when using the custom-themed HOC component; you can make the essentially redefine the default Form by simply doing `const Form = withTheme({});`.\n\n### Widgets and fields \n**widgets** and **fields** should be in the same format as shown [here](/advanced-customization/#custom-widgets-and-fields).\n\nExample theme with custom widget:\n```jsx\nconst MyCustomWidget = (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n};\n\nconst myWidgets = {\n myCustomWidget: MyCustomWidget\n};\n\nconst ThemeObject = {widgets: myWidgets};\nexport default ThemeObject;\n```\n\nThe above can be similarly done for **fields**.\n\n### Templates\nEach template should be passed directly into the theme object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](/advanced-customization/#array-field-template) and [ErrorListTemplate](/advanced-customization/#error-list-template) in the theme object:\n```jsx\nfunction MyArrayFieldTemplate(props) {\n return (\n
\n {props.items.map(element => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nfunction MyErrorListTemplate(props) {\n const {errors} = props;\n return (\n
    \n {errors.map(error => (\n
  • \n {error.stack}\n
    • \n ))}\n
\n );\n}\n\nconst ThemeObject = {\n ArrayFieldTemplate: MyArrayFieldTemplate, \n ErrorList: MyErrorListTemplate,\n widgets: myWidgets\n};\n\nexport default ThemeObject;\n```\n\n## Overriding other Form props\nJust as the theme can override **widgets**, **fields**, any of the field templates, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.\n```jsx\nconst ThemeObject = {\n ArrayFieldTemplate: MyArrayFieldTemplate, \n fields: myFields,\n showErrorList: false,\n widgets: myWidgets\n};\n```\n\nThus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).\n","isInternal":false,"tokens":867,"sizeBytes":3740},{"name":"custom-widgets-fields.md","path":"packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-widgets-fields.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/advanced-customization/custom-widgets-fields.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Custom Widgets and Fields\n\nThe API allows to specify your own custom *widget* and *field* components:\n\n- A *widget* represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A *field* usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n## Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `ObjectField` renders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the `fields` and `widgets` props:\n\n```jsx\nconst schema = {\n type: \"boolean\",\n default: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkbox\"\n};\n\nconst CustomCheckbox = function(props) {\n return (\n \n );\n};\n\nconst widgets = {\n CheckboxWidget: CustomCheckbox\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```jsx\nconst customFields = {StringField: CustomString};\nconst customWidgets = {CheckboxWidget: CustomCheckbox};\n\nfunction MyForm(props) {\n return ;\n}\n```\n\nThe default fields you can override are:\n\n - `ArrayField`\n - `BooleanField`\n - `DescriptionField`\n - `OneOfField`\n - `AnyOfField`\n - `NullField`\n - `NumberField`\n - `ObjectField`\n - `SchemaField`\n - `StringField`\n - `TitleField`\n - `UnsupportedField`\n\nThe default widgets you can override are:\n\n - `AltDateTimeWidget`\n - `AltDateWidget`\n - `CheckboxesWidget`\n - `CheckboxWidget`\n - `ColorWidget`\n - `DateTimeWidget`\n - `DateWidget`\n - `EmailWidget`\n - `FileWidget`\n - `HiddenWidget`\n - `PasswordWidget`\n - `RadioWidget`\n - `RangeWidget`\n - `SelectWidget`\n - `TextareaWidget`\n - `TextWidget`\n - `UpDownWidget`\n - `URLWidget`\n\n\n## Adding your own custom widgets\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nconst uiSchema = {\n \"ui:widget\": (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this field;\n- `schema`: The JSONSchema subschema object for this field;\n- `uiSchema`: The uiSchema for this field;\n- `value`: The current value for this field;\n- `placeholder`: the placeholder for the field, if any;\n- `required`: The required status of this field;\n- `disabled`: `true` if the widget is disabled;\n- `readonly`: `true` if the widget is read-only;\n- `autofocus`: `true` if the widget should autofocus;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the the widget id and value;\n- `onFocus`: The input focus event handler; call it with the the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `formContext`: The `formContext` object that you passed to Form.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n\n### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```jsx\nconst MyCustomWidget = (props) => {\n return (\n props.onChange(event.target.value)} />\n );\n};\n\nconst widgets = {\n myCustomWidget: MyCustomWidget\n};\n\nconst schema = {\n type: \"string\"\n};\n\nconst uiSchema = {\n \"ui:widget\": \"myCustomWidget\"\n}\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nfunction MyCustomWidget(props) {\n const {options} = props;\n const {color, backgroundColor} = options;\n return ;\n}\n\nMyCustomWidget.defaultProps = {\n options: {\n color: \"red\"\n }\n};\n\nconst uiSchema = {\n \"ui:widget\": MyCustomWidget,\n \"ui:options\": {\n backgroundColor: \"yellow\"\n }\n};\n\n// renders red on yellow input\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: This also applies to [registered custom components](#custom-component-registration).\n\n> Note: Since v0.41.0, the `ui:widget` object API, where a widget and options were specified with `\"ui:widget\": {component, options}` shape, is deprecated. It will be removed in a future release.\n\n### Customizing widgets text input\n\nAll the widgets that render a text input use the `BaseInput` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInput` component in the `widgets` property of `Form` (see [Custom component registration](#custom-component-registration)).\n\n## Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a *latitude* and a *longitude*:\n\n```jsx\nconst schema = {\n type: \"object\",\n required: [\"lat\", \"lon\"],\n properties: {\n lat: {type: \"number\"},\n lon: {type: \"number\"}\n }\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n constructor(props) {\n super(props);\n this.state = {...props.formData};\n }\n\n onChange(name) {\n return (event) => {\n this.setState({\n [name]: parseFloat(event.target.value)\n }, () => this.props.onChange(this.state));\n };\n }\n\n render() {\n const {lat, lon} = this.state;\n return (\n
\n \n \n
\n );\n }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema = {\"ui:field\": \"geo\"};\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields = {geo: GeoPosition};\n\n// Render the form with all the properties we just defined passed\n// as props\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: Registered fields can be reused across the entire schema.\n\n### Field props\n\nA field component will always be passed the following props:\n\n - `schema`: The JSON schema for this field;\n - `uiSchema`: The [uiSchema](#the-uischema-object) for this field;\n - `idSchema`: The tree of unique ids for every child field;\n - `formData`: The data for this field;\n - `errorSchema`: The tree of errors for this field and its children;\n - `registry`: A [registry](#the-registry-object) object (read next).\n - `formContext`: A [formContext](#the-formcontext-object) object (read next).\n\n## The `registry` object\n\nThe `registry` is an object containing the registered custom fields and widgets as well as the root schema definitions.\n\n - `fields`: The [custom registered fields](#custom-field-components). By default this object contains the standard `SchemaField`, `TitleField` and `DescriptionField` components;\n - `widgets`: The [custom registered widgets](#custom-widget-components), if any;\n - `rootSchema`: The root schema, which can contain referenced [definitions](#schema-definitions-and-references);\n - `formContext`: The [formContext](#the-formcontext-object) object;\n - `definitions` (deprecated since v2): Equal to `rootSchema.definitions`.\n\nThe registry is passed down the component tree, so you can access it from your custom field and `SchemaField` components.\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's an example:\n\n```jsx\n\nconst CustomSchemaField = function(props) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields = {\n SchemaField: CustomSchemaField\n};\n\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n","isInternal":false,"tokens":2468,"sizeBytes":10468},{"name":"internals.md","path":"packages/docs/versioned_docs/version-3.2.1/advanced-customization/internals.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/advanced-customization/internals.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"# Internals\n\nMiscellaneous internals of react-jsonschema-form are listed here.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. We currently support JSON Schema-07 by default, but we also support other JSON schema versions through the [custom schema validation](../usage/validation/#custom-schema-validation) feature. Due to the limitation of form widgets, there are some exceptions as follows:\n\n* `additionalItems` keyword for arrays\n\n This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n\n* `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`)\n\n The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties \"outside\" of the `anyOf/oneOf`.\n\n You can also use `oneOf` with [schema dependencies](../usage/dependencies.md) to dynamically add schema properties based on input data.\n\n The `allOf` keyword is supported; it uses [json-schema-merge-allof](https://github.com/mokkabonna/json-schema-merge-allof) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema.\n\n* `\"additionalProperties\":false` produces incorrect schemas when used with [schema dependencies](#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `\"additionalProperties\":false` when you use schema dependencies. See [#848](https://github.com/rjsf-team/react-jsonschema-form/issues/848) [#902](https://github.com/rjsf-team/rjsf-team/issues/902) [#992](https://github.com/rjsf-team/rjsf-team/issues/992)\n\n## Handling of schema defaults\n\nThis library automatically fills default values defined in the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](#schema-dependencies).\n\nSince there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.\n\nCheck out the defaults example on the [live playground](https://rjsf-team.github.io/react-jsonschema-form/) to see this in action.\n\n### Merging of defaults into the form data\n\nThere are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.\n\nThis are the rules which are used when injecting the defaults:\n\n- When there is a scalar in the form data, nothing is changed.\n- When the value is `undefined` in the form data, the default is created in the form data.\n- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.\n- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.\n\n### Merging of defaults within the schema\n\nIn the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together with the \"deeper\" not having precedence. If the parent node defines properties, which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.\n\nFor arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.\n\n## Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons). If you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n```css\ni.glyphicon { display: none; }\n.btn-add::after { content: 'Add'; }\n.array-item-move-up::after { content: 'Move Up'; }\n.array-item-move-down::after { content: 'Move Down'; }\n.array-item-remove::after { content: 'Remove'; }\n```\n\n## Submit form programmatically\nYou can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.\nThis method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.\n\n```jsx\nconst onSubmit = ({formData}) => console.log(\"Data submitted: \", formData);\nlet yourForm;\n\nconst schema = {\n type: \"string\"\n};\n\nrender((\n {yourForm = form;}}/>\n), document.getElementById(\"app\"));\n\nyourForm.submit();\n```\n","isInternal":false,"tokens":1207,"sizeBytes":5514},{"name":"form-props.md","path":"packages/docs/versioned_docs/version-3.2.1/api-reference/form-props.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/api-reference/form-props.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"---\ntitle: Props\n---\n\n# <Form /> props\n\n## acceptcharset\n\nThe value of this prop will be passed to the `accept-charset` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-accept-charset).\n\n## action\n\nThe value of this prop will be passed to the `action` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action).\n\nNote that this just renders the `action` attribute in the HTML markup. There is no real network request being sent to this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()` and then calls the [`onSubmit`](#onSubmit) function, where you could send a request programmatically with `fetch` or similar.\n\n## additionalMetaSchemas\n\nThis prop allows you to validate the form data against another JSON Schema meta schema, for example, JSON Schema draft-04. See [Validation](../usage/validation.md) for more information.\n\n## ArrayFieldTemplate\n\nReact component used to customize how alls arrays are rendered on the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## autoComplete\n\nThe value of this prop will be passed to the `autocomplete` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete).\n\n## autocomplete\n\nDeprecated, same functionality as `autoComplete`\n\n## className\n\nThe value of this prop will be passed to the `class` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## children\n\nYou can provide custom buttons to your form via the `Form` component's `children`. Otherwise a default submit button will be rendered.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n
\n \n \n
\n \n), document.getElementById(\"app\"));\n```\n\n> **Warning:** There needs to be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n## customFormats\n\nThis prop allows you to define custom formats for validation. See [Validation](../usage/validation.md) for more information.\n\n## disabled\n\nIt's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n
\n), document.getElementById(\"app\"));\n```\n\nIf you just want to disable some of the fields, see the `ui:disabled` parameter in `uiSchema`.\n\n## readonly\n\nIt's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf you just want to make some of the fields read-only, see the `ui:readonly` parameter in `uiSchema`.\n\n## enctype\n\nThe value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).\n\n## extraErrors\n\nThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation. See [Validation](../usage/validation.md) for more information.\n\n## ErrorList\n\nYou can pass a React component to this prop to customize how form errors are displayed. See [Validation](../usage/validation.md) for more information.\n\n## fields\n\nDictionary of registered fields in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n## FieldTemplate\n\nReact component used to customize each field of the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## formContext\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.\n\n## formData\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema.\n\n## id\n\nThe value of this prop will be passed to the `id` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## idPrefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```jsx\nconst schema = {\n type: \"string\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nThis will render `` instead of ``\n\n## liveOmit\n\nIf `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field will be removed whenever `onChange` is called. Set to `false` by default.\n\n## liveValidate\n\nIf set to true, the form will perform validation and show any validation errors whenever the form data is changed, rather than just on submit.\n\n## method\n\nThe value of this prop will be passed to the `method` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method).\n\n## name\n\nThe value of this prop will be passed to the `name` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name).\n\n## noHtml5Validate\n\nIf set to true, turns off HTML5 validation on the form. Set to `false` on default.\n\n## noValidate\n\nIf set to true, turns off all validation. Set to `false` by default.\n\n## ObjectFieldTemplate\n\nReact component used to customize how all objects are rendered in the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## omitExtraData\n\nIf set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.\n\n## onBlur\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n## onChange\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same args as `onSubmit` any time a value is updated in the form.\n\n## onError\n\nTo react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\nconst onError = (errors) => console.log(\"I have\", errors.length, \"errors to fix\");\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## onFocus\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## onSubmit\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form data you're usually after. The original event will also be passed as a second parameter:\n\n```jsx\nconst schema = {\n type: \"string\"\n};\nconst onSubmit = ({formData}, e) => console.log(\"Data submitted: \", formData);\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, you may need to set the `omitExtraData` and/or `liveOmit` props.\n\n## schema\n\nForm schema. We support JSON schema draft-07 by default. See [Schema Reference](https://json-schema.org/draft-07/json-schema-release-notes.html) for more information.\n\n## showErrorList\n\nWhen this prop is set to true, a list of errors (or the custom error list defined in the `ErrorList`) will also show. When set to false, only inline input validation errors will be shown. Set to `true` by default. See [Validation](../usage/validation.md) for more information.\n\n## tagName\n\nIt's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.\n\n```jsx\n\n```\n\nYou can also provide a class/function component.\n\n\n```jsx\nconst CustomForm = props => \n// ...\n\n```\n\n## target\n\nThe value of this prop will be passed to the `target` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-target).\n\n## transformErrors\n\nA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation. See [Validation](../usage/validation.md) for more information.\n\n## uiSchema\n\nForm uiSchema. See [uiSchema Reference](uiSchema.md) for more information.\n\n## validate\n\nThe `validate` prop requires a function that specifies custom validation rules for the form. See [Validation](../usage/validation.md) for more information.\n\n## widgets\n\nDictionary of registered widgets in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n","frontmatter":{"title":" Props"},"isInternal":false,"tokens":2191,"sizeBytes":9658},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-3.2.1/api-reference/themes/semantic-ui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/api-reference/themes/semantic-ui/uiSchema.md","title":"Semantic-ui Skill","category":"anthropic-skill","format":"markdown","content":"# uiSchema Options for Semantic-UI\n\nThere are various options to pass to semantic theme fields.\n\nNote that every semantic property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {semantic:{[property]: [value]}}}`\n\nIn other words, the following uiSchema is equivalent:\n\n> Note: All fields have the following settings below as their default\n\n```\nfluid: Take on the size of its container.\ninverted: Format to appear on dark backgrounds.\n```\n\n```json\n{\n \"ui:options\": {\n \"semantic\" : {\n \"fluid\": true,\n \"inverted\": false,\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\",\n }\n }\n }\n}\n```\n#### Semantic Widget Optional Properties\n - [Semantic props for TextWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for CheckboxWidget](https://react.semantic-ui.com/modules/checkbox/)\n - [Semantic props for SelectWidget](https://react.semantic-ui.com/modules/dropdown/)\n - [Semantic props for RangeWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for RadioWidget](https://react.semantic-ui.com/addons/radio/)\n - [Semantic props for PasswordWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for UpDownWidget](https://react.semantic-ui.com/elements/input/)\n - [Semantic props for TextAreaWidget](https://react.semantic-ui.com/addons/text-area/)\n\n\n\n## errorOptions\n\nThe uiSchema semantic object accepts an `errorOptions` property for each field of the schema:\n\n```\nsize: determines the size of the error message dialog\npointing: determines the direction of the arrow on the error message dialog\n```\n\nBelow are the current defaults\n```jsx\nconst uiSchema = {\n \"ui:options\": {\n \"semantic\" : {\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\",\n }\n }\n }\n};\n```\n\n## semantic options uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the semantic uiSchema value within the `ui:options` property:\n\n\n```\nwrapItem: wrap each array item in a Segment\nhorizontalButtons: horizontal buttons instead of the default vertical\n```\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n \"semantic\": {\n \"wrapItem\": true,\n \"horizontalButtons\": true\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## formContext\n\nThe formContext semantic object accepts `wrapContent` ,`wrapLabel` properties.\n\n```\nwrapContent: wrap all inputs field content in a div, for custom styling\nwrapLabel: wrap all labels in a div, for custom styling via CSS\n```\n\n```jsx\n\n```\n","isInternal":false,"tokens":674,"sizeBytes":2810},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-3.2.1/api-reference/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/api-reference/uiSchema.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"# uiSchema\nJSON Schema is limited for describing how a given data type should be rendered as a form input component. That's why this library introduces the concept of uiSchema.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.\n\nNote that every property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {[property]: [value]}}`, or `{\"ui:[property]\": value}`.\n\nIn other words, the following uiSchemas are equivalent:\n\n```json\n{\n \"ui:title\": \"Title\",\n \"ui:description\": \"Description\"\n}\n```\n\n```json\n{\n \"ui:options\": {\n \"title\": \"Title\",\n \"description\": \"Description\"\n }\n}\n```\n\n## classNames\n\nThe uiSchema object accepts a `classNames` property for each field of the schema:\n\n```jsx\nconst uiSchema = {\n title: {\n classNames: \"task-title foo-bar\"\n }\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n## autofocus\n\nIf you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"textarea\",\n \"ui:autofocus\": true\n}\n```\n\n## description\n\nSometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:description\": \"The best password\"\n};\n```\n\n## disabled\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n## enumDisabled\n\nTo disable an option, use the `enumDisabled` property in uiSchema.\n\n```js\nconst schema = {\n type: \"string\",\n enum: [\"one\", \"two\", \"three\"],\n};\n\nconst uiSchema={\n \"ui:enumDisabled\": ['two'],\n}\n```\n\n## help\n\nSometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:help\": \"Hint: Make it strong!\"\n};\n```\n\n![](https://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s) (after contextualized errors, if any).\n\n## inputType\n\nTo change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:options\": {\n inputType: 'tel'\n }\n};\n```\n\n## label\n\nField labels are rendered by default. Labels may be omitted by setting the `label` option to `false` in the `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:options\": {\n label: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## order\n\nThis property allows you to reorder the properties that are shown for a particular object. See [Objects](../usage/objects.md) for more information.\n\n## placeholder\n\nYou can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:\n\n```jsx\nconst schema = {type: \"string\", format: \"uri\"};\nconst uiSchema = {\n \"ui:placeholder\": \"http://\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```jsx\nconst schema = {type: \"string\", enum: [\"First\", \"Second\"]};\nconst uiSchema = {\n \"ui:placeholder\": \"Choose an option\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## readonly\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only. This is equivalent to setting the `readOnly` property in the schema.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n## rootFieldId\n\nBy default, this library will generate ids unique to the form for all rendered widgets. If you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```js\nconst uiSchema = {\n \"ui:rootFieldId\": \"myform\"\n};\n```\n\nThis will make all widgets have an id prefixed with `myform`.\n\n## rows\n\nYou can set the initial height of a textarea widget by specifying `rows` option.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"textarea\",\n \"ui:options\": {\n rows: 15\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## title\n\nSometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n \"ui:widget\": \"password\",\n \"ui:title\": \"Your password\"\n};\n```\n## Theme Options\n[Semantic UI](themes/semantic-ui/uiSchema.md)\n","isInternal":false,"tokens":1442,"sizeBytes":5678},{"name":"arrays.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/arrays.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/arrays.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Arrays\n\nArrays are defined with a type equal to `array`, and array items' schemas are specified in the `items` keyword.\n\n## Arrays of a single field\n\nArrays of a single field type can be specified as follows:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Arrays of objects\n\nArrays of objects can be specified as follows:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n }\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n items: {\n \"ui:widget\": \"textarea\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## The `additionalItems` keyword\n\nThe `additionalItems` keyword allows the user to add additional items of a given schema. For example:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n },\n additionalItems: {\n type: \"boolean\"\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Array item options\n\n### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n orderable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n addable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```jsx\nconst schema = {\n type: \"array\",\n items: {\n type: \"string\"\n }\n};\n\nconst uiSchema = {\n \"ui:options\": {\n removable: false\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n\n## Multiple-choice list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. There are two alternative widgets for picking multiple elements from a list of choices. Typically this applies when a schema has an `enum` list for the `items` property of an `array` field, and the `uniqueItems` property set to `true`.\n\nExample:\n\n```jsx\nconst schema = {\n type: \"array\",\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nBy default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:\n\n```js\nconst schema = {\n type: \"array\",\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkboxes\"\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n\n## Specifying the minimum or maximum number of items\n\nNote that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.\n\nExample:\n\n```jsx\nconst schema = {\n type: \"array\",\n minItems: 2,\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nYou can also specify the maximum number of items in an array using the `maxItems` property.\n\n\n## Inline checkboxes\n\nBy default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:\n\n```js\nconst schema = {\n type: \"array\",\n minItems: 2,\n title: \"A multiple-choice list\",\n items: {\n type: \"string\",\n enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n },\n uniqueItems: true\n};\n\nconst uiSchema = {\n \"ui:widget\": \"checkboxes\",\n \"ui:options\": {\n inline: true\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```","isInternal":false,"tokens":1316,"sizeBytes":4998},{"name":"definitions.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/definitions.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/definitions.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:\n\n```jsx\nconst schema = {\n \"definitions\": {\n \"address\": {\n \"type\": \"object\",\n \"properties\": {\n \"street_address\": { \"type\": \"string\" },\n \"city\": { \"type\": \"string\" },\n \"state\": { \"type\": \"string\" }\n },\n \"required\": [\"street_address\", \"city\", \"state\"]\n }\n },\n \"type\": \"object\",\n \"properties\": {\n \"billing_address\": { \"$ref\": \"#/definitions/address\" },\n \"shipping_address\": { \"$ref\": \"#/definitions/address\" }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nNote that this library only supports local definition referencing. The value in the `$ref` keyword should be a [JSON Pointer](https://tools.ietf.org/html/rfc6901) in URI fragment identifier format.\n","isInternal":false,"tokens":248,"sizeBytes":1021},{"name":"dependencies.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/dependencies.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/dependencies.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Dependencies\n\nreact-jsonschema-form supports the `dependencies` keyword from an earlier draft of JSON Schema (note that this is not part of the latest JSON Schema spec, though). Dependencies can be used to create dynamic schemas that change fields based on what data is entered.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" },\n \"billing_address\": { \"type\": \"string\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": [\"billing_address\"]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined, making them both required if either is defined.\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" },\n \"billing_address\": { \"type\": \"string\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": [\"billing_address\"],\n \"billing_address\": [\"credit_card\"]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))*\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"credit_card\": { \"type\": \"number\" }\n },\n\n \"required\": [\"name\"],\n\n \"dependencies\": {\n \"credit_card\": {\n \"properties\": {\n \"billing_address\": { \"type\": \"string\" }\n },\n \"required\": [\"billing_address\"]\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))*\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```jsx\nconst schema = {\n \"title\": \"Person\",\n \"type\": \"object\",\n \"properties\": {\n \"Do you have any pets?\": {\n \"type\": \"string\",\n \"enum\": [\n \"No\",\n \"Yes: One\",\n \"Yes: More than one\"\n ],\n \"default\": \"No\"\n }\n },\n \"required\": [\n \"Do you have any pets?\"\n ],\n \"dependencies\": {\n \"Do you have any pets?\": {\n \"oneOf\": [\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"No\"\n ]\n }\n }\n },\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"Yes: One\"\n ]\n },\n \"How old is your pet?\": {\n \"type\": \"number\"\n }\n },\n \"required\": [\n \"How old is your pet?\"\n ]\n },\n {\n \"properties\": {\n \"Do you have any pets?\": {\n \"enum\": [\n \"Yes: More than one\"\n ]\n },\n \"Do you want to get rid of any?\": {\n \"type\": \"boolean\"\n }\n },\n \"required\": [\n \"Do you want to get rid of any?\"\n ]\n }\n ]\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.","isInternal":false,"tokens":1061,"sizeBytes":4617},{"name":"objects.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/objects.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/objects.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"# Objects\n\n## Object properties\n\nObjects are defined with a type equal to `object` and properties specified in the `properties` keyword.\n\n```jsx\nconst schema = {\n \"title\": \"My title\",\n \"description\": \"My description\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"age\": {\n \"type\": \"number\"\n }\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Required properties\n\nYou can specify which properties are required using the `required` attribute:\n\n```jsx\nconst schema = {\n \"title\": \"My title\",\n \"description\": \"My description\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"age\": {\n \"type\": \"number\"\n }\n },\n \"required\": [\"name\"]\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\n## Specifying property order\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```jsx\nconst schema = {\n type: \"object\",\n properties: {\n foo: {type: \"string\"},\n bar: {type: \"string\"}\n }\n};\n\nconst uiSchema = {\n \"ui:order\": [\"bar\", \"foo\"]\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```js\nconst uiSchema = {\n \"ui:order\": [\"bar\", \"*\"]\n};\n```\n\n## Additional properties\n\nThe `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:\n\n```jsx\nconst schema = {\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n }\n },\n \"additionalProperties\": {\n \"type\": \"number\",\n \"enum\": [1, 2, 3]\n }\n};\n\nrender((\n \n), document.getElementById(\"app\"));\n```\n\nIn this way, an add button for new properties is shown by default.\n\nYou can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.\n\n### `expandable` option\n\nYou can turn support for `additionalProperties` off with the `expandable` option in `uiSchema`:\n\n```js\nconst uiSchema = {\n \"ui:options\": {\n expandable: false\n }\n};\n```","isInternal":false,"tokens":630,"sizeBytes":2478},{"name":"oneof.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/oneof.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/oneof.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":453,"sizeBytes":1792},{"name":"single.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/single.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/single.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":745,"sizeBytes":2968},{"name":"themes.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/themes.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":436,"sizeBytes":1765},{"name":"validation.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/validation.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/validation.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":2207,"sizeBytes":9227},{"name":"widgets.md","path":"packages/docs/versioned_docs/version-3.2.1/usage/widgets.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-3.2.1/usage/widgets.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1434,"sizeBytes":5533},{"name":"00-quickstart.md","path":"packages/docs/versioned_docs/version-4.2.3/00-quickstart.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/00-quickstart.md","title":"Version-4.2.3 Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":813,"sizeBytes":3323},{"name":"custom-templates.md","path":"packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-templates.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-templates.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":2484,"sizeBytes":10632},{"name":"custom-themes.md","path":"packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-themes.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":867,"sizeBytes":3740},{"name":"custom-widgets-fields.md","path":"packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-widgets-fields.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/advanced-customization/custom-widgets-fields.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":2519,"sizeBytes":10671},{"name":"internals.md","path":"packages/docs/versioned_docs/version-4.2.3/advanced-customization/internals.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/advanced-customization/internals.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1218,"sizeBytes":5576},{"name":"customizing-material-ui.md","path":"packages/docs/versioned_docs/version-4.2.3/advanced-customization/material-ui/customizing-material-ui.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/advanced-customization/material-ui/customizing-material-ui.md","title":"Material-ui Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":770,"sizeBytes":3116},{"name":"form-props.md","path":"packages/docs/versioned_docs/version-4.2.3/api-reference/form-props.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/api-reference/form-props.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"title":" props"},"isInternal":false,"tokens":2333,"sizeBytes":10244},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-4.2.3/api-reference/themes/chakra-ui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/api-reference/themes/chakra-ui/uiSchema.md","title":"Chakra-ui Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":261,"sizeBytes":972},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-4.2.3/api-reference/themes/semantic-ui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/api-reference/themes/semantic-ui/uiSchema.md","title":"Semantic-ui Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":674,"sizeBytes":2810},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-4.2.3/api-reference/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/api-reference/uiSchema.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1925,"sizeBytes":7712},{"name":"arrays.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/arrays.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/arrays.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1513,"sizeBytes":5785},{"name":"definitions.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/definitions.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/definitions.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":248,"sizeBytes":1021},{"name":"dependencies.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/dependencies.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/dependencies.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1061,"sizeBytes":4617},{"name":"objects.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/objects.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/objects.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":630,"sizeBytes":2478},{"name":"oneof.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/oneof.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/oneof.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":453,"sizeBytes":1792},{"name":"single.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/single.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/single.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":745,"sizeBytes":2968},{"name":"themes.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/themes.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":485,"sizeBytes":1958},{"name":"validation.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/validation.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/validation.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":2207,"sizeBytes":9227},{"name":"widgets.md","path":"packages/docs/versioned_docs/version-4.2.3/usage/widgets.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-4.2.3/usage/widgets.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1434,"sizeBytes":5533},{"name":"01-quickstart.md","path":"packages/docs/versioned_docs/version-5.24.10/01-quickstart.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/01-quickstart.md","title":"Version-5.24.10 Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1125,"sizeBytes":4415},{"name":"custom-templates.md","path":"packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-templates.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-templates.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":10412,"sizeBytes":47023},{"name":"custom-themes.md","path":"packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-themes.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1012,"sizeBytes":4286},{"name":"custom-widgets-fields.md","path":"packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-widgets-fields.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/advanced-customization/custom-widgets-fields.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":4742,"sizeBytes":19896},{"name":"internals.md","path":"packages/docs/versioned_docs/version-5.24.10/advanced-customization/internals.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/advanced-customization/internals.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1323,"sizeBytes":5957},{"name":"typescript.md","path":"packages/docs/versioned_docs/version-5.24.10/advanced-customization/typescript.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/advanced-customization/typescript.md","title":"Advanced-customization Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":2167,"sizeBytes":8650},{"name":"form-props.md","path":"packages/docs/versioned_docs/version-5.24.10/api-reference/form-props.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/api-reference/form-props.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"title":" Props"},"isInternal":false,"tokens":5448,"sizeBytes":25703},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-5.24.10/api-reference/themes/antd/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/api-reference/themes/antd/uiSchema.md","title":"Antd Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":333,"sizeBytes":1410},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-5.24.10/api-reference/themes/chakra-ui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/api-reference/themes/chakra-ui/uiSchema.md","title":"Chakra-ui Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":267,"sizeBytes":1009},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-5.24.10/api-reference/themes/semantic-ui/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/api-reference/themes/semantic-ui/uiSchema.md","title":"Semantic-ui Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":713,"sizeBytes":2961},{"name":"uiSchema.md","path":"packages/docs/versioned_docs/version-5.24.10/api-reference/uiSchema.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/api-reference/uiSchema.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":4293,"sizeBytes":16687},{"name":"utility-functions.md","path":"packages/docs/versioned_docs/version-5.24.10/api-reference/utility-functions.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/api-reference/utility-functions.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":11932,"sizeBytes":50030},{"name":"validator-ajv8.md","path":"packages/docs/versioned_docs/version-5.24.10/api-reference/validator-ajv8.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/api-reference/validator-ajv8.md","title":"Api-reference Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":805,"sizeBytes":3659},{"name":"contributing.md","path":"packages/docs/versioned_docs/version-5.24.10/contributing.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/contributing.md","title":"Version-5.24.10 Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1843,"sizeBytes":7824},{"name":"arrays.md","path":"packages/docs/versioned_docs/version-5.24.10/json-schema/arrays.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/json-schema/arrays.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":2178,"sizeBytes":8155},{"name":"definitions.md","path":"packages/docs/versioned_docs/version-5.24.10/json-schema/definitions.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/json-schema/definitions.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":258,"sizeBytes":1058},{"name":"dependencies.md","path":"packages/docs/versioned_docs/version-5.24.10/json-schema/dependencies.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/json-schema/dependencies.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1112,"sizeBytes":4820},{"name":"objects.md","path":"packages/docs/versioned_docs/version-5.24.10/json-schema/objects.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/json-schema/objects.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":823,"sizeBytes":3174},{"name":"oneof.md","path":"packages/docs/versioned_docs/version-5.24.10/json-schema/oneof.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/json-schema/oneof.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":552,"sizeBytes":2060},{"name":"single.md","path":"packages/docs/versioned_docs/version-5.24.10/json-schema/single.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/json-schema/single.md","title":"Json-schema Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1249,"sizeBytes":4692},{"name":"v2.x upgrade guide.md","path":"packages/docs/versioned_docs/version-5.24.10/migration-guides/v2.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/migration-guides/v2.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":942,"sizeBytes":3475},{"name":"v3.x upgrade guide.md","path":"packages/docs/versioned_docs/version-5.24.10/migration-guides/v3.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/migration-guides/v3.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":480,"sizeBytes":1973},{"name":"v4.x upgrade guide.md","path":"packages/docs/versioned_docs/version-5.24.10/migration-guides/v4.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/migration-guides/v4.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":181,"sizeBytes":750},{"name":"v5.x upgrade guide.md","path":"packages/docs/versioned_docs/version-5.24.10/migration-guides/v5.x upgrade guide.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/migration-guides/v5.x upgrade guide.md","title":"Migration-guides Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":6655,"sizeBytes":27067},{"name":"themes.md","path":"packages/docs/versioned_docs/version-5.24.10/usage/themes.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/usage/themes.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":524,"sizeBytes":2064},{"name":"validation.md","path":"packages/docs/versioned_docs/version-5.24.10/usage/validation.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/usage/validation.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":7873,"sizeBytes":31901},{"name":"widgets.md","path":"packages/docs/versioned_docs/version-5.24.10/usage/widgets.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_docs/version-5.24.10/usage/widgets.md","title":"Usage Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1975,"sizeBytes":7426},{"name":"version-3.2.1-sidebars.json","path":"packages/docs/versioned_sidebars/version-3.2.1-sidebars.json","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_sidebars/version-3.2.1-sidebars.json","title":"Versioned_sidebars Skill","category":"anthropic-skill","format":"json","content":"","frontmatter":{"docs":[{"type":"autogenerated","dirName":"."}]},"isInternal":false,"tokens":28,"sizeBytes":84},{"name":"version-4.2.3-sidebars.json","path":"packages/docs/versioned_sidebars/version-4.2.3-sidebars.json","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_sidebars/version-4.2.3-sidebars.json","title":"Versioned_sidebars Skill","category":"anthropic-skill","format":"json","content":"","frontmatter":{"docs":[{"type":"autogenerated","dirName":"."}]},"isInternal":false,"tokens":28,"sizeBytes":84},{"name":"version-5.24.10-sidebars.json","path":"packages/docs/versioned_sidebars/version-5.24.10-sidebars.json","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versioned_sidebars/version-5.24.10-sidebars.json","title":"Versioned_sidebars Skill","category":"anthropic-skill","format":"json","content":"","frontmatter":{"docs":[{"type":"autogenerated","dirName":"."}]},"isInternal":false,"tokens":28,"sizeBytes":84},{"name":"versions.json","path":"packages/docs/versions.json","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/versions.json","title":"Docs Skill","category":"anthropic-skill","format":"json","content":"","isInternal":false,"tokens":26,"sizeBytes":38},{"name":"README.md","path":"packages/antd/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/antd/README.md","title":"antd Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1186,"sizeBytes":4100},{"name":"README.md","path":"packages/chakra-ui/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/chakra-ui/README.md","title":"chakra-ui Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1457,"sizeBytes":5206},{"name":"README.md","path":"packages/core/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/core/README.md","title":"core Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1076,"sizeBytes":3875},{"name":"README.md","path":"packages/daisyui/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/daisyui/README.md","title":"daisyui Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1758,"sizeBytes":6895},{"name":"README.md","path":"packages/docs/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/docs/README.md","title":"docs Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":129,"sizeBytes":608},{"name":"README.md","path":"packages/fluentui-rc/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/fluentui-rc/README.md","title":"fluentui-rc Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1264,"sizeBytes":4365},{"name":"README.md","path":"packages/mantine/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/mantine/README.md","title":"mantine Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1556,"sizeBytes":5624},{"name":"README.md","path":"packages/mui/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/mui/README.md","title":"mui Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1465,"sizeBytes":5098},{"name":"README.md","path":"packages/primereact/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/primereact/README.md","title":"primereact Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1057,"sizeBytes":3631},{"name":"README.md","path":"packages/react-bootstrap/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/react-bootstrap/README.md","title":"react-bootstrap Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1028,"sizeBytes":3705},{"name":"README.md","path":"packages/semantic-ui/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/semantic-ui/README.md","title":"semantic-ui Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1580,"sizeBytes":5941},{"name":"README.md","path":"packages/shadcn/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/shadcn/README.md","title":"shadcn Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1819,"sizeBytes":6585},{"name":"README.md","path":"packages/snapshot-tests/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/snapshot-tests/README.md","title":"snapshot-tests Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":990,"sizeBytes":3602},{"name":"README.md","path":"packages/utils/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/utils/README.md","title":"utils Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":896,"sizeBytes":3310},{"name":"README.md","path":"packages/validator-ajv8/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/validator-ajv8/README.md","title":"validator-ajv8 Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1811,"sizeBytes":6493},{"name":"README.md","path":"packages/validator-ata/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/validator-ata/README.md","title":"validator-ata Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":1326,"sizeBytes":5185},{"name":"README.md","path":"packages/validator-cfworker/README.md","rawUrl":"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/HEAD/packages/validator-cfworker/README.md","title":"validator-cfworker Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":820,"sizeBytes":3373}],"systemPromptSnippet":"\n\n# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages (parallel)\npnpm run build\n\n# Build all packages (sequential, use if parallel causes issues)\npnpm run build-serial\n\n# Run all tests\npnpm test\n\n# Lint (oxlint, type-aware)\npnpm run lint\n\n# Typecheck every package and its tests\npnpm run typecheck\n\n# Dead code / unused dependency check\npnpm run knip\n\n# Format check / format source files (oxfmt)\npnpm run cs-check\npnpm run cs-format\n\n# Format check / format every file in the repo, including configs and markdown\npnpm run format-check\npnpm run format\n\n# Run a single package's tests\ncd packages/core && pnpm test\n\n# Watch mode for a single package\ncd packages/core && pnpm run test:watch\n\n# Update snapshots\ncd packages/snapshot-tests && pnpm run test:update\n\n# Start the playground (interactive demo)\ncd packages/playground && pnpm start\n\n# Full sanity check (lint + knip + build + test)\npnpm run sanity-check\n```\n\nCI runs lint, knip, build, typecheck, and test in that order, so run those before pushing. Per-package `tsc` misses the test and playground projects; only the root `typecheck` covers them.\n\nIndividual package builds run `build:ts` (`tsc -b`, emits `lib/`) and then bundle `dist/` in three formats: `build:cjs` and `build:esm` via esbuild, `build:umd` via rollup.\n\n## Architecture\n\nThis is an **pnpm workspaces + Nx** monorepo. All packages live under `packages/` and are scoped as `@rjsf/*`.\n\n### Package roles\n\n| Package | Role |\n| ------------------------------------------------------------------- | ------------------------------------------------------------------------ |\n| `@rjsf/utils` | Shared types, 80+ utility functions, schema helpers. No UI dependencies. |\n| `@rjsf/core` | Core `Form` component, Bootstrap 3 as default theme, `withTheme()` HOC. |\n| `@rjsf/validator-ajv8` | AJV 8-based validator. Exported via `customizeValidator()`. |\n| `@rjsf/snapshot-tests` | Shared snapshot test suite consumed by all theme packages. |\n| Theme packages (`@rjsf/mui`, `@rjsf/antd`, `@rjsf/chakra-ui`, etc.) | UI-library-specific implementations of fields, widgets, and templates. |\n| `@rjsf/playground` | Vite app importing all themes, used for manual testing and demos. |\n| `@rjsf/docs` | Docusaurus documentation site. |\n\n### Registry pattern (the plugin system)\n\nThe `Registry` object is the core extension point passed to every field/widget/template:\n\n```typescript\nRegistry = {\n fields, // Map of field type → Field component\n widgets, // Map of widget name → Widget component\n templates, // Layout/structural templates\n rootSchema, // Root JSON Schema\n formContext, // Arbitrary context object threaded to all components\n schemaUtils, // Schema parsing & validation helpers\n translateString,\n globalFormOptions, // Form-level options available to every template, field, and widget\n globalUiOptions, // Optional; global ui:options applied to every field\n uiSchemaDefinitions, // Optional; uiSchema fragments keyed by $ref path, applied when that $ref resolves\n};\n```\n\nOverride fields/widgets/templates per-form via props, or globally via `withTheme()`.\n\n### Theme pattern\n\nEvery theme package follows the same structure:\n\n1. Imports `withTheme` from `@rjsf/core`\n2. Defines custom `Templates`, `Widgets`, and optionally `Fields`\n3. Calls `withTheme({ templates, widgets, fields })` to produce a themed `Form`\n4. Exports: `Form` (default), `Theme`, `Templates`, `Widgets`\n\n### Field → Widget → Template hierarchy\n\n- **Fields** handle schema-level logic (ObjectField, ArrayField, MultiSchemaField for oneOf/anyOf, etc.)\n- **Widgets** handle individual input rendering (TextWidget, SelectWidget, CheckboxWidget, etc.)\n- **Templates** control structural/layout rendering (FieldTemplate, ArrayFieldTemplate, ButtonTemplates, etc.)\n\nFields select which widget to render based on schema `type` and `ui:widget`. Templates wrap the output for consistent styling.\n\nWhen making a change to a widget or template, consider if the change should be generalized to all theme packages. If substantial logic is duplicated across themes, consider refactoring the logic to `@rjsf/utils` or `@rjsf/core`.\n\n### Form rendering flow\n\n1. Caller provides `schema`, `validator` (required), `formData`, and `uiSchema`\n2. `Form` creates `schemaUtils` from validator + schema\n3. Schema is recursively decomposed into fields → widgets → templates\n4. On change/blur: callbacks fire with updated `formData` and `errorSchema`\n5. On submit: full validation runs, then `onSubmit` fires (or `onError` if invalid)\n\n### Key `@rjsf/utils` exports to know\n\n- Schema helpers: `findSchemaDefinition`, `mergeSchemas`, `getSchemaType`, `createSchemaUtils`\n- Form data: `mergeDefaultsWithFormData`, `removeOptionalEmptyObjects`\n- Error handling: `toErrorSchema`, `toErrorList`\n- Enum helpers: `enumOptionsSelectValue`, `enumOptionsDeselectValue`\n- React hooks: `useDeepCompareMemo`, `useFileWidgetProps`, `useAltDateWidgetProps`\n\n## Code style\n\n- **TypeScript strict mode**, `esnext` target, `verbatimModuleSyntax` (type-only imports must be `import type`), relative imports include the `.ts`/`.tsx` extension\n- **oxfmt** (`.oxfmtrc.json`): single quotes, JSX single quotes, 120-char print width, sorted imports with React first\n- **oxlint** (`.oxlintrc.json`): the `airbnb-typescript` rule set translated to oxlint, plus `typescript`, `react`, `jsx-a11y`, and `import` plugins; enforces curly braces, no-console, React rules of hooks\n- **knip** (`knip.jsonc`): fails CI on unused files, exports, and dependencies\n- Pre-commit hook (Husky + lint-staged) runs `oxlint --fix` and `oxfmt` on staged files\n\n## Code comments\n\n- Default to no comments. Write self-documenting code — clear names and structure — as the primary means of explanation.\n- When a comment is warranted, explain the WHY (rationale, constraints, non-obvious tradeoffs), not the WHAT — well-named code already says what it does.\n- Don't leave \"before/after\" or diff-style commentary in code comments or in this file. That belongs in commit messages and PR descriptions, not in code that has to keep reading true after the change ships.\n\n## Changelog\n\n- When adding an entry to `CHANGELOG.md`, append it as the last bullet under the relevant package's heading (e.g. `## @rjsf/daisyui`) — after the existing bullets, not inserted above or among them.\n\n## Testing\n\n- Vitest, jsdom, Testing Library; shared config in `testing/vitest.base.mts`, extended per package\n- Tests resolve `@rjsf/*` imports to TypeScript source via the `@rjsf/source` export condition, so no build is needed before running them\n- `@rjsf/utils` and the validator packages enforce 100% coverage\n- Snapshot tests in `@rjsf/snapshot-tests` are shared across theme packages — run `test:update` there when changing core rendering\n- Node >=20 required; `.nvmrc` pins 24\n\n\n# Quickstart\n\nLet's walk through setup of a form after installing the dependency properly.\nNOTE: As of version 5, the `Form` now requires you to provide a `validator` implementation. We recommend the one from `@rjsf/validator-ajv8`.\n\n## Form schema\n\nFirst, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also render an object with multiple fields with the below schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nFor more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](json-schema/single.md).\n\n## Form uiSchema\n\nThe uiSchema is used to add more customization to the form's look and feel. Use the `classNames`\nattribute of the uiSchema to add a custom CSS class name to the form:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:classNames': 'custom-css-class',\n};\n\nrender(, document.getElementById('app'));\n```\n\nTo customize object fields in the uiSchema, the structure of the\nuiSchema should be `{key: value}`, where `key` is the property key and `value` is an\nobject with the uiSchema configuration for that particular property. For example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Test form',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n name: {\n 'ui:classNames': 'custom-class-name',\n },\n age: {\n 'ui:classNames': 'custom-class-age',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```tsx\nimport Form from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n title: {\n type: 'string',\n },\n done: {\n type: 'boolean',\n },\n },\n};\n\nconst formData = {\n title: 'First task',\n done: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If your form has a single field, pass a single value to `formData`. ex: `formData=\"Charlie\"`\n\n> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\nYou can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `` component; see the [Form Props Reference](./api-reference/form-props.md) for more details.\n\n### Controlled component\n\nBy default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the\n`onChange` and `formData` props as in the below example:\n\n```tsx\nimport Form from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst App = () => {\n const [formData, setFormData] = React.useState(null);\n return (\n setFormData(e.formData)}\n validator={validator}\n />\n );\n};\n\nrender(, document.getElementById('app'));\n```\n\n\n# Custom Templates\n\nThis is an advanced feature that lets you customize even more aspects of the form:\n\n| | Custom Field | Custom Template | Custom Widget |\n| --------------------- | ----------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| **What it does** | Overrides all behaviour | Overrides just the layout (not behaviour) | Overrides just the input box (not layout, labels, or help, or validation) |\n| **Usage** | Global or per-field | Global or per-field | Global or per-field |\n| **Global Example** | `` | `` | `` |\n| **Per-Field Example** | `\"ui:field\": MyCustomField` | `\"ui:ArrayFieldTemplate\": MyArrayTemplate` | `\"ui:widget\":MyCustomWidget` |\n| **Documentation** | [Custom Fields](custom-widgets-fields.md) | See documentation below | [Custom Widgets](custom-widgets-fields.md) |\n\nIn version 5, all existing `templates` were consolidated into a new `TemplatesType` interface that is provided as part of the `Registry`.\nThey can also be overloaded globally on the `Form` via the `templates` prop as well as globally or per-field through the `uiSchema`.\nFurther, many new templates were added or repurposed from existing `widgets` and `fields` in an effort to simplify the effort needed by theme authors to build new and/or maintain current themes.\nThese new templates can also be overridden by individual users to customize the specific needs of their application.\nA special category of templates, `ButtonTemplates`, were also added to support the easy replacement of the `Submit` button on the form, the `Add` and `Remove` buttons associated with `additionalProperties` and `patternProperties` on objects and elements of arrays, as well as the `Move up` and `Move down` buttons used for reordering arrays.\nThis category, unlike the others, can only be overridden globally via the `templates` prop on `Form`.\n\nBelow is the table that lists all the `templates`, their props interface, their `uiSchema` name and from where they originated in the previous version of RJSF:\n\n| Template | Props Type | UiSchema name | Origin |\n| --------------------------------------------------------------- | ---------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [ArrayFieldTemplate](#arrayfieldtemplate) | ArrayFieldTemplateProps | ui:ArrayFieldTemplate | Formerly `Form.ArrayFieldTemplate` or `Registry.ArrayFieldTemplate` |\n| [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate) | ArrayFieldDescriptionProps | ui:ArrayFieldDescriptionTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemTemplate](#arrayfielditemtemplate) | ArrayFieldItemTemplateProps | ui:ArrayFieldItemTemplate | Formerly an internal class for `ArrayFieldTemplate`s in all themes, refactored as a template in each theme, used in all `ArrayFieldTemplate` implementations |\n| [ArrayFieldItemButtonsTemplate](#arrayfielditembuttonstemplate) | ArrayFieldItemButtonsTemplateProps | ui:ArrayFieldItemButonsTemplate | Formerly an internal class for `ArrayFieldItemTemplate`s in all themes, refactored as a template in the `core`, used in all `ArrayFieldItemTemplate` implementations |\n| [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) | ArrayFieldTitleProps | ui:ArrayFieldTitleTemplate | Formerly part of `@rjsf/core` ArrayField, refactored as a template, used in all `ArrayFieldTemplate` implementations. |\n| [BaseInputTemplate](#baseinputtemplate) | WidgetProps | ui:BaseInputTemplate | Formerly a `widget` in `@rjsf.core` moved to `templates` and newly implemented in each theme to maximize code reuse. |\n| [CyclicSchemaExpandTemplate](#cyclicschemaexpandtemplate) | CyclicSchemaExpandProps | ui:CyclicSchemaExpandTemplate | Added in RJSF v6 to support circular `$ref` cycle detection |\n| [DescriptionFieldTemplate](#descriptionfieldtemplate) | DescriptionFieldProps | ui:DescriptionFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [ErrorListTemplate](#errorlisttemplate) | ErrorListProps | ui:ErrorListTemplate | Formerly `Form.ErrorList` moved to `templates` with the `Templates` suffix. Previously implemented in each theme. |\n| [FallbackFieldTemplate](#fallbackfieldtemplate) | FallbackFieldTemplateProps | ui:FallbackFieldTemplate | Added in RJSF v6 |\n| [FieldErrorTemplate](#fielderrortemplate) | FieldErrorProps | ui:FieldErrorTemplate | Formerly internal `ErrorList` component accessible only to `SchemaField` |\n| [FieldHelpTemplate](#fieldhelptemplate) | FieldHelpProps | ui:FieldHelpTemplate | Formerly internal `Help` component accessible only to `SchemaField` |\n| [FieldTemplate](#fieldtemplate) | FieldTemplateProps | ui:FieldTemplate | Formerly `Form.FieldTemplate` or `Registry.FieldTemplate` |\n| [GridTemplate](#gridtemplate) | GridTemplateProps | ui:GridTemplate | Theme dependent implementations of a Grid element for either rows or columns |\n| [MultiSchemaFieldTemplate](#multischemafieldtemplate) | MultiSchemaFieldTemplateProps | ui:MultiSchemaFieldTemplate | Formerly part of `@rjsf/core `MultiSchemaField`, refactored as a template |\n| [ObjectFieldTemplate](#objectfieldtemplate) | ObjectFieldTemplateProps | ui:ObjectFieldTemplate | Formerly `Form.ObjectFieldTemplate` or `Registry.ObjectFieldTemplate` |\n| [OptionalDataControlsTemplate](#optionaldatacontrolstemplate) | OptionalDataControlsTemplateProps | ui:OptionalDataControlsTemplate | New feature in V6 |\n| [TitleFieldTemplate](#titlefieldtemplate) | TitleFieldProps | ui:TitleFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. Previously implemented in each theme. |\n| [UnsupportedFieldTemplate](#unsupportedfieldtemplate) | UnsupportedFieldProps | ui:UnsupportedFieldTemplate | Formerly a `field` in `@rjsf.core` moved to `templates` with the `Template` suffix. |\n| [WrapIfAdditionalTemplate](#wrapifadditionaltemplate) | WrapIfAdditionalTemplateProps | ui:WrapIfAdditionalTemplate | Formerly an internal component in `@rjsf.core`. Previously implemented in most themes. |\n| [ButtonTemplates.AddButton](#addbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveDownButton](#movedownbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.MoveUpButton](#moveupbutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.RemoveButton](#removebutton) | IconButtonProps | n/a | Formerly an internal implementation in each theme |\n| [ButtonTemplates.SubmitButton](#submitbutton) | SubmitButtonProps | n/a | Formerly a `field` in each theme move to `templates.ButtonTemplates` |\n\n## ArrayFieldTemplate\n\nYou can use an `ArrayFieldTemplate` to customize how your arrays are rendered.\nThis allows you to customize your array, and each element in the array.\nIf you only want to customize how the array's title, description or how the array items are presented, you may want to consider providing your own [ArrayFieldDescriptionTemplate](#arrayfielddescriptiontemplate), [ArrayFieldItemTemplate](#arrayfielditemtemplate) and/or [ArrayFieldTitleTemplate](#arrayfieldtitletemplate) instead.\nYou can also customize arrays by specifying a widget in the relevant `ui:widget` schema, more details over on [Custom Widgets](../json-schema/arrays.md#custom-widgets).\n\n```tsx\nimport { ArrayFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldTemplate from './ArrayFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': ArrayFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldTemplate': 'CustomArrayFieldTemplate',\n};\n```\n\nPlease see the [customArray.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customArray.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for another example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `fieldPathId`: An object containing the id for this object & ids for its properties.\n- `items`: An array of React nodes representing the items in the array.\n- `onAddClick: (event?) => void`: A function that adds a new item to the end of the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formData`: The formData for this array.\n- `errorSchema`: The optional validation errors for the array field and the items within it, in the form of an `ErrorSchema`\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget\n- `registry`: The `registry` object.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.\n\n## ArrayFieldDescriptionTemplate\n\nThe out-of-the-box version of this template will render the `DescriptionFieldTemplate` with a generated id, if there is a `description` otherwise nothing is rendered.\nIf you want different behavior for the rendering of the description of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL descriptions in the `Form`, see [DescriptionFieldTemplate](#descriptionfieldtemplate)\n\n```tsx\nimport { ArrayFieldDescriptionProps, RJSFSchema, descriptionId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldDescriptionTemplate(props: ArrayFieldDescriptionProps) {\n const { description, fieldPathId } = props;\n const id = descriptionId(fieldPathId);\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldDescriptionTemplate`:\n\n- `description`: The description of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `registry`: The `registry` object.\n\n## ArrayFieldItemTemplate\n\nThe `ArrayFieldItemTemplate` is used to render the representation of a single item in an array.\nAll of the `ArrayFieldTemplate` implementations in all themes get this template from the `registry` in order to render array fields items.\nEach theme has an implementation of the `ArrayFieldItemTemplate` to render an array field item in a manner best suited to the theme.\nIf you want to change how an array field item is rendered you can customize this template (for instance to remove the buttons rendered by `ArrayFieldItemButtonsTemplate`).\n\n```tsx\nimport { ArrayFieldItemTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {\n const { children, className } = props;\n return
{children}
;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemTemplate`:\n\n- `children`: The html for the item's content.\n- `buttonsProps`: The props to pass to the `ArrayFieldItemButtonTemplate`.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `itemKey`: A stable, unique key for the array item.\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n- `parentUiSchema`: The UI schema of the array item's parent array field, used for customization in some themes\n\n## ArrayFieldItemButtonTemplate\n\nThe `ArrayFieldItemButtonTemplate` is used to render the representation of the buttons used for copying, moving and deleting an item in an array.\nAll of the `ArrayFieldItemTemplate` implementations in all themes get this template from the `registry` in order to render array fields items' buttons.\nCurrently, only the `core` them has an implementation of this template as the button rendering is identical across all themes.\nIf you want to change how an array field item's buttons are rendered you can customize this template (for instance to remove the move up/down and remove buttons).\n\n```tsx\nimport { useMemo } from 'react';\nimport { ArrayFieldTemplateItemButtonsType, buttonId, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldItemButtonsTemplate(props: ArrayFieldTemplateItemButtonsType) {\n const { disabled, readonly, hasCopy, fieldPathId, index, onCopyIndexClick, registry, uiSchema } = props;\n const { CopyButton } = registry.templates.ButtonTemplates;\n const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);\n if (!hasCopy) {\n return undefined;\n }\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `ArrayFieldItemButtonsTemplate`:\n\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `hasCopy`: A boolean value stating whether the array item can be copied.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `index`: A number stating the index the array item occurs in `items`.\n- `totalItems`: A number stating the total number `items` in the array.\n- `onAddItem: event?) => void`: Callback function that adds a new item below this item.\n- `onCopyItem: (event?) => void`: Callback function that copies this item below itself.\n- `onRemoveItem: (event?) => void`: Callback function that removes the item from the list.\n- `onMoveUpItem: (event?) => void`: Callback function that moves the item up one spot in the list\n- `onMoveDownItem: (event?) => void`: Callback function that moves the item down one spot in the list\n- `readonly`: A boolean value stating if the array item is read-only.\n- `schema`: The schema object for this array item.\n- `style`: The optional style to pass to all of the buttons\n- `uiSchema`: The uiSchema object for this array item.\n- `registry`: The `registry` object.\n\n## ArrayFieldTitleTemplate\n\nThe out-of-the-box version of this template will render the `TitleFieldTemplate` with a generated id, if there is a `title` otherwise nothing is rendered.\nIf you want a different behavior for the rendering of the title of an array field, you can customize this template.\nIf you want a different behavior for the rendering of ALL titles in the `Form`, see [TitleFieldTemplate](#titlefieldtemplate)\n\n```tsx\nimport { ArrayFieldTitleTemplateProps, RJSFSchema, titleId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nfunction ArrayFieldTitleTemplate(props: ArrayFieldTitleProps) {\n const { title, fieldPathId } = props;\n const id = titleId(fieldPathId);\n return

{title}

;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',\n};\n```\n\nThe following props are passed to each `ArrayFieldTitleTemplate`:\n\n- `title`: The title of the array field being rendered.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy.\n- `schema`: The schema object for this array field.\n- `uiSchema`: The uiSchema object for this array field.\n- `required`: A boolean value stating if the field is required\n- `registry`: The `registry` object.\n\n## BaseInputTemplate\n\nThe `BaseInputTemplate` is the template to use to render the basic `` component for a theme.\nIt is used as the template for rendering many of the `` based widgets that differ by `type` and callbacks only.\nFor example, the `TextWidget` implementation in `core` is simply a wrapper around `BaseInputTemplate` that it gets from the `registry`.\nAdditionally, each theme implements its own version of `BaseInputTemplate` without needing to provide a different implementation of `TextWidget`.\n\nIf you desire a different implementation for the `` based widgets, you can customize this template.\nFor instance, say you have a `CustomTextInput` component that you want to integrate:\n\n```tsx\nimport { ChangeEvent, FocusEvent } from 'react';\nimport { getInputProps, RJSFSchema, BaseInputTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nimport CustomTextInput from '../CustomTextInput';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction BaseInputTemplate(props: BaseInputTemplateProps) {\n const {\n schema,\n id,\n options,\n label,\n value,\n type,\n placeholder,\n required,\n disabled,\n readonly,\n autofocus,\n onChange,\n onChangeOverride,\n onBlur,\n onFocus,\n rawErrors,\n hideError,\n uiSchema,\n registry,\n ...rest\n } = props;\n const onTextChange = ({ target: { value: val } }: ChangeEvent) => {\n // Use the options.emptyValue if it is specified and newVal is also an empty string\n onChange(val === '' ? options.emptyValue || '' : val);\n };\n const onTextBlur = ({ target: { value: val } }: FocusEvent) => onBlur(id, val);\n const onTextFocus = ({ target: { value: val } }: FocusEvent) => onFocus(id, val);\n\n const inputProps = { ...rest, ...getInputProps(schema, type, options) };\n const hasError = rawErrors.length > 0 && !hideError;\n\n return (\n \n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### Wrapping BaseInputTemplate to customize it\n\nSometimes you just need to pass some additional properties to the existing `BaseInputTemplate`.\nThe way to do this varies based upon whether you are using `core` or some other theme (such as `mui`):\n\n```tsx\nimport { BaseInputTemplateProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Templates } from '@rjsf/mui';\n\nconst {\n templates: { BaseInputTemplate },\n} = getDefaultRegistry(); // To get templates from core\n// const { BaseInputTemplate } = Templates; // To get templates from a theme do this\n\nfunction MyBaseInputTemplate(props: BaseInputTemplateProps) {\n const customProps = {};\n // get your custom props from where you need to\n return ;\n}\n```\n\nThe following props are passed to the `BaseInputTemplate`:\n\n- `id`: The generated id for this widget;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `hideError`: A boolean value stating if the widget is hiding its errors.\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onChangeOverride`: A `BaseInputTemplate` implements a default `onChange` handler that it passes to the HTML input component to handle the `ChangeEvent`. Sometimes a widget may need to handle the `ChangeEvent` using custom logic. If that is the case, that widget should provide its own handler via this prop;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties` and `patternProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](./custom-widgets-fields.md#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: The `registry` object\n\n## CyclicSchemaExpandTemplate\n\nThe `CyclicSchemaExpandTemplate` is the template rendered by `CyclicSchemaField` when a circular `$ref` cycle is detected in the schema.\nRJSF automatically detects when a `$ref` would recurse indefinitely (e.g. a schema whose property references its own root) and stops rendering at the cycle boundary.\nAt that point `CyclicSchemaField` renders this template, which shows a warning message and an expand button that the user can click to render one additional level of the recursive structure.\n\nEach theme provides its own implementation.\nYou can replace the template globally via the `templates` prop on `Form`, or per-field via `ui:CyclicSchemaExpandTemplate` in the `uiSchema`.\n\n```tsx\nimport { CyclicSchemaExpandProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\n// A schema that is self-referencing\nconst schema: RJSFSchema = {\n $schema: 'http://json-schema.org/draft-07/schema#',\n type: 'object',\n title: 'Node',\n properties: {\n value: { type: 'string' },\n child: { $ref: '#' },\n },\n};\n\nfunction CyclicSchemaExpandTemplate(props: CyclicSchemaExpandProps) {\n const { name, fieldPathId, onExpand } = props;\n const buttonId = `${fieldPathId.$id}-button`;\n return (\n
\n Circular reference detected for field "{name}"\n \n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also provide a per-field template via `uiSchema`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': CyclicSchemaExpandTemplate,\n};\n```\n\nor a string value from the `Registry`:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:CyclicSchemaExpandTemplate': 'CustomCyclicSchemaExpandTemplate',\n};\n```\n\nThe following props are passed to the `CyclicSchemaExpandTemplate` as defined by `CyclicSchemaExpandProps` in `@rjsf/utils`:\n\n- `name`: The unique name of the field at the cycle boundary, usually the property name within its parent object.\n- `fieldPathId`: The `FieldPathId` of the field in the hierarchy; use `fieldPathId.$id` to get the HTML id string.\n- `onExpand`: Callback to call when the user wants to render one additional level; receives the field's id string.\n- `schema`: The schema object for the field at the cycle boundary.\n- `uiSchema`: The uiSchema object for this field.\n- `registry`: The `registry` object.\n\n## DescriptionFieldTemplate\n\nEach theme implements a `DescriptionFieldTemplate` used to render the description of a field.\nIf you want to customize how descriptions are rendered you can.\n\n```tsx\nimport { DescriptionFieldProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction DescriptionFieldTemplate(props: DescriptionFieldProps) {\n const { description, id } = props;\n return (\n
\n Description\n {description}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `DescriptionFieldTemplate`:\n\n- `description`: The description of the field being rendered.\n- `id`: The id of the field in the hierarchy.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ErrorListTemplate\n\nThe `ErrorListTemplate` is the template that renders the all the errors associated with the fields in the `Form`, at the top.\nEach theme implements a `ErrorListTemplate` used to render its errors using components for the theme's toolkit.\nIf you want to customize how all the errors are rendered you can.\n\n```tsx\nimport { ErrorListProps, RJSFValidationError, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction ErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: RJSFValidationError, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `ErrorListTemplate`:\n\n- `schema`: The schema that was passed to `Form`\n- `uiSchema`: The uiSchema that was passed to `Form`\n- `errors`: An array of all errors in this `Form`.\n- `errorSchema`: The `ErrorSchema` constructed by `Form`\n\n## FallbackFieldTemplate\n\nThe `FallbackFieldTemplate` is the template that renders opt-in fallback UI to control fields of unknown or unhandled types. Usage of this feature is controlled by the [`useFallbackUiForUnsupportedType` Form prop](../api-reference/form-props.md#usefallbackuiforunsupportedtype).\n\n```tsx\nimport { FallbackFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'unknownType',\n title: 'My input',\n};\n\nfunction FallbackFieldTemplate(props: FallbackFieldTemplateProps) {\n const { typeSelector, schemaField } = props;\n return (\n
\n
{typeSelector}
\n
{schemaField}
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FallbackFieldTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `registry`: The `Registry` object\n 1\n\n## FieldErrorTemplate\n\nThe `FieldErrorTemplate` is the template that renders all the errors associated a single field.\nIf you want to customize how the errors are rendered you can.\n\n```tsx\nimport { FieldErrorProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldErrorTemplate(props: FieldErrorProps) {\n const { errors } = props;\n return (\n
\n Errors\n
    \n {errors.map((error: string, i: number) => {\n return (\n
  • \n {error.stack}\n
    • \n );\n })}\n
\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldErrorTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errors`: An array of all errors for this field\n- `errorSchema`: The `ErrorSchema` for this field\n- `registry`: The `Registry` object\n\n## FieldHelpTemplate\n\nThe `FieldHelpTemplate` is the template that renders the help associated a single field.\nIf you want to customize how the help is rendered you can.\n\n```tsx\nimport { FieldHelpProps, RJSFSchema, helpId } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction FieldHelpTemplate(props: FieldHelpProps) {\n const { help, fieldPathId } = props;\n const id = helpId(fieldPathId);\n return ;\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `FieldHelpTemplate`:\n\n- `schema`: The schema for the field\n- `uiSchema`: The uiSchema for the field\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `help`: The help information to be rendered\n- `registry`: The `Registry` object\n\n## FieldTemplate\n\nTo take control over the inner organization of each field (each form row), you can define a _field template_ for your form.\n\nA field template is basically a React stateless component being passed field-related props, allowing you to structure your form row as you like.\n\n```tsx\nimport { FieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction CustomFieldTemplate(props: FieldTemplateProps) {\n const { id, classNames, style, label, help, required, description, errors, children } = props;\n return (\n
\n \n {description}\n {children}\n {errors}\n {help}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport CustomFieldTemplate from './CustomFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': CustomFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:FieldTemplate': 'CustomFieldTemplate',\n};\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](../api-reference/uiSchema.md#classnames) defined in your uiSchema.\n- `style`: An object containing the `StyleHTMLAttributes` defined in the `uiSchema`.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionFieldTemplate`](#descriptionfieldtemplate) defined in the `templates` passed to the `Form`).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `hideError`: A boolean value stating if the field is hiding its errors\n- `disabled`: A boolean value stating if the field is disabled.\n- `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.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `onChange`: The value change event handler; Can be called with a new value to change the value for this field.\n- `formData`: The formData for this field.\n- `registry`: The `registry` object.\n\n> Note: you can only define a single global field template for a form, but you can set individual field templates per property using `\"ui:FieldTemplate\"`.\n\n## GridTemplate\n\nThe `GridTemplate` is the template that renders a theme dependent Grid for either a row or column.\nWhile it has only two explicit properties, it extends the `GenericObjectTemplate` in order to support passing any of the properties associated with a Grid implementation for any theme.\nIf you want to customize how grids are rendered you can.\n\n```tsx\nimport { Grid2 } from '@mui/material';\nimport { GridTemplateProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\nimport classNames from 'classnames';\n\nconst schema: RJSFSchema = {\n type: 'string',\n title: 'My input',\n description: 'input description',\n};\n\nfunction GridTemplate(props: FieldHelpProps) {\n const { children, column, className, ...rest } = props;\n return (\n \n {children}\n \n );\n}\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to the `GridTemplate`:\n\n- `children`: The contents of the grid template\n- `column`: Optional flag indicating whether the grid element represents a column, necessary for themes which have components for Rows vs Column\n\n## MultiSchemaFieldTemplate\n\nEach theme implements a `MultiSchemaFieldTemplate` used to render the layout of a MultiSchemaField, i.e. a field described by a `oneOf` or `anyOf` schema.\nThe template typically renders a Widget used to select the schema to use, as well as a field for the selected schema.\n\n```tsx\nimport { MultiSchemaFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n myField: {\n oneOf: [\n {\n type: 'string',\n title: 'String Field',\n description: 'A field that accepts a string',\n },\n {\n type: 'number',\n title: 'Number Field',\n description: 'A field that accepts a number',\n },\n ],\n },\n },\n};\n\nfunction MultiSchemaFieldTemplate(props: MultiSchemaFieldTemplateProps) {\n const { selector, optionSchemaField } = props;\n return (\n
\n {selector}\n
\n {optionSchemaField}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to the `MultiSchemaFieldTemplate`:\n\n- `selector`: The rendered Widget used to select a multischema option.\n- `optionSchemaField`: The rendered SchemaField representing the selected option.\n- `schema`: The schema object for the field.\n- `uiSchema`: The uiSchema object for the field.\n- `registry`: The `registry` object.\n\n## ObjectFieldTemplate\n\n```tsx\nimport { ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n title: 'Object title',\n description: 'Object description',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nfunction ObjectFieldTemplate(props: ObjectFieldTemplateProps) {\n return (\n
\n {props.title}\n {props.description}\n {props.properties.map((element) => (\n
{element.content}
\n ))}\n
\n );\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property with your Component :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\nimport ObjectFieldTemplate from './ObjectFieldTemplate';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': ObjectFieldTemplate,\n};\n```\n\nor a string value from the `Registry` :\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:ObjectFieldTemplate': 'ObjectFieldTemplate',\n};\n```\n\nPlease see the [customObject.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customObject.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate` as defined by the `ObjectFieldTemplateProps` in `@rjsf/utils`:\n\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `disabled`: A boolean value stating if the object is disabled.\n- `properties`: An array of object representing the properties in the object. Each of the properties represent a child with properties described below.\n- `onAddProperty: () => void`: Callback to use in order to add an new additionalProperty to the object field (to be used with additionalProperties and patternProperties)\n- `readonly`: A boolean value stating if the object is read-only.\n- `required`: A boolean value stating if the object is required.\n- `hideError`: A boolean value stating if the field is hiding its errors.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `fieldPathId`: The FieldPathId of the field in the hierarchy\n- `errorSchema`: The optional validation errors in the form of an `ErrorSchema`\n- `formData`: The form data for the object.\n- `registry`: The `registry` object.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n- `hidden`: A boolean value stating if the property should be hidden.\n\n> Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.\n\n## OptionalDataControlsTemplate\n\nEach theme implements a `OptionalDataControlsTemplate` used to render the `Optional Data Controls` when that feature has been enabled\n\n```tsx\nimport { OptionalDataControlsTemplateProps, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nfunction OptionalDataControlsTemplate(props: OptionalDataControlsTemplateProps) {\n const { id, registry, label, onAddClick, onRemoveClick } = props;\n if (onAddClick) {\n return (\n \n );\n } else if (onRemoveClick) {\n return (\n \n );\n }\n return {label};\n}\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThe following props are passed to each `OptionalDataControlsTemplate` as defined by the `OptionalDataControlsTemplateProps` in `@rjsf/utils`:\n\n- `id`: The generated id for this Optional Data Control instance.\n- `label`: The label to use for the Optional Data Control\n- `onAddClick`: Optional callback to call when clicking on the Optional Data Control to add data\n- `onRemoveClick`: Optional callback to call when clicking on the Optional Data Control to remove data\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `registry`: The `registry` object.\n\n## TitleFieldTemplate\n\nEach theme implements a `TitleFieldTemplate` used to render the title of a fie\n\n\n\n\n# Custom Themes\n\nThe `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component.\nThis theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.\n\n## Usage\n\n```tsx\nimport React, { Component } from 'react';\nimport validator from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\nconst theme: ThemeProps = { widgets: { test: () =>
test
} };\n\nconst ThemedForm = withTheme(theme);\n\nconst Demo = () => ;\n```\n\n## Theme object properties\n\nThe Theme object consists of the same properties as the rjsf `Form` component (such as **widgets**, **fields** and **templates**).\nThe themed-Form component merges together any theme-specific **widgets**, **fields** and **templates** with the default **widgets**, **fields** and **templates**.\nFor instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name.\nThus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`.\nNote that you are not required to pass in either custom **widgets**, **fields** or **templates** when using the custom-themed HOC component;\nyou can essentially redefine the default Form by simply doing `const Form = withTheme({});`.\n\n### Widgets and fields\n\n**widgets** and **fields** should be in the same format as shown [here](./custom-widgets-fields.md).\n\nExample theme with custom widget:\n\n```tsx\nimport { WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst myWidgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst ThemeObject: ThemeProps = { widgets: myWidgets };\nexport default ThemeObject;\n```\n\nThe above can be similarly done for **fields** and **templates**.\n\n### Templates\n\nEach template should be passed into the theme object via the **templates** object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](./custom-templates.md#arrayfieldtemplate) and [ErrorListTemplate](./custom-templates.md#errorlisttemplate) in the theme object:\n\n```tsx\nimport { ArrayFieldTemplateProps, ErrorListProps } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nfunction MyArrayFieldTemplate(props: ArrayFieldTemplateProps) {\n return (\n
\n {props.items.map((element) => element.children)}\n {props.canAdd && }\n
\n );\n}\n\nfunction MyErrorListTemplate(props: ErrorListProps) {\n const { errors } = props;\n return (\n
    \n {errors.map((error) => (\n
  • {error.stack}
    • \n ))}\n
\n );\n}\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n ErrorListTemplate: MyErrorListTemplate,\n },\n widgets: myWidgets,\n};\n\nexport default ThemeObject;\n```\n\n## Overriding other Form props\n\nJust as the theme can override **widgets**, **fields**, any of the **templates**, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.\n\n```tsx\nimport { ThemeProps } from '@rjsf/core';\n\nconst ThemeObject: ThemeProps = {\n templates: {\n ArrayFieldTemplate: MyArrayFieldTemplate,\n },\n fields: myFields,\n showErrorList: false,\n widgets: myWidgets,\n};\n```\n\nThus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).\n\n\n# Custom Widgets and Fields\n\nThe API allows to specify your own custom _widget_ and _field_ components:\n\n- A _widget_ represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A _field_ usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n## Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `BooleanField`\nrenders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the\n`fields` and `widgets` props:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n default: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkbox',\n};\n\nconst CustomCheckbox = function (props: WidgetProps) {\n return (\n \n );\n};\n\nconst widgets: RegistryWidgetsType = {\n CheckboxWidget: CustomCheckbox,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```tsx\nimport { RegistryFieldsType, RegistryWidgetsType } from '@rjsf/utils';\nimport { FormProps } from '@rjsf/core';\n\nconst customFields: RegistryFieldsType = { StringField: CustomString };\nconst customWidgets: RegistryWidgetsType = { CheckboxWidget: CustomCheckbox };\n\nfunction MyForm(props: FormProps) {\n return ;\n}\n```\n\nThe default fields you can override are:\n\n- `ArrayField`\n- `ArraySchemaField`\n- `BooleanField`\n- `DescriptionField`\n- `OneOfField`\n- `AnyOfField`\n- `LayoutGridField`\n- `LayoutMultiSchemaField`\n- `LayoutHeaderField`\n- `NullField`\n- `NumberField`\n- `ObjectField`\n- `SchemaField`\n- `StringField`\n- `TitleField`\n- `UnsupportedField`\n- `FallbackField`\n- `CyclicSchemaField`\n\nThe default widgets you can override are:\n\n- `AltDateTimeWidget`\n- `AltDateWidget`\n- `CheckboxesWidget`\n- `CheckboxWidget`\n- `ColorWidget`\n- `DateTimeWidget`\n- `DateWidget`\n- `EmailWidget`\n- `FileWidget`\n- `HiddenWidget`\n- `PasswordWidget`\n- `RadioWidget`\n- `RangeWidget`\n- `SelectWidget`\n- `TextareaWidget`\n- `TextWidget`\n- `TimeWidget`\n- `UpDownWidget`\n- `URLWidget`\n\n## Raising errors from within a custom widget or field\n\nYou can raise custom 'live validation' errors by overriding the `onChange` method to provide feedback while users are actively changing the form data.\nIf you do set errors this way, you must also clear them this way by passing `undefined` to the `onChange()` for the `errorSchema` parameter.\n\n:::warning\n\nWhile these errors are retained during validation, it is still preferred for you to use the [`customValidate` Form prop](../api-reference/form-props.md#customvalidate) mechanism instead.\n\n:::\n\n```tsx\nimport { ErrorSchema, RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'text',\n default: 'hello',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'text',\n};\n\nconst CustomTextWidget = function (props: WidgetProps) {\n const { id, value } = props;\n const raiseErrorOnChange = ({ target: { value } }: ChangeEvent) => {\n let raiseError: ErrorSchema | undefined;\n if (value !== 'test') {\n raiseError = {\n __errors: ['Value must be \"test\"'],\n };\n }\n props.onChange(value, [], raiseError, id);\n };\n\n return ;\n};\n\nconst widgets: RegistryWidgetsType = {\n TextWidget: CustomTextWidget,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis creates a custom text widget that raises an error if the input value does not match 'test'.\n\n## Adding your own custom widgets\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `array`\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: Schema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this widget, used to provide unique `name`s and `id`s for the HTML field elements rendered by widgets;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema; Provided in support of custom widgets;\n- `schema`: The JSONSchema subschema object for this widget;\n- `uiSchema`: The uiSchema for this widget;\n- `value`: The current value for this widget;\n- `placeholder`: The placeholder for the widget, if any;\n- `required`: The required status of this widget;\n- `disabled`: A boolean value stating if the widget is disabled;\n- `readonly`: A boolean value stating if the widget is read-only;\n- `autofocus`: A boolean value stating if the widget should autofocus;\n- `label`: The computed label for this widget, as a string\n- `hideLabel`: A boolean value, if true, will cause the label to be hidden. This is useful for nested fields where you don't want to clutter the UI. Customized via `label` in the `UiSchema`;\n- `multiple`: A boolean value stating if the widget can accept multiple values;\n- `onChange`: The value change event handler; call it with the new value every time it changes;\n- `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes;\n- `onBlur`: The input blur event handler; call it with the widget id and value;\n- `onFocus`: The input focus event handler; call it with the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `options.enumOptions`: For enum fields, this property contains the list of options for the enum as an array of \\{ label, value } objects. If the enum is defined using the oneOf/anyOf syntax, the entire schema object for each option is appended onto the \\{ schema, label, value } object.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this widget.\n- `registry`: A [registry](#the-registry-object) object (read next).\n\n### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst MyCustomWidget = (props: WidgetProps) => {\n return (\n props.onChange(event.target.value)}\n />\n );\n};\n\nconst widgets: RegistryWidgetsType = {\n myCustomWidget: MyCustomWidget,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'myCustomWidget',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```tsx\nimport { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nfunction MyCustomWidget(props: WidgetProps) {\n const { options } = props;\n const { color, backgroundColor } = options;\n return ;\n}\n\nMyCustomWidget.defaultProps = {\n options: {\n color: 'red',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': MyCustomWidget,\n 'ui:options': {\n backgroundColor: 'yellow',\n },\n};\n\n// renders red on yellow input\nrender(, document.getElementById('app'));\n```\n\n> Note: This also applies to [registered custom components](#custom-component-registration).\n\n### Customizing widgets' text input\n\nAll the widgets that render a text input use the `BaseInputTemplate` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInputTemplate` component in the `templates` property of `Form` (see [Custom Templates](./custom-templates.md#baseinputtemplate)).\n\n### Wrapping an existing widget to customize it\n\nSometimes you just need to customize the properties that are passed to an existing widget.\nThe way to do this varies based upon whether you are using core or some other theme (such as mui).\n\nHere is an example of modifying the `SelectWidget` to change the ordering of `enumOptions`:\n\n```tsx\nimport { WidgetProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\nimport { Widgets } from '@rjsf/mui';\n\nimport myOptionsOrderFunction from './myOptionsOrderFunction';\n\nconst {\n widgets: { SelectWidget },\n} = getDefaultRegistry(); // To get widgets from core\n// const { SelectWidget } = Widgets; // To get widgets from a theme do this\n\nfunction MySelectWidget(props: WidgetProps) {\n const { options } = props;\n let { enumOptions } = options;\n // Reorder the `enumOptions` however you want\n enumOptions = myOptionsOrderFunction(enumOptions);\n return ;\n}\n```\n\n## Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a _latitude_ and a _longitude_:\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n required: ['lat', 'lon'],\n properties: {\n lat: { type: 'number' },\n lon: { type: 'number' },\n },\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n constructor(props: FieldProps) {\n super(props);\n this.state = { ...props.formData };\n }\n\n onChange(name) {\n return (event) => {\n this.setState(\n {\n [name]: parseFloat(event.target.value),\n },\n () => this.props.onChange(this.state),\n );\n };\n }\n\n render() {\n const { lat, lon } = this.state;\n return (\n
\n \n \n
\n );\n }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema: UiSchema = { 'ui:field': 'geo' };\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields: RegistryFieldsType = { geo: GeoPosition };\n\n// Render the form with all the properties we just defined passed\n// as props\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n> Note: Registered fields can be reused across the entire schema.\n\n### Field props\n\nA field component will always be passed the following props:\n\n- `schema`: The JSON subschema object for this field;\n- `uiSchema`: The [uiSchema](../api-reference/uiSchema.md) for this field;\n- `idSchema`: The FieldPathId of the field in the hierarchy\n- `formData`: The data for this field;\n- `errorSchema`: The tree of errors for this field and its children;\n- `registry`: A [registry](#the-registry-object) object (read next).\n- `required`: The required status of this field;\n- `disabled`: A boolean value stating if the field is disabled;\n- `readonly`: A boolean value stating if the field is read-only;\n- `autofocus`: A boolean value stating if the field should autofocus;\n- `name`: The unique name of the field, usually derived from the name of the property in the JSONSchema\n- `rawErrors`: `An array of strings listing all generated error messages from encountered errors for this field\n- `onChange`: The field change event handler; called with the updated field value, the optional change path for the value (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed\n- `onBlur`: The input blur event handler; call it with the field id and value;\n- `onFocus`: The input focus event handler; call it with the field id and value;\n\n## The `registry` object\n\nThe `registry` is an object containing the registered core, theme and custom fields and widgets as well as the root schema, form context, schema utils.\n\n- `fields`: The set of all fields used by the `Form`. Includes fields from `core`, theme-specific fields and any [custom registered fields](#custom-field-components);\n- `widgets`: The set of all widgets used by the `Form`. Includes widgets from `core`, theme-specific widgets and any [custom registered widgets](#custom-component-registration), if any;\n- `templates`: The set of templates used by the `Form`. Includes templates from `core`, theme-specific templates and any custom registered templates\n- `rootSchema`: The root schema, as passed to the `Form`, which can contain referenced [definitions](../json-schema/definitions.md);\n- `schemaUtils`: The current implementation of the `SchemaUtilsType` (from `@rjsf/utils`) in use by the `Form`. Used to call any of the validation-schema-based utility functions.\n- `translateString`: The string translation function to use when displaying any of the RJSF strings in templates, fields or widgets\n- `globalFormOptions`: The global Form Options that are available for all templates, fields and widgets to access\n- `globalUiOptions`: The optional global UI Options that are available for all templates, fields and widgets to access\n\nThe registry is passed down the component tree, so you can access it from your custom field, custom widget, custom template and `SchemaField` components.\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSchemaField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n SchemaField: CustomSchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n\n### Custom ArraySchemaField\n\nEverything that was mentioned above for a `Custom SchemaField` applies, but this is only used to render the Array item `children` that are then passed to the `ArrayFieldItemTemplate`.\nBy default, `ArraySchemaField` is not actually implemented in the `fields` list since `ArrayField` falls back to `SchemaField` if `ArraySchemaField` is not provided.\nIf you want to customize how the individual items for an array are rendered, provide your implementation of `ArraySchemaField` as a `fields` override.\n\n```tsx\nimport { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomArraySchemaField = function (props: FieldProps) {\n const { index, registry } = props;\n const { SchemaField } = registry.fields;\n const name = `Index ${index}`;\n return ;\n};\n\nconst fields: RegistryFieldsType = {\n ArraySchemaField: CustomArraySchemaField,\n};\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom Field by Id\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the field component that applies to any schema or sub-schema based on the schema's `$id` value. This is useful when your custom field should be conditionally applied based on the schema rather than the property name or data type.\n\nTo provide a custom field in this way, the `fields` prop should be an object which contains a key that matches the `$id` value of the schema which should have a custom field; here's an example:\n\n```tsx\nimport { RJSFSchema, FieldProps, RegistryFieldsType } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomIdField = function (props: FieldProps) {\n return (\n
\n

Yeah, I'm pretty dumb.

\n
My props are: {JSON.stringify(props)}
\n
\n );\n};\n\nconst fields: RegistryFieldsType = {\n '/schemas/my-id': CustomIdField,\n};\n\nconst schema: RJSFSchema = {\n $id: '/schemas/my-id',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Wrapping an existing field to customize it\n\nSometimes you just need to customize the properties that are passed to an existing field.\n\nHere is an example of wrapping the `ObjectField` to tweak the `onChange` handler to look for a specific kind of bad data:\n\n```tsx\nimport { useCallback } from 'react';\nimport { FieldProps } from '@rjsf/utils';\nimport { getDefaultRegistry } from '@rjsf/core';\n\nimport checkBadData from './checkBadData';\n\nconst {\n fields: { ObjectField },\n} = getDefaultRegistry();\n\nfunction MyObjectField(props: FieldProps) {\n const { onChange } = props;\n const onChangeHandler = useCallback(\n (newFormData: T | undefined, path: (number | string)[], es?: ErrorSchema, id?: string) => {\n let data = newFormData;\n let error = es;\n if (checkBadData(newFormData)) {\n // Format the `error` and fix the `data` here\n }\n onChange(data, path, error, id);\n },\n [onChange],\n );\n return ;\n}\n```\n\n\n# Internals\n\nMiscellaneous internals of react-jsonschema-form are listed here.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. We currently support JSON Schema-07 by default, but we also support other JSON schema versions through the [custom schema validation](../usage/validation.md#custom-meta-schema-validation) feature. Due to the limitation of form widgets, there are some exceptions as follows:\n\n- `additionalItems` keyword for arrays\n\n This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n\n- `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`)\n\n The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties \"outside\" of the `anyOf/oneOf`.\n\n You can also use `oneOf` with [schema dependencies](../json-schema/dependencies.md#schema-dependencies) to dynamically add schema properties based on input data.\n\n The `allOf` keyword is supported; it uses [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema.\n\n- `\"additionalProperties\":false` produces incorrect schemas when used with [schema dependencies](../json-schema/dependencies.md#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `\"additionalProperties\":false` when you use schema dependencies. See [#848](https://github.com/rjsf-team/react-jsonschema-form/issues/848) [#902](https://github.com/rjsf-team/react-jsonschema-form/issues/902) [#992](https://github.com/rjsf-team/react-jsonschema-form/issues/992)\n\n## Handling of schema defaults\n\nThis library automatically fills default values defined in the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](../json-schema/dependencies.md#schema-dependencies).\n\nSince there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.\n\nCheck out the defaults example on the [live playground](https://rjsf-team.github.io/react-jsonschema-form/) to see this in action.\n\n### Merging of defaults into the form data\n\nThere are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.\n\nThis are the rules which are used when injecting the defaults:\n\n- When there is a scalar in the form data, nothing is changed.\n- When the value is `undefined` in the form data, the default is created in the form data.\n- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.\n- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.\n\nA boolean property that is listed in its parent's `required` array and has no `default` of its own is populated with `false`. You can turn this off using the experimental [`requiredBooleanDefault`](../api-reference/form-props.md#requiredbooleandefault) flag, so that the property stays `undefined` until the user answers it.\n\n### Merging of defaults within the schema\n\nIn the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together, with the deeper (descendant) default taking precedence for any overlapping properties by default. You can change this behavior using the experimental [`nestedDefaultsPrecedence`](../api-reference/form-props.md#nesteddefaultsprecedence) flag. If the parent node defines properties which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.\n\nFor arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.\n\n## Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, copy, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons).\nIf you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n> NOTE this only applies to the `@rjsf/core` theme\n\n```css\ni.glyphicon {\n display: none;\n}\n.btn-add::after {\n content: 'Add';\n}\n.array-item-copy::after {\n content: 'Copy';\n}\n.array-item-move-up::after {\n content: 'Move Up';\n}\n.array-item-move-down::after {\n content: 'Move Down';\n}\n.array-item-remove::after {\n content: 'Remove';\n}\n```\n\n## Submit form programmatically\n\nYou can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.\nThis method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onSubmit = ({ formData }) => console.log('Data submitted: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.submit();\n```\n\n## Update field value in form programmatically\n\nYou can use the reference to get your `Form` component and call the `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void` method to change the value of a field.\nThis method will dispatch the `onChange` event of the form.\n\n```tsx\nimport { createRef } from 'react';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst onChange = ({ formData }) => console.log('Data updated to: ', formData);\nlet yourForm;\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: {\n type: 'object',\n required: ['input'],\n properties: {\n input: {\n type: 'string',\n },\n },\n },\n },\n required: ['foo'],\n};\n\nconst formRef = createRef();\n\nrender(\n ,\n document.getElementById('app'),\n);\n\nformRef.current.setFieldValue('foo.input', 'value');\nformRef.current.setFieldValue(['foo'], { input: 'newvalue' });\nformRef.current.setFieldValue('', { foo: { input: 'another value' } });\nformRef.current.setFieldValue([], { foo: { input: 'more values' } });\n```\n\n\n# Typescript Support\n\nRJSF fully supports Typescript.\nThe [types and functions](../api-reference/utility-functions.md) exported by `@rjsf/utils` are fully typed (as needed) using one or more of the following 3 optional generics:\n\n- `T = any`: This represents the type of the `formData` and defaults to `any`.\n- `S extends StrictRJSFSchema = RJSFSchema`: This represents the type of the `schema` and extends the `StrictRJSFSchema` type and defaults to the `RJSFSchema` type.\n- `F extends FormContextType = any`: This represents the type of the `formContext`, extends the `FormContextType` type and defaults to `any`.\n\nEvery other library in the `@rjsf/*` ecosystem use these same generics in their functions and React component definitions.\nFor instance, in the `@rjsf/core` library the definitions of the `Form` component and the `withTheme()` and `getDefaultRegistry()` functions are as follows:\n\n```ts\nexport default class Form<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n> extends Component, FormState> {\n // ... class implementation\n}\n\nexport default function withTheme(\n themeProps: ThemeProps\n) {\n // ... function implementation\n}\n\nexport default function getDefaultRegistry<\n T = any,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any\n>(): Omit, 'schemaUtils'> {\n // ... function implementation\n}\n```\n\nOut of the box, the defaults for these generics will work for all use-cases.\nProviding custom types for any of these generics may be useful for situations where the caller is working with typed `formData`, `schema` or `formContext` props, Typescript is complaining and type casting isn't allowed.\n\n## Overriding generics\n\n### T\n\nThe generic `T` is used to represent the type of the `formData` property passed into `Form`.\nIf you are working with a simple, unchanging JSON Schema and you have defined a type for the `formData` you are working with, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formData: FormData = {};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} formData={formData} />, document.getElementById('app'));\n```\n\n### S\n\nThe generic `S` is used to represent the type of the `schema` property passed into `Form`.\nIf you are using something like the [Ajv utility types for schemas](https://ajv.js.org/guide/typescript.html#utility-types-for-schemas) typing system, you can override this generic as follows:\n\n```tsx\nimport { JSONSchemaType } from 'ajv';\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst validator = customizeValidator();\n\nrender( schema={schema} validator={validator} />, document.getElementById('app'));\n\n// Alternatively since you have the type, you could also use this\n// const validator = customizeValidator();\n// render((\n// schema={schema} validator={validator} />\n//), document.getElementById(\"app\"));\n```\n\n> NOTE: using this `Ajv typing system` has not been tested extensively with RJSF, so use carefully\n\n### F\n\nThe generic `F` is used to represent the type of the `formContext` property passed into `Form`.\nIf you have a type for this data, you can override this generic as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { Form } from '@rjsf/core';\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\nconst formContext: FormContext = {\n myCustomWidgetData: {\n enableCustomFeature: true,\n },\n};\n\nconst validator = customizeValidator();\n\nrender(\n schema={schema} validator={validator} formContext={formContext} />,\n document.getElementById('app')\n);\n```\n\n## Overriding generics in core\n\nAs shown in previous examples, overriding the default `Form` from `@rjsf/core` is pretty straight forward.\nUsing the `withTheme()` function is just as easy:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { withTheme, ThemeProps } from '@rjsf/core';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst theme: ThemeProps = {\n widgets: { test: () =>
test
},\n};\n\nconst ThemedForm = withTheme(theme);\n\nconst validator = customizeValidator();\n\nconst Demo = () => ;\n```\n\n## Overriding generics in other themes\n\nSince all the other themes in RJSF are extensions of `@rjsf/core`, overriding parts of these themes with custom generics is a little different.\nThe exported `Theme` and `Form` from any of the themes have been created using the generic defaults, and as a result, do not take generics themselves.\nIn order to override generics, special `generateForm()` and `generateTheme()` functions are exported for your use.\n\n### Overriding a Theme\n\nIf you are doing something like the following to create a new theme based on `@rjsf/mui` to extend one or more `templates`:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\nimport { Theme } from '@rjsf/mui';\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst Demo = () => ;\n```\n\nThen you would use the new `generateTheme()` and `generateForm()` functions as follows:\n\n```tsx\nimport React from 'react';\nimport { WidgetProps } from '@rjsf/utils';\nimport { ThemeProps, withTheme } from '@rjsf/core';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { generateTheme } from '@rjsf/mui';\n\ninterface FormData {\n foo?: string;\n bar?: number;\n}\n\ntype MySchema = JSONSchemaType;\n\nconst schema: MySchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'number' },\n },\n};\n\ninterface FormContext {\n myCustomWidgetData: object;\n}\n\nconst Theme: ThemeProps = generateTheme();\n\nconst OldBaseInputTemplate = Theme.templates.BaseInputTemplate;\n\n// Force the underlying `TextField` component to always use size=\"small\"\nfunction MyBaseInputTemplate(props: WidgetProps) {\n return ;\n}\n\nconst myTheme: ThemeProps = {\n ...Theme,\n templates: {\n ...Theme.templates,\n BaseInputTemplate: MyBaseInputTemplate,\n },\n};\n\nconst ThemedForm = withTheme(myTheme);\n\nconst validator = customizeValidator();\n\n// You could also do since they are effectively the same:\n// const ThemedForm = generateForm(myTheme);\n\nconst Demo = () => ;\n```\n\n> NOTE: The same approach works for extending `widgets` and `fields` as well.\n\n\n# Dynamic uiSchema Examples\n\n## Backward Compatibility Examples\n\n### Example 1: Traditional Static uiSchema (No Changes Required)\n\n```typescript\nimport { UiSchema } from '@rjsf/utils';\n\n// This continues to work exactly as before\nconst uiSchema: UiSchema = {\n guests: {\n items: {\n name: { 'ui:placeholder': 'Enter guest name' },\n age: { 'ui:widget': 'updown' },\n relationship: { 'ui:widget': 'select' },\n },\n },\n};\n```\n\n### Example 2: Dynamic uiSchema with Function\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface GuestData {\n name?: string;\n age?: number;\n relationship?: 'child' | 'adult' | 'senior';\n guardianName?: string;\n mealPreference?: string;\n}\n\n// New functionality - dynamic UI based on item data\nconst uiSchema: UiSchema = {\n guests: {\n items: (itemData: GuestData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Note: For newly added items, `itemData` will be undefined or contain default values.\n // Using optional chaining (`?.`) is recommended to handle this case gracefully.\n\n // Base UI schema for all items\n const baseUiSchema: UiSchema = {\n name: { 'ui:placeholder': `Guest ${index + 1} name` },\n relationship: { 'ui:widget': 'select' },\n };\n\n // Conditionally modify UI based on data\n if (itemData?.relationship === 'child') {\n return {\n ...baseUiSchema,\n age: {\n 'ui:widget': 'updown',\n 'ui:help': 'Age is required for children',\n 'ui:options': { min: 0, max: 17 },\n },\n guardianName: {\n 'ui:placeholder': 'Parent/Guardian name',\n },\n mealPreference: { 'ui:widget': 'hidden' },\n };\n }\n\n if (itemData?.relationship === 'adult') {\n return {\n ...baseUiSchema,\n age: { 'ui:widget': 'hidden' },\n guardianName: { 'ui:widget': 'hidden' },\n mealPreference: {\n 'ui:widget': 'select',\n 'ui:placeholder': 'Select meal preference',\n },\n };\n }\n\n // Default for new items or unknown relationships\n return baseUiSchema;\n },\n },\n};\n```\n\n### Example 3: Using Form Context\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ParticipantData {\n name?: string;\n email?: string;\n workshop?: string;\n}\n\ninterface MyFormContext extends FormContextType {\n eventType?: 'conference' | 'workshop' | 'webinar';\n}\n\nconst uiSchema: UiSchema = {\n participants: {\n items: (itemData: ParticipantData | undefined, index: number, formContext?: MyFormContext): UiSchema => {\n // Access form-wide settings\n const isConference = formContext?.eventType === 'conference';\n\n return {\n name: { 'ui:placeholder': 'Participant name' },\n email: { 'ui:widget': 'email' },\n // Show workshop selection only for conference events\n workshop: isConference ? { 'ui:widget': 'select' } : { 'ui:widget': 'hidden' },\n };\n },\n },\n};\n```\n\n### Example 4: Falsy Return Values\n\n```typescript\nimport { UiSchema, FormContextType } from '@rjsf/utils';\n\ninterface ItemData {\n needsCustomUI?: boolean;\n field1?: string;\n field2?: string;\n}\n\nconst uiSchema: UiSchema = {\n items: {\n items: (itemData: ItemData | undefined, index: number): UiSchema | null | undefined => {\n // Only apply custom UI to specific items\n if (itemData?.needsCustomUI) {\n return {\n field1: { 'ui:widget': 'textarea' },\n field2: { 'ui:help': 'This item needs special attention' },\n };\n }\n\n // Return null or undefined to use default UI rendering\n // This is useful for conditionally applying custom UI\n return null;\n },\n },\n};\n```\n\n### Example 5: Dynamic UI for Fixed Arrays\n\nFor fixed/tuple arrays (where schema.items is an array), the dynamic function can be applied to each position:\n\n```typescript\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\ninterface DetailsData {\n age?: number;\n role?: string;\n}\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: [\n { type: 'string', title: 'First Name' },\n { type: 'string', title: 'Last Name' },\n { type: 'object', title: 'Details', properties: { age: { type: 'number' }, role: { type: 'string' } } },\n ],\n};\n\nconst uiSchema: UiSchema = {\n items: [\n { 'ui:placeholder': 'Enter first name' }, // Static UI for first item\n { 'ui:placeholder': 'Enter last name' }, // Static UI for second item\n // Dynamic UI for third item based on its data\n (itemData: DetailsData | undefined, index: number): UiSchema => {\n if (itemData?.role === 'admin') {\n return {\n age: { 'ui:widget': 'hidden' },\n role: { 'ui:help': 'Admin role selected' },\n };\n }\n return {\n age: { 'ui:widget': 'updown' },\n role: { 'ui:widget': 'select' },\n };\n },\n ],\n};\n```\n\n## Schema Example\n\n```typescript\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n guests: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: { type: 'string', title: 'Name' },\n age: { type: 'number', title: 'Age' },\n relationship: {\n type: 'string',\n title: 'Relationship',\n enum: ['adult', 'child', 'senior'],\n },\n guardianName: { type: 'string', title: 'Guardian Name' },\n mealPreference: {\n type: 'string',\n title: 'Meal Preference',\n enum: ['vegetarian', 'vegan', 'standard', 'gluten-free'],\n },\n },\n required: ['name', 'relationship'],\n },\n },\n },\n};\n```\n\n## Key Benefits\n\n1. **Backward Compatible**: Existing forms with object-based `uiSchema.items` continue to work without any changes\n2. **Progressive Enhancement**: Developers can opt-in to dynamic behavior when needed\n3. **Flexible**: Access to item data, index, and form context enables complex UI logic\n4. **Safe**: Built-in error handling prevents the entire form from crashing if your function throws an error. When an error occurs for a specific item, it will be caught and logged to the developer console, and the UI for that item will fall back to the default rendering. This ensures the rest of the form remains functional while making debugging easier.\n5. **On-Demand Execution**: The function is executed on-demand during the render cycle. However, as it runs for each array item, performance should be carefully managed for large lists (see Performance Considerations below).\n\n## Key Behaviors\n\n- **Falsy Returns**: If your function returns a falsy value (e.g., `null` or `undefined`), the UI for that specific item will fall back to its default rendering. This allows you to conditionally apply custom UI only when needed.\n- **Error Handling**: If your function throws an error, it will be caught and logged to the console. The form will continue to work, using default UI for the affected item.\n- **New Items**: When a new item is added to the array, `itemData` will be `undefined` or contain default values from the schema. Always use optional chaining (`?.`) to safely access properties.\n\n## Performance Considerations\n\nWhen using dynamic `uiSchema.items` functions, keep in mind:\n\n- The function is executed **on every render** for **each array item**\n- For large arrays, this can impact performance if the function performs expensive operations\n- Best practices:\n - Keep the function logic lightweight and fast\n - Avoid heavy computations or external API calls within the function\n - Consider memoizing results if the same inputs produce the same outputs\n - For complex logic, pre-compute values and store them in formContext or component state\n\nExample of a performance-optimized approach:\n\n```typescript\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport Form from '@rjsf/core';\nimport { RJSFSchema, UiSchema, FormContextType, IChangeEvent } from '@rjsf/utils';\n\ninterface ItemData {\n type?: string;\n field?: any;\n}\n\ninterface ExpensiveDataConfig {\n widget: string;\n}\n\ninterface MyFormProps {\n schema: RJSFSchema;\n formData?: any;\n}\n\n// In your React component that renders the form:\nfunction MyFormComponent({ schema, formData }: PropsWithChildren) {\n // Pre-compute expensive data once, and only re-compute if dependencies change\n const expensiveData = useMemo>(() => computeExpensiveData(), [/* dependencies */]);\n\n const defaultConfig: ExpensiveDataConfig = { widget: 'text' };\n\n // Define the uiSchema inside the component so it can access the memoized data\n const uiSchema: UiSchema = {\n myArrayField: { // Target your specific array field\n items: (itemData: ItemData | undefined, index: number, formContext?: FormContextType): UiSchema => {\n // Use the pre-computed data - this is very fast\n const config = expensiveData[itemData?.type || ''] || defaultConfig;\n\n return {\n field: { 'ui:widget': config.widget }\n };\n }\n }\n };\n\n return ;\n}\n\n// Placeholder for the expensive computation function\ndeclare function computeExpensiveData(): Record;\n```\n\n\n---\ntitle: Props\n---\n\n# <Form /> props\n\n## acceptCharset\n\nThe value of this prop will be passed to the `accept-charset` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-accept-charset).\n\n## action\n\nThe value of this prop will be passed to the `action` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action).\n\nNote that this just renders the `action` attribute in the HTML markup. There is no real network request being sent to this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()` and then calls the [`onSubmit`](#onSubmit) function, where you could send a request programmatically with `fetch` or similar.\n\n## autoComplete\n\nThe value of this prop will be passed to the `autocomplete` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete).\n\n## className\n\nThe value of this prop will be passed to the `class` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## children\n\nYou can provide custom buttons to your form via the `Form` component's `children`. If no children are provided, by default a `Submit` button will be rendered.\n\nFor other ways to modify the default `Submit` button, see both the [Submit Button Options](./uiSchema.md#submitbuttonoptions) and the [SubmitButton Template](../advanced-customization/custom-templates.md#submitbutton) documentation.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(\n \n
\n \n \n
\n ,\n document.getElementById('app'),\n);\n```\n\n> **Warning:** There needs to be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n## customValidate\n\nFormerly the `validate` prop.\nThe `customValidate` prop requires a function that specifies custom validation rules for the form.\nSee [Validation](../usage/validation.md) for more information.\n\n## experimental_componentUpdateStrategy\n\nExperimental feature to specify an alternative component update strategy that accepts one of the following value:\nReact's default `Component` rendering strategy is to re-render on every state change, see `shouldComponentUpdate` docs.\n`PureComponent`'s strategy uses shallow equality. One can also always update (not recommended for performance reasons, but can be useful for testing)\n\n| Option | Description |\n| ---------- | ------------------------------------------------- |\n| customDeep | Legacy behavior - uses RJSF's deepEquals function |\n| shallow | shallow equality |\n| always | component always rerenders |\n\n## experimental_defaultFormStateBehavior\n\nExperimental features to specify different form state behavior.\nCurrently, this only affects the handling of optional array fields where `minItems` is set and handling of setting defaults based on the value of `emptyObjectFields`.\n\n> **Warning:** This API is experimental and unstable, therefore breaking changes may be shipped in minor or patch releases. If you want to use this feature, we recommend pinning exact versions of `@rjsf/\\*` packages in your package.json file or be ready to update your use of it when necessary.\n\nThe following subsections represent the different keys in this object, with the tables explaining the values and their meanings.\n\n### arrayMinItems\n\nThis optional subsection is an object with two optional fields, `populate` and `mergeExtraDefaults`.\nWhen not specified, it defaults to `{ populate: 'all', mergeExtraDefaults: false }`.\n\n#### arrayMinItems.populate\n\nOptional enumerated flag controlling how array minItems are populated, defaulting to `all`:\n\n| Flag Value | Description |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `all` | Legacy behavior - populate minItems entries with default values initially and include empty array when no values have been defined. |\n| `requiredOnly` | Ignore `minItems` on a field when calculating defaults unless the field is required. |\n| `never` | Ignore `minItems` on a field when calculating defaults for required and non-required. Value will set only if defined `default` and from `formData` |\n\n#### arrayMinItems.computeSkipPopulate\n\nThe signature and documentation for this property is as follow:\n\n##### computeSkipPopulate <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nA function that determines whether to skip populating the array with default values based on the provided validator, schema, and root schema.\nIf the function returns `true`, the array will not be populated with default values.\nIf the function returns `false`, the array will be populated with default values according to the `populate` option.\n\n###### Parameters\n\n- validator: ValidatorType<T, S, F> - An implementation of the `ValidatorType` interface that is used to detect valid schema conditions\n- schema: S - The schema for which resolving a condition is desired\n- [rootSchema]: S - The root schema that will be forwarded to all the APIs\n\n###### Returns\n\n- boolean: A boolean indicating whether to skip populating the array with default values.\n\n##### Example\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n stringArray: {\n type: 'array',\n items: { type: 'string' },\n minItems: 1,\n },\n numberArray: {\n type: 'array',\n items: { type: 'number' },\n minItems: 1,\n },\n },\n required: ['stringArray', 'numberArray'],\n};\n\nconst computeSkipPopulateNumberArrays = (validator, schema, rootSchema) =>\n // These conditions are needed to narrow down the type of the schema.items\n !Array.isArray(schema?.items) &&\n typeof schema?.items !== 'boolean' &&\n schema?.items?.type === 'number',\n\nrender(\n ,\n document.getElementById('app')\n);\n```\n\n#### arrayMinItems.mergeExtraDefaults\n\nOptional boolean flag, defaulting to `false` when not specified.\nWhen `formData` is provided and does not contain `minItems` worth of data, this flag controls whether the extra data provided by the defaults is appended onto the existing `formData` items to ensure the `minItems` condition is met.\nWhen `false` (legacy behavior), only the `formData` provided is merged into the default form state, even if there are fewer than the `minItems`.\nWhen `true`, the defaults are appended onto the end of the `formData` until the `minItems` condition is met.\n\n### emptyObjectFields\n\nOptional enumerated flag controlling how empty object fields are populated, defaulting to `populateAllDefaults`:\n\n| Flag Value | Description |\n| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `populateAllDefaults` | Legacy behavior - set default when there is a primitive value, an non-empty object field, or the field itself is required |\n| `populateRequiredDefaults` | Only sets default when a value is an object and its parent field is required, or it is a primitive value and it is required |\n| `skipDefaults` | Does not set defaults |\n| `skipEmptyDefaults` | Does not set an empty default. It will still apply the default value if a default property is defined in your schema |\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: { type: 'string' },\n minItems: 3,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### allOf\n\nOptional enumerated flag controlling how empty defaults are populated when `allOf` schemas are provided, defaulting to `skipDefaults`:\n\n| Flag Value | Description |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------- |\n| `skipDefaults` | Skip parsing defaults from `allOf` schemas nested inside the schema defaults are computed from, with the exceptions below |\n| `populateDefaults` | Generate default values for properties in the `allOf` schema including `if-then-else` syntax |\n\n`skipDefaults` only skips the `allOf` schemas nested inside the schema that defaults are computed from, not that schema's own `allOf`.\nWhich schema that is depends on what the form is doing:\n\n- When the form computes defaults from the root schema, a root-level `allOf` provides its defaults with either value.\n- Some actions compute defaults from a subschema as if it were the root, such as adding an array item or optional data, or switching a `oneOf` or `anyOf` option, so that subschema's own `allOf` provides its defaults with either value. When switching options, though, the `if` of an `if-then-else` in the new option's `allOf` is checked against the data of the option being left, so under `skipDefaults` its `then` default is filled in only when that data matches the `if`.\n- The option picked on the initial render is not computed as if it were the root, even when its `oneOf` or `anyOf` is in the root schema, so under `skipDefaults` its `allOf` is left out until the user switches away from that option and back.\n\nThe branch of an `if-then-else` is picked from the form data, not from the computed defaults, except in a `dependencies` entry, as the last item below says:\n\n- When the `if` lists a property in `required` and only a default provides that property, the `then` default is left out until the form data holds the value, for instance on the initial render.\n- Without `required`, a missing property still satisfies the `if`'s `properties`, so such an `if` passes with no data, and its `then` default is filled in even when the `if` does not match the defaulted value.\n- With one `allOf` entry per `enum` value and no form data, the default `allOf` merger merges the `then` defaults of all the entries, and the first entry that defaults a property wins. An `experimental_customMergeAllOf` that throws on the conflicting `default`s drops the whole `allOf` instead.\n\nAn `allOf` in an object property or in an array's `items` is skipped as a whole, plain property defaults included, so it usually needs `populateDefaults` to provide its defaults.\nThis is specific to `allOf`:\n\n- An `if-then-else` placed directly in a nested object schema is resolved with either value, unless `emptyObjectFields` is `skipEmptyDefaults`. For example, under `skipDefaults`, `items: { type: 'object', if, then }` fills in the `then` default, while `items: { type: 'object', allOf: [{ if, then }] }` does not.\n- Adding a direct `if` to that `items` schema resolves its whole `allOf` too, unless `emptyObjectFields` is `skipEmptyDefaults`.\n- With an `experimental_customMergeAllOf` built on a deep merger, such as `createDeepAllOfMerge` from `@x0k/json-schema-merge` given a shallow merge built with that library's `createMerger` and `createShallowAllOfMerge`, merging an `allOf` also turns a property's `allOf: [{ if, then }]` into a direct `if-then-else`, so that property's `then` default is filled in under `skipDefaults`, unless `emptyObjectFields` is `skipEmptyDefaults`. That happens wherever an `allOf` is merged: the root's own `allOf`, or the `allOf` of an object or `items` schema that also has a direct `if`, but not a nested `allOf` on its own.\n- A `dependencies` entry in a nested object schema is resolved once its property has a value, its `allOf` and `if-then-else` included, even when `emptyObjectFields` is `skipEmptyDefaults`. A default counts as that value, and the entry's `if` is checked against it, so an `if` that lists the property in `required` passes with no form data, while one that does not match the default fails. For example, under `skipDefaults`, `items: { type: 'object', properties: { animal: { default: 'Cat' } }, dependencies: { animal: { allOf: [{ if, then }] } } }` fills in the `then` default. A root `dependencies` entry counts a default only while the form data is empty: once the form data holds any value, the entry is applied only when the form data holds its property.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Example',\n type: 'object',\n properties: {\n animalInfo: {\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n allOf: [\n {\n if: {\n properties: {\n animal: {\n const: 'Cat',\n },\n },\n },\n then: {\n properties: {\n food: {\n type: 'string',\n default: 'meat',\n enum: ['meat', 'grass', 'fish'],\n },\n },\n required: ['food'],\n },\n },\n ],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### constAsDefaults\n\nOptional enumerated flag controlling how const values are merged into the form data as defaults when dealing with undefined values, defaulting to `always`.\nThe defaulting behavior for this flag will always be controlled by the `emptyObjectField` flag value.\nFor instance, if `populateRequiredDefaults` is set and the const value is not required, it will not be set.\n\n| Flag Value | Description |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `always` | A const value will always be merged into the form as a default. If there is are const values in a `oneOf` (for instance to create an enumeration with title different from the values), the first const value will be defaulted |\n| `skipOneOf` | If const is in a `oneOf` it will NOT pick the first value as a default |\n| `never` | A const value will never be used as a default |\n\n### mergeDefaultsIntoFormData\n\nOptional enumerated flag controlling how the defaults are merged into the form data when dealing with undefined values, defaulting to `useFormDataIfPresent`.\n\nNOTE: If there is a default for a field and the `formData` is unspecified, the default ALWAYS merges.\n\n| Flag Value | Description |\n| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| `useFormDataIfPresent` | Legacy behavior - Do not merge defaults if there is a value for a field in `formData` even if that value is explicitly set to `undefined` |\n| `useDefaultIfFormDataUndefined` | If the value of a field within the `formData` is `undefined`, then use the default value instead |\n\n### nestedDefaultsPrecedence\n\nOptional enumerated flag controlling how defaults defined on multiple levels are merged together for overlapping properties, defaulting to `descendantWins`.\n\n| Flag Value | Description |\n| -----------------| --------------------------------------------------------------------------------------------------|\n| `descendantWins` | The innermost (descendant) default value definition takes precedence over its ancestor's defaults |\n| `ancestorWins` | The outermost (ancestor) default value definition takes precedence over any descendant's defaults |\n\n#### Example\n\nIn the following example, the `animal` property is a descendant of the root schema and both define a default value for `animal`. By default, the `animal`'s default value `Cat` would take precedence over its ancestor's `Fish`. However, since `nestedDefaultsPrecedence` is set to `ancestorWins`, the root schema's default value takes precedence and `animal` is set to `Fish` by default.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n default: {\n animal: 'Fish',\n },\n properties: {\n animal: {\n type: 'string',\n default: 'Cat',\n enum: ['Cat', 'Fish'],\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n### requiredBooleanDefault\n\nOptional enumerated flag controlling whether a boolean listed in its parent's `required` array, with no `default` of its own, is populated with `false`, defaulting to `populateFalse`.\nAn explicit schema `default`, a parent default and an existing `formData` value always take precedence; this flag only decides what happens when none of them provides a value.\n\n| Flag Value | Description |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| `populateFalse` | A required boolean with no `default` is set to `false` |\n| `skip` | No value is synthesized; the property stays `undefined` until the user answers it, so `required` remains a validation concern |\n\n#### Example\n\nIn the following example, `agree` is required but has no `default`. By default it would start as `false`, and the form would report `{ agree: false }` through `onChange` on mount. With `requiredBooleanDefault` set to `skip`, `formData` stays `{}` until the user answers, and validation reports `agree` as missing until then. This is the behavior to choose when a boolean question is rendered with an explicit \"unanswered\" state, for example a `- - -` / Yes / No select, rather than a checkbox.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n agree: {\n type: 'boolean',\n title: 'Do you agree?',\n },\n },\n required: ['agree'],\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## experimental_customMergeAllOf\n\nThe `experimental_customMergeAllOf` function allows you to provide a custom implementation for merging `allOf` schemas. This can be particularly useful in case the where the default merge library ([@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/)) doesn't satisfy your functional or performance requirements.\n\nBy providing your own implementation, you can potentially achieve significant performance improvements. For instance, if your use case only requires a subset of JSON Schema features, you can implement a faster, more tailored merging strategy.\n\nIf you're looking for alternative `allOf` merging implementations, you might consider [allof-merge](https://github.com/udamir/allof-merge).\n\n**Warning:** This is an experimental feature. Only use this if you fully understand the implications of custom `allOf` merging and are prepared to handle potential edge cases. Incorrect implementations may lead to unexpected behavior or validation errors.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport validator from '@rjsf/validator-ajv8';\n\nconst customMergeAllOf = (schema: RJSFSchema): RJSFSchema => {\n // Your custom implementation here\n};\n\nrender(\n
,\n document.getElementById('app'),\n);\n```\n\n## disabled\n\nIt's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`.\n\n## readonly\n\nIt's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you just want to make some fields read-only, see the `ui:readonly` parameter in `uiSchema`.\n\n## enctype\n\nThe value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).\n\n## extraErrors\n\nThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation.\nBy default, these are non-blocking errors, meaning that you can still submit the form when these are the only errors displayed to the user.\nSee [Validation](../usage/validation.md) for more information.\n\n## extraErrorsBlockSubmit\n\nIf set to true, causes the `extraErrors` to become blocking when the form is submitted.\n\n## fields\n\nDictionary of registered fields in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n## focusOnFirstError\n\nIf set to true, then the first field with an error will receive the focus when the form is submitted with errors.\n\nYou can also provide a custom callback function to handle what happens when this function is called.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, RJSFValidationError } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nconst focusOnError = (error: RJSFValidationError) => {\n console.log('I need to handle focusing this error');\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.\n\nSee [AntD Customization](themes/antd/uiSchema.md#formcontext) for formContext customizations for the `antd` theme.\nSee [Semantic UI Customization](themes/semantic-ui/uiSchema.md#formcontext) for formContext customizations for the `semantic-ui` theme.\n\n## formData\n\nThe data for the form, used to load a \"controlled\" form with its current data. If you want an \"uncontrolled\" form with initial data, then use `initialFormData` instead.\n\n## id\n\nThe value of this prop will be passed to the `id` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).\n\n## idPrefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of ``\n\n## idSeparator\n\nTo avoid using a path separator that is present in field names, it is possible to change the separator used for ids (the default is `_`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n first: {\n type: 'string',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThis will render `` instead of `` when rendering `first`.\n\n## initialFormData\n\nThe initial data for the form, used to fill an \"uncontrolled\" form with existing data on the initial render and when `reset()` is called programmatically.\n\n## nameGenerator\n\nThe `nameGenerator` prop allows you to customize how HTML `name` attributes are generated for form fields. This is essential when submitting form data to backend frameworks that expect specific naming conventions for structured data.\n\n**Default behavior:** When no `nameGenerator` is provided, the `name` attribute will equal the `id` attribute (e.g., `root_tasks_0_title`).\n\nRJSF provides two built-in generators:\n\n**`bracketNameGenerator`** - Generates bracket notation for PHP/Rails (e.g., `root[tasks][0][title]`). Automatically appends `[]` for multi-value fields like checkboxes.\n\n**`dotNotationNameGenerator`** - Generates dot notation for other frameworks (e.g., `root.tasks.0.title`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { bracketNameGenerator, RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n firstName: { type: 'string' },\n tasks: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n title: { type: 'string' },\n },\n },\n },\n },\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\nYou can also create a custom generator by implementing the `NameGeneratorFunction` type, which receives `path` (array of path segments), `idPrefix` (typically `'root'`), and optional `isMultiValue` (boolean for multi-value fields).\n\n## liveOmit\n\nFlag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to\nto `true` and the form's data is updated by the user.\n\nIf no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for\nthe flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live omit will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## liveValidate\n\nFlag that describes when live validation will be performed. Live validation means that the form will perform\nvalidation and show any validation errors whenever the form data is updated, rather than just on submit.\n\nIf no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for\nthe flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`\nis provided, then live validation will be performed when a field that was updated is blurred (as a performance\noptimization).\n\n> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release\n\n## method\n\nThe value of this prop will be passed to the `method` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method).\n\n## name\n\nThe value of this prop will be passed to the `name` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name).\n\n## noHtml5Validate\n\nIf set to true, turns off HTML5 validation on the form. Set to `false` by default.\n\n## noValidate\n\nIf set to true, turns off all validation. Set to `false` by default.\n\n> NOTE: In a future major release, this flag may be deleted replaced by making `validator` prop optional\n\n## omitExtraData\n\nIf set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.\n\n## onBlur\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n## onChange\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same first argument as `onSubmit` any time a value is updated in the form.\nIt will also receive, as the second argument, the `id` of the field which experienced the change.\nGenerally, this will be the `id` of the field for which input data is modified.\nIn the case of adding/removing of new fields in arrays or objects with `additionalProperties` or `patternProperties` and the rearranging of items in arrays, the `id` will be that of the array or object itself, rather than the item/field being added, removed or moved.\n\n## onError\n\nTo react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onError = (errors) => console.log('I have', errors.length, 'errors to fix');\n\nrender(, document.getElementById('app'));\n```\n\n## onFocus\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## onSubmit\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid.\nIt will be passed a result object having a `formData` attribute, which is the valid form data you're usually after.\nThe original event will also be passed as a second parameter:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\nconst onSubmit = ({ formData }, e) => console.log('Data submitted: ', formData);\n\nrender(, document.getElementById('app'));\n```\n\n> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, you may need to set the `omitExtraData` and/or `liveOmit` props.\n\n## removeEmptyOptionalObjects\n\n> **Deprecated**: This prop no longer has any effect and will be removed in a future release. The behavior of pruning optional empty objects is now built into [`omitExtraData`](#omitextradata) — enable that prop instead.\n\nWhen a JSON Schema has a required field inside an optional object, any user interaction with that optional object \"activates\" it. Even if the user clears all the fields within that object, the empty object property (e.g., `{ test: {} }` or `{ test: { field1: \"\" } }`) remains in the `formData`. Because the object contains required fields that are now empty, the form becomes unsubmittable.\n\nPreviously, setting `removeEmptyOptionalObjects` to `true` caused the form to recursively prune these optional empty objects from the `formData` during `onChange`, `onBlur`, and `onSubmit`. This pruning is now performed automatically by `omitExtraData`.\n\n## schema\n\n**Required**! Form schema. We support JSON schema draft-07 by default. See [Schema Reference](https://json-schema.org/draft-07/json-schema-release-notes.html) for more information.\n\n## showErrorList\n\nWhen this prop is set to `top` or `bottom`, a list of errors (or the custom error list defined in the `ErrorList`) will also show at the `bottom` or `top` of the form. When set to false, only inline input validation errors will be shown. Set to `top` by default. See [Validation](../usage/validation.md) for more information.\n\n## tagName\n\nIt's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.\n\n```tsx\n\n```\n\nYou can also provide a class/function component.\n\n```tsx\nconst CustomForm = props => \n// ...\n\n```\n\n## target\n\nThe value of this prop will be passed to the `target` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-target).\n\n## templates\n\nDictionary of registered templates in the form. See [Custom Templates](../advanced-customization/custom-templates.md) for more information.\n\n## transformErrors\n\nA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation. See [Validation](../usage/validation.md) for more information.\n\n## translateString\n\nOptional string translation function, if provided, allows users to change the translation of the RJSF internal strings.\nSome strings contain replaceable parameter values as indicated by `%1`, `%2`, etc.\nThe number after the `%` indicates the order of the parameter.\nThe ordering of parameters is important because some languages may choose to put the second parameter before the first in its translation. In addition to replaceable parameters, some of the strings support the use of markdown and simple html.\n\nOne can use the [documentation](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts) of the `TranslatableString` enums to determine which enum values contain replaceable parameters and which support markdown and simple html.\n\nOne could use this function to alter one or more of the existing english strings to better suit one's application or fully translate all strings into a different language.\nBelow is an example of changing a few of the english strings to something else:\n\n```ts\nimport { TranslatableString, englishStringTranslator, replaceStringParameters } from '@rjsf/utils';\n\nfunction fixupSomeEnglishStrings(stringToTranslate: TranslatableString, params?: string[]): string {\n switch (stringToTranslate) {\n case TranslatableString.NewStringDefault:\n return ''; // Use an empty string for the new additionalProperties string default value\n case TranslatableString.KeyLabel:\n return replaceStringParameters('%1 Key Name', params); // Add \"Name\" onto the end of the WrapIfAdditionalTemplate key label\n default:\n return englishStringTranslator(stringToTranslate, params); // Fallback to the default english\n }\n}\n```\n\n## uiSchema\n\nForm uiSchema. See [uiSchema Reference](uiSchema.md) for more information.\n\n## useFallbackUiForUnsupportedType\n\nIf set to true, when an unsupported schema type is encountered, the form will render a fallback UI instead of displaying an error. The fallback UI will display a widget that allows the user to select a JSON Schema primitive type, and a field containing the form data that matches the selected type. Set to false by default.\n\n## validator\n\n**Required**! An implementation of the `ValidatorType` interface that is needed for form validation to work.\n`@rjsf/validator-ajv8` exports the implementation of this interface from RJSF version 4.\n\n## widgets\n\nDictionary of registered widgets in the form. See [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information.\n\n\n# LayoutGridField\n\nThe `LayoutGridField` will render a schema, uiSchema and formData combination out into a `GridTemplate` in the shape\ndescribed in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in\nthe uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):\n\n```json\n{\n \"field1\" : {\n \"ui:field\": \"LayoutGridField\",\n \"ui:layoutGrid\": {\n \"ui:row\": { ... }\n }\n }\n}\n```\n\nSee the [LayoutGridField usage](../usage/layout-grid.md) for more detailed walk-through on how to use the component. This page is condensed\nversion of the `uiSchema` APIs for faster reference.\n\n## `ui:row`\n\nThe outermost level of a `LayoutGridField` is the `ui:row` that defines the nested rows, columns, and/or condition\nelements (i.e. \"grid elements\") in the grid. This definition is either a simple \"grid elements\" OR an object with\nnative `GridTemplate` implementation-specific props and a `children` array of \"grid elements\". E.g. (as JSON objects):\n\nSimple `ui:row` definition, without additional `GridTemplate` props:\n\n```json\n{\n \"ui:row\": [\n { \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ... },\n ...\n ]\n}\n```\n\nComplex `ui:row` definition, with additional `GridTemplate` (this example uses `@mui/material/Grid2` native props):\n\n```json\n{\n \"ui:row\": {\n \"spacing\": 2,\n \"size\": {\n \"md\": 4\n },\n \"alignContent\": \"flex-start\",\n \"className\": \"GridRow\",\n \"children\": [\n {\n \"ui:row\"|\"ui:col\"|\"ui:columns\"|\"ui:condition\": ...\n },\n ...\n ]\n }\n }\n```\n\n> NOTE: Special note about the native `className` prop values. All className values will automatically be looked up in\n> the `formContext.lookupMap` in case they have been defined using a CSS-in-JS approach. In other words, from the\n> example above, if the `Form` was constructed with a `layoutGridLookupMap` set to `{ GridRow: cssInJs.GridRowClass }`\n> then when rendered, the native `GridTemplate` will get the `className` with the value from\n> `cssInJs.GridRowClass`. This automatic lookup will happen for any of the \"grid elements\" when rendering with\n> `GridTemplate` props. If multiple className values are present, for example:\n> `{ className: 'GridRow GridColumn' }`, the classNames are split apart, looked up individually, and joined\n> together to form one className with the values from `cssInJs.GridRowClass` and `cssInJs.GridColumnClass`. See the\n> [example](../usage/layout-grid.md#named-lookup-support-for-classname) in the usage documentation.\n\n## `ui:col`\n\nThe `ui:col` grid element is used to specify the list of columns within a grid row. A `ui:col` element can take on\nseveral forms:\n\n1. a simple list of dotted-path field names within the root field;\n2. a list of objects containing the dotted-path field `name` any other props that are gathered into `ui:options` for the field;\n3. a list with a one-off `render` functional component with or without a non-field `name` identifier and any other to-be-spread props; and\n4. an object with native `GridTemplate` implementation specific props and a `children` array with 1) or 2) or even a nested `ui:row` or a `ui:condition` containing a `ui:row` (although this should be used carefully). E.g. (as JSON objects):\n\nSimple `ui:col` definition, without additional `GridTemplate` props and form 1 only children:\n\n```json\n{\n \"ui:col\": [\"innerField\", \"inner.grandChild\", ...]\n}\n```\n\nComplicated `ui:col` definition, without additional `GridTemplate` props and form 2 only children:\n\n```json\n{\n \"ui:col\": [\n { \"name\": \"innerField\", \"fullWidth\": true },\n { \"name\": \"inner.grandChild\", \"fullWidth\": false },\n ...\n ]\n}\n```\n\nMore complicated `ui:col` definition, without additional `GridTemplate` props and form 2 children, one being a\none-off `render` functional component without a non-field `name` identifier\n\n```json\n{\n \"ui:col\": [\n \"innerField\",\n {\n \"render\": \"WizardNavButton\",\n \"isNext\": true,\n \"size\": \"large\"\n }\n ]\n}\n```\n\nMost complicated `ui:col` definition, additional `GridTemplate` props and form 1, 2 and 3 children (this example\nuses @mui/material/Grid2 native props):\n\n```json\n{\n \"ui:col\": {\n \"size\": { \"md\": 4 },\n \"className\": \"GridColumn\",\n \"children\": [\n \"innerField\",\n { \"name\": \"inner.grandChild\", \"fullWidth\": true },\n { \"name\": \"customRender\", \"render\": \"CustomRender\", \"toSpread\": \"prop-value\" },\n { \"ui:row|ui:condition\": ... },\n ...\n ]\n }\n}\n```\n\n> NOTE: If a `name` prop does not exist or its value does not match any field in a schema, then it is assumed to be a\n> custom `render` component. If the `render` prop does not exist, a null render will occur. If `render` is a\n> string, its value will be looked up in the `formContext.lookupMap` first before defaulting to a null render. If the\n> resulting looked up `render` is not a function (React components are functions), then it will be a null render.\n\n## `ui:columns`\n\nThe `ui:columns` grid element is syntactic sugar to specify a set of `ui:col` columns that all share the same set of\nnative `GridTemplate` props. In other words rather than writing the following configuration that renders a\n`` element with 3 `` nodes and 2\n`` nodes within it (one for each of the fields contained in the `children`\nlist):\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"inner.grandChild\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [{ \"name\": \"inner.grandChild2\" }]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\"]\n }\n },\n {\n \"ui:col\": {\n \"className\": \"col-md-6\",\n \"children\": [\"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\nOne can write this instead:\n\n```json\n{\n \"ui:row\": {\n \"children\": [\n {\n \"ui:columns\": {\n \"className\": \"GridColumn col-md-4\",\n \"children\": [\"innerField\", \"inner.grandChild\", { \"name\": \"inner.grandChild2\", \"fullWidth\": true }]\n }\n },\n {\n \"ui:columns\": {\n \"className\": \"col-md-6\",\n \"children\": [\"innerField2\", \"inner.grandChild3\"]\n }\n }\n ]\n }\n}\n```\n\n> NOTE: This syntax differs from `\"ui:col\": { \"className\": \"col-md-6\", \"children\": [\"innerField2\", \"inner.grandChild3\"] }` in that\n> the `ui:col` will render the two children fields inside a single ``\n> element.\n\n## `ui:condition`\n\nThe final grid element, `ui:condition`, allows for conditionally displaying \"grid elements\" within a row based on the\ncurrent value of a field as it relates to a (list of) hard-coded value(s). There are four elements that make up a\n`ui:condition`:\n\n1. the dotted-path `field` name within the root field that makes up the left-side of the condition;\n2. the hard-coded `value` (single or list) that makes up the right-side of the condition;\n3. the `operator` that controls how the left and right sides of the condition are compared; and\n4. the `children` array that defines the \"grid elements\" to display if the condition passes.\n\nA `ui:condition` uses one of three `operators` when deciding if a condition passes:\n\n1. The `all` operator will pass when the right-side and left-side contains all the same value(s);\n2. the `some` operator will pass when the right-side and left-side contain as least one value in common;\n3. the `none` operator will pass when the right-side and left-side do not contain any values in common. E.g. (as JSON objects):\n\nHere is how to render an if-then-else for `field2` which is an enum that has 3 known values and supports allowing\nany other value:\n\n```json\n{\n \"ui:row\": [\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"all\",\n \"value\": \"value1\",\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"some\",\n \"value\": [\"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ],\n }\n },\n {\n \"ui:condition\": {\n \"field\": \"field2\",\n \"operator\": \"none\",\n \"value\": [\"value1\", \"value2\", \"value3\"],\n \"children\": [\n { \"ui:row\": [...] }\n ]\n }\n }\n ]\n}\n```\n\n\n# AntD Customization\n\n## formContext\n\nYou can customize the look of the form by passing options to Ant-Design theme fields.\n\nThe formContext antd object accepts `descriptionLocation`, `readonlyAsDisabled` properties.\n\n`descriptionLocation` can be `'below' | 'tooltip'`, the default is `'below'` which places the description below the form item.\nYou can set it to `tooltip` that put the description inside the tooltip.\nNote that you should have antd 4.7+ to use `'tooltip'`.\n\nSetting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as disabled.\n\n```tsx\n\n```\n\nThese are the `formContext` properties that you can modify to adjust the `antd` presentation:\n\n- `descriptionLocation`: Where to display the description, either 'below' or 'tooltip', defaults to 'below'\n- `readonlyAsDisabled`: Whether to make the antd theme treat readOnly fields as disabled, defaults to true\n\n## Using Antd v5 theme\n\nYou can use AntD v5 styling by wrapping your application with `StyleProvider` from `@ant-design/cssinjs`.\n\nBy default, `@rjsf/antd` components are using the v4 styling.\n\n```tsx\nimport { StyleProvider } from '@ant-design/cssinjs';\n\nconst Component = () => {\n return (\n \n \n \n );\n};\n```\n\n\n# Chakra-UI Customization\n\nWhen using `@rjsf/chakra-ui` there are a couple of ways to customize the feel of the form.\n\n## Styling\n\nYou can use `ChakraProvider`, where you can customize the field components at a theme level.\nAnd, `uiSchema` allows for the use of a `\"chakra\"` `\"ui:option\"` to customize the styling of the form widgets.\n\n```json\n{\n \"yourField\": {\n \"ui:options\": {\n \"chakra\": {\n \"p\": \"1rem\",\n \"color\": \"blue.200\",\n \"sx\": {\n \"margin\": \"0 auto\"\n }\n }\n }\n }\n}\n```\n\nIt accepts the theme accessible [style props](https://chakra-ui.com/docs/features/style-props) provided by [Chakra](https://chakra-ui.com/docs/getting-started) and [Emotion](https://emotion.sh/docs/introduction).\n\n### Limitations\n\n- The `chakra` option is only available for the Chakra-UI theme.\n- The props are given to the parent component in the individual widget. To pass styles to the inner components, use the [`sx` prop](https://chakra-ui.com/docs/features/the-sx-prop).\n\n\n# MUI Customization\n\nYou can customize the underlying Material UI (MUI) components used by `@rjsf/mui` by passing props directly through the `uiSchema`. This is extremely useful for applying simple customizations (like adding an `endAdornment` to an input field, tweaking margins, or changing variants) without having to build a completely custom Widget or Template.\n\n## Basic Usage\n\nThe `@rjsf/mui` package looks for a `mui` key inside the `ui:options` of your `uiSchema`. Any top-level properties defined here will be applied to the primary MUI wrapper component for that field (e.g. `TextField` for inputs, `FormGroup` for checkboxes, `Paper`/`Grid` for object/array wrappers).\n\n```json\n{\n \"myField\": {\n \"ui:options\": {\n \"mui\": {\n \"variant\": \"filled\",\n \"fullWidth\": false,\n \"sx\": {\n \"backgroundColor\": \"background.paper\",\n \"padding\": 2\n }\n }\n }\n }\n}\n```\n\n## `slotProps` vs `rjsfSlotProps`\n\n`@rjsf/mui` distinguishes between two kinds of slot customization:\n\n- **`slotProps`**: Passed directly to MUI's native `slotProps` API on a component (e.g., `TextField`'s `htmlInput`, `input`, `inputLabel` targets). These are standard MUI customization points.\n- **`rjsfSlotProps`**: Used by RJSF template components (e.g., `ArrayFieldTemplate`, `ObjectFieldTemplate`) to target their specific sub-components (e.g., `paper`, `grid`, `box`). This key is explicitly extracted before spreading, which **prevents prop bleeding** — ensuring configuration is not accidentally passed to unintended child components.\n\n### Using `slotProps` (for MUI widgets like `BaseInputTemplate`)\n\n```json\n{\n \"myPriceField\": {\n \"ui:options\": {\n \"mui\": {\n \"slotProps\": {\n \"input\": {\n \"startAdornment\": \"$\"\n }\n }\n }\n }\n }\n}\n```\n\n### Using `rjsfSlotProps` (for structural templates)\n\n```json\n{\n \"myArrayField\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayPaper\": {\n \"elevation\": 10\n }\n }\n }\n }\n }\n}\n```\n\n## Customizing Templates (e.g. Object and Array wrappers)\n\nMUI theme customizations are natively passed down into both your standard fields and their wrapping structural templates (like `ArrayFieldTemplate` or `ObjectFieldTemplate`) (see [table below](#components-and-their-rjsfslotprops-targets)).\n\nIf you wish to specifically target the _individual array items_ handled by `ArrayFieldItemTemplate` instead of the whole array container, you nest these overrides by targeting the `items` inside the schema:\n\n```json\n{\n \"myArrayField\": {\n \"items\": {\n \"ui:options\": {\n \"mui\": {\n \"rjsfSlotProps\": {\n \"arrayItemGridContainer\": {\n \"spacing\": 2\n }\n }\n }\n }\n }\n }\n}\n```\n\n### Components and their `rjsfSlotProps` targets\n\nDifferent templates and widgets expose different `rjsfSlotProps` targets based on their underlying MUI composition.\n\n| RJSF Component | `rjsfSlotProps` targets available | Description |\n| ---------------------------- | --------------------------------- | ------------------------------------------------------------------------------------- |\n| **BaseInputTemplate** | _(uses native `slotProps`)_ | Uses MUI's `slotProps.htmlInput`, `slotProps.input`, `slotProps.inputLabel` directly. |\n| **FieldTemplate** | `fieldFormControl` | Props passed to the outer `FormControl` wrapper. |\n| | `fieldTypography` | Props passed to the `Typography` component used for the description. |\n| **ObjectFieldTemplate** | `objectGridContainer` | Props passed to the outer `Grid` container. |\n| | `objectGridItem` | Props passed to each property's `Grid` item. |\n| | `objectAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `objectAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| **ArrayFieldTemplate** | `arrayBox` | Props passed to the inner `Box` container holding the array items. |\n| | `arrayPaper` | Props passed to the outer `Paper` wrapper. |\n| | `arrayAddButtonGridContainer` | Props passed to the `Grid` container adjacent to the Add button. |\n| | `arrayAddButtonGridItem` | Props passed to the `Grid` item wrapping the Add button. |\n| | `arrayAddButtonBox` | Props passed to the `Box` wrapping the Add button. |\n| **ArrayFieldItemTemplate** | `arrayItemGridContainer` | Props passed to the outer `Grid` container for the item row. |\n| | `arrayItemGridItem` | Props passed to the content `Grid` item. |\n| | `arrayItemOuterBox` | Props passed to the outer `Box`. |\n| | `arrayItemPaper` | Props passed to the `Paper` elevation component. |\n| | `arrayItemInnerBox` | Props passed to the inner `Box` holding the children. |\n| | `arrayItemToolbarGrid` | Props passed to the `Grid` holding the toolbar buttons. |\n| **CheckboxesWidget** | `formGroup` | Props passed to the `FormGroup` container. |\n| | `checkbox` | Props passed to individual `Checkbox` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each checkbox. |\n| **CheckboxWidget** | `checkbox` | Props passed to the single `Checkbox` component. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` component wrapping the checkbox. |\n| **RadioWidget** | `radioGroup` | Props passed to the `RadioGroup` component. |\n| | `radio` | Props passed to the individual `Radio` components. |\n| | `formControlLabel` | Props passed to the `FormControlLabel` components wrapping each radio. |\n| **SelectWidget** | `inputLabel` | Props passed to the native MUI `InputLabel` component. |\n| | `select` | Props passed to the native MUI `Select` component. |\n| **ErrorList** | `errorBox` | Props passed to the inner `Box`. |\n| | `errorList` | Props passed to the `List` container. |\n| | `errorListItem` | Props passed to individual `ListItem` components wrapping each error. |\n| | `errorListItemIcon` | Props passed to the `ListItemIcon` next to each error. |\n| | `errorListItemText` | Props passed to the `ListItemText` displaying the error. |\n| | `errorPaper` | Props passed to the outer `Paper` wrapper. |\n| | `errorTypography` | Props passed to the `Typography` displaying the \"Errors\" title. |\n| **FieldErrorTemplate** | `fieldErrorList` | Props passed to the `List` container. |\n| | `fieldErrorListItem` | Props passed to individual `ListItem` components. |\n| | `fieldErrorFormHelperText` | Props passed to the `FormHelperText` displaying the error text. |\n| **FieldHelpTemplate** | `helpFormHelperText` | Props passed to the `FormHelperText` used for help text. |\n| **DescriptionField** | `descTypography` | Props passed to the `Typography` component. |\n| **TitleField** | `titleBox` | Props passed to the outer `Box` wrapper. |\n| | `titleDivider` | Props passed to the `Divider` element. |\n| | `titleTypography` | Props passed to the `Typography` component used for the title. |\n| | `titleGridContainer` | Props passed to `Grid` container when title has optional data controls. |\n| | `titleGridItem` | Props passed to the `Grid` item containing the title. |\n| | `titleOptionalDataGridItem` | Props passed to the `Grid` item containing the optional data control. |\n| **MultiSchemaFieldTemplate** | `multiBox` | Props passed to the wrapper `Box`. |\n| | `multiFormControl` | Props passed to the wrapper `FormControl`. |\n| **SubmitButton** | `submitBox` | Props passed to the `Box` wrapping the submit button. |\n| | `submitButton` | Props passed to the `Button` element. |\n| **WrapIfAdditionalTemplate** | `wrapGridContainer` | Props passed to the outer `Grid` container. |\n| | `wrapKeyGridItem` | Props passed to the `Grid` item containing the key `TextField`. |\n| | `wrapChildrenGridItem` | Props passed to the `Grid` item containing the field children. |\n| | `wrapRemoveButtonGridItem` | Props passed to the `Grid` item containing the remove button. |\n\n\n# PrimeReact Customization\n\nYou may set PrimeReact-specific options in the `uiSchema` object using the `\"prime\"` `\"ui:option\"`.\n\n```json\n{\n \"password\": {\n \"ui:options\": {\n \"prime\": {\n \"feedback\": true,\n \"weakLabel\": \"Too weak\",\n \"mediumLabel\": \"Could be stronger\",\n \"strongLabel\": \"Strong password\",\n \"toggleMask\": true\n }\n }\n }\n}\n```\n\n## Components\n\nThe `@rjsf/primereact` theme renders to the following PrimeReact components:\n\n- [`InputText`](https://primereact.org/inputtext/) as the default widget\n- [`AutoComplete`](https://primereact.org/autocomplete/) as the default with `examples`\n- [`Checkbox`](https://primereact.org/checkbox/) for boolean fields and `checkboxes` widget\n- [`ColorPicker`](https://primereact.org/colorpicker/) as `color` widget\n- [`Password`](https://primereact.org/password/) as `password` widget\n- [`RadioButton`](https://primereact.org/radiobutton/) as `radio` widget\n- [`Slider`](https://primereact.org/slider/) as `range` widget\n- [`Dropdown`](https://primereact.org/dropdown/) as `select` widget\n- [`MultiSelect`](https://primereact.org/multiselect/) as `select` widget with `multiple` option\n- [`InputTextarea`](https://primereact.org/inputtextarea/) as `textarea` widget\n- [`InputNumber`](https://primereact.org/inputnumber/) as `updown` widget\n\nPlease refer to the [PrimeReact documentation](https://primereact.org/) for the available PrimeReact-specific options\nof each component.\n\n\n# Semantic-UI Customization\n\nThere are various options to pass to semantic theme fields.\n\nNote that every semantic property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {semantic:{[property]: [value]}}}`\n\nIn other words, the following uiSchema is equivalent:\n\n> Note: All fields have the following settings below as their default\n\n```\nfluid: Take on the size of its container.\ninverted: Format to appear on dark backgrounds.\n```\n\n```json\n{\n \"ui:options\": {\n \"semantic\": {\n \"fluid\": true,\n \"inverted\": false,\n \"errorOptions\": {\n \"size\": \"small\",\n \"pointing\": \"above\"\n }\n }\n }\n}\n```\n\n#### Semantic Widget Optional Properties\n\n- [Semantic props for TextWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for CheckboxWidget](https://react.semantic-ui.com/modules/checkbox/)\n- [Semantic props for SelectWidget](https://react.semantic-ui.com/modules/dropdown/)\n- [Semantic props for RangeWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for RadioWidget](https://react.semantic-ui.com/addons/radio/)\n- [Semantic props for PasswordWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for UpDownWidget](https://react.semantic-ui.com/elements/input/)\n- [Semantic props for TextAreaWidget](https://react.semantic-ui.com/addons/text-area/)\n\n## errorOptions\n\nThe uiSchema semantic object accepts an `errorOptions` property for each field of the schema:\n\n```\nsize: determines the size of the error message dialog\npointing: determines the direction of the arrow on the error message dialog\n```\n\nBelow are the current defaults\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n errorOptions: {\n size: 'small',\n pointing: 'above',\n },\n },\n },\n};\n```\n\n## semantic options uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the semantic uiSchema value within the `ui:options` property:\n\n```\nwrapItem: wrap each array item in a Segment\nhorizontalButtons: vertical buttons instead of the default horizontal\n```\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n semantic: {\n wrapItem: true,\n horizontalButtons: false,\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## formContext\n\nThe formContext semantic object accepts `wrapContent` ,`wrapLabel` properties.\n\n```\nwrapContent: wrap all inputs field content in a div, for custom styling\nwrapLabel: wrap all labels in a div, for custom styling via CSS\n```\n\n```tsx\n\n```\n\n\n# uiSchema\n\nJSON Schema is limited for describing how a given data type should be rendered as a form input component. That's why this library introduces the concept of uiSchema.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.\n\nNote that almost every property within uiSchema can be rendered in one of two ways: `{\"ui:options\": {[property]: [value]}}`, or `{\"ui:[property]\": value}`.\n\nIn other words, the following `uiSchema`s are equivalent:\n\n```json\n{\n \"ui:title\": \"Title\",\n \"ui:description\": \"Description\",\n \"ui:classNames\": \"my-class\",\n \"ui:submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n}\n```\n\n```json\n{\n \"ui:options\": {\n \"title\": \"Title\",\n \"description\": \"Description\",\n \"classNames\": \"my-class\",\n \"submitButtonOptions\": {\n \"props\": {\n \"disabled\": false,\n \"className\": \"btn btn-info\"\n },\n \"norender\": false,\n \"submitText\": \"Submit\"\n }\n }\n}\n```\n\nFor a full list of what is supported in the `uiSchema` see the `UiSchema` type in [@rjsf/utils/types.ts](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\nBe sure to pay attention to the hierarchical intersection to these other types: `UIOptionsBaseType` and `TemplatesType`.\n\n## Exceptions to the equivalence\n\nThere are 4 properties that exist in a `UiSchema` that will not be found in an inner `ui:options` object.\n\n### `ui:globalOptions`\n\nThe set of globally relevant `UiSchema` options that are read from the root-level `UiSchema` and stored in the `registry` for use everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': { copyable: true },\n};\n```\n\n### `ui:definitions`\n\nThe `ui:definitions` property allows you to define reusable UI customizations for schema `$ref` references. This is particularly useful for:\n\n- **Recursive schemas** - Define uiSchema once for a self-referencing schema node\n- **Reused definitions** - Apply consistent UI to schemas used in multiple places\n- **oneOf/anyOf branches** - Provide different uiSchema for branches that reference different definitions\n\nThe keys in `ui:definitions` must match the exact `$ref` path used in the schema (e.g., `#/definitions/address` or `#/$defs/node`).\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n },\n },\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' }, // Recursive reference\n },\n },\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/address': {\n street_address: { 'ui:placeholder': 'Street and number' },\n city: { 'ui:placeholder': 'City name' },\n },\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Enter node name' },\n children: { 'ui:options': { orderable: false } },\n },\n },\n // Local overrides take precedence over ui:definitions\n shipping_address: {\n street_address: { 'ui:placeholder': 'Shipping street (overrides definition)' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n#### Local Overrides\n\nYou can override specific properties from `ui:definitions` by providing values at the field path. Local values are merged with definitions, with local values taking precedence.\n\n#### oneOf/anyOf with Same Property Names\n\nWhen using `oneOf` or `anyOf` with branches that have properties with the same name, each branch's `$ref` maps to its own entry in `ui:definitions`, ensuring correct UI is applied:\n\n```tsx\nconst schema: RJSFSchema = {\n definitions: {\n person: { type: 'object', properties: { name: { type: 'string' } } },\n company: { type: 'object', properties: { name: { type: 'string' } } },\n },\n type: 'object',\n properties: {\n contact: {\n oneOf: [\n { title: 'Person', $ref: '#/definitions/person' },\n { title: 'Company', $ref: '#/definitions/company' },\n ],\n },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/person': {\n name: { 'ui:placeholder': 'Full name (e.g., John Doe)' },\n },\n '#/definitions/company': {\n name: { 'ui:placeholder': 'Company name (e.g., Acme Inc.)' },\n },\n },\n};\n```\n\n### `ui:rootFieldId` (deprecated)\n\n> DEPRECATED: Use `Form.idPrefix` instead, will be removed in a future major version\n\nBy default, this library will generate ids unique to the form for all rendered widgets.\nIf you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:rootFieldId': 'myform',\n};\n```\n\nThis will make all widgets have an id prefixed with `myform`.\n\n### `ui:field`\n\nThe `ui:field` property overrides the `Field` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a field that is used to look up an implementation from the `fields` list or an actual one-off `Field` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md#custom-field-components) for more information about how to use this property.\n\n### `ui:fieldReplacesAnyOrOneOf`\n\nBy default, any field that is rendered for an `anyOf`/`oneOf` schema will be wrapped inside the `AnyOfField` or `OneOfField` component.\nThis default behavior may be undesirable if your custom field already handles behavior related to choosing one or more subschemas contained in the `anyOf`/`oneOf` schema.\nBy providing a `true` value for this flag in association with a custom `ui:field`, the wrapped components will be omitted, so just one instance of the custom field will be rendered.\nIf the flag is omitted or set to `false`, your custom field will be wrapped by `AnyOfField`/`OneOfField`.\n\n### `ui:options`\n\nThe `ui:options` property cannot be nested inside itself and thus is the last exception.\n\n## `ui:XXX` or `ui:options.XXX`\n\nAll the properties that follow can be specified in the `uiSchema` in either of the two equivalent ways.\n\n> NOTE: The properties specific to array items can be found [here](../json-schema/arrays.md#array-item-uiSchema-options). For advanced dynamic UI schema capabilities for array items, see the [Dynamic UI Schema Examples](./dynamic-ui-schema-examples.md).\n\n### widget\n\nThe `ui:widget` property overrides the `Widget` implementation used for rendering any field in the form's hierarchy.\nSpecify either the name of a widget that is used to look up an implementation from the `widgets` list or an actual one-off `Widget` component implementation itself.\n\nSee [Custom Widgets and Fields](../advanced-customization/custom-widgets-fields.md) for more information about how to use this property.\n\n### classNames\n\nThe uiSchema object accepts a `ui:classNames` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:classNames': 'task-title foo-bar',\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### style\n\nThe uiSchema object accepts a `ui:style` property for each field of the schema:\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n title: {\n 'ui:style': { color: 'red' },\n },\n};\n```\n\nWill result in:\n\n```html\n
\n \n
\n```\n\n### allowClearTextInputs\n\nThe optional `ui:allowClearTextInputs` uiSchema directive enables a clear/reset button for text-based input widgets.\nWhen set to true, a clear button will be displayed when the input field has a value and is not readonly or disabled.\nWhen omitted, no clear button will be displayed for text input fields.\n\nWhen clicked, the property value will be set to the `ui:emptyValue`, if defined.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:allowClearTextInputs': true,\n};\n```\n\nIt can also be enabled globally by setting the `allowClearTextInputs` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n allowClearTextInputs: true,\n },\n};\n```\n\n### autocomplete\n\nIf you want to mark a text input, select or textarea input to use the HTML autocomplete feature, set the `ui:autocomplete` uiSchema directive to a valid [HTML autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autocomplete': 'on',\n};\n```\n\n### autocapitalize\n\nTo control automatic capitalization on virtual keyboards for a text input, set the `ui:autocapitalize` uiSchema\ndirective to a valid [HTML autocapitalize value](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize#value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:autocapitalize': 'words',\n};\n```\n\n### autofocus\n\nIf you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'textarea',\n 'ui:autofocus': true,\n};\n```\n\n### description\n\nSometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:description': 'The best password',\n};\n```\n\n### deprecatedHandling\n\nThe `ui:deprecatedHandling` uiSchema directive controls how a field marked as `deprecated` in the JSON Schema is rendered.\n\nAccepts one of three values:\n\n- `'label'` (default): The field is rendered normally with `\"(deprecated)\"` appended to its label.\n- `'disable'`: The field is rendered but all its child widgets are disabled.\n- `'hide'`: The field is completely hidden from the form.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n legacyField: {\n 'ui:options': {\n deprecatedHandling: 'disable',\n },\n },\n};\n```\n\nIt can also be set globally by specifying the `deprecatedHandling` option in the `ui:globalOptions` uiSchema directive, which applies the chosen behavior to every deprecated field in the form.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n legacyField: { type: 'string', deprecated: true },\n anotherOldField: { type: 'number', deprecated: true },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n deprecatedHandling: 'hide',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### disabled\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### enableMarkdownInDescription\n\nThe `ui:enableMarkdownInDescription` uiSchema directive enables the support of Markdown syntax within the description of\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInDescription': true,\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInDescription` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', description: '**bolded** text in the description' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInDescription: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableMarkdownInHelp\n\nThe `ui:enableMarkdownInHelp` uiSchema directive enables the support of Markdown syntax within the help displayed for\na field.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:enableMarkdownInHelp': true,\n 'ui:help': '**bolded** text in the help',\n};\nrender(, document.getElementById('app'));\n```\n\nIt can also be enabled globally by setting the `enableMarkdownInHelp` option to `true` in the `ui:globalOptions`\nuiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n enableMarkdownInHelp: true,\n },\n 'ui:help': '**bolded** text in the help',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### enableOptionalDataFieldForType\n\nThe `ui:enableOptionalDataFieldForType` uiSchema directive enables support for displaying the `Optional Data Controls` feature.\nThe intention of this feature is to allow developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields (see [examples](#add-optional-data-controls) below).\n\nThis directive takes, as its value, an array in one of four forms:\n\n1. `[]` - Disables the feature at a global or field level\n2. `['array']` - Enables the feature only for optional arrays at a global or field level\n3. `['object']` - Enables the feature only for optional object at a global or field level\n4. `['array', 'object']`- Enables the feature for both optional object and arrays at a global or field level\n\nIt can be specified in either the `ui:globalOptions` to turn the feature on for everything or in a specific field's `uiSchema`\nTo work properly this option must be coupled with the [emptyObjectFields](./form-props.md#emptyobjectfields) experimental feature on `Form` using the `populateRequiredDefaults` or `skipDefaults` options.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"undefined\" value in `formData` will NOT render any of the container's UI elements.\nInstead the object/array container's field title will have an \"Add optional data\" icon button that, when clicked will cause an empty container data element to be added to `formData`.\n\nWhen enabled for either (or both) the `array` or `object` types, any optional object or array field which has an \"defined\" value in `formData` will render all of the container's UI elements as normal AND the object/array container's field title will have a \"Remove optional data\" icon button that, when clicked will set the data for field in the `formData` to \"undefined\".\n\nHere is an example of what the UI will look like when enabled using the following `Form` configuration:\n\n```tsx\nconst schema: RJSFSchema = {\n title: 'test',\n properties: {\n nestedObjectOptional: {\n type: 'object',\n properties: {\n test: {\n type: 'string',\n },\n },\n },\n nestedArrayOptional: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n },\n};\nconst uiSchema = {\n 'ui:globalOptions': {\n enableOptionalDataFieldForType: ['object', 'array'],\n },\n};\nconst experimental_defaultFormStateBehavior = {\n // Set the emptyObjectFields to only populate required defaults to highlight the code working\n emptyObjectFields: 'populateRequiredDefaults',\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n#### Add Optional Data Controls\n\n![add optional data controls](./OptionalDataControlsAdd.png)\n\n#### Remove Optional Data Controls\n\n![remove optional data controls](./OptionalDataControlsRemove.png)\n\n### emptyValue\n\nThe `ui:emptyValue` uiSchema directive provides the value to store when the input for a field is emptied, whether by typing or by clicking the `ui:allowClearTextInputs` clear button. It defaults to `undefined`, which omits the field from the form data entirely.\n\n### enumDisabled\n\nTo disable an option, use the `enumDisabled` property in uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': ['two'],\n};\n```\n\n### enumNames\n\nAllows a user to provide labels for enum values in the schema. Can be an array (matched by index) or a map (matched by value).\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchemaArray: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchemaMap: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n```\n\n### enumOrder\n\nControls the display order of enum options. Use `'*'` to represent remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n```\n\n### filePreview\n\nThe `FileWidget` can be configured to show a preview of an image or a download link for non-images using this flag.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'string',\n format: 'data-url',\n};\nconst uiSchema: UiSchema = {\n 'ui:options': {\n filePreview: true,\n },\n};\n```\n\n### help\n\nSometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:help': 'Hint: Make it strong!',\n};\n```\n\n![](https://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s) (after contextualized errors, if any).\n\n### hideError\n\nThe `ui:hideError` uiSchema directive will, if set to `true`, hide the default error display for the given field AND all of its child fields in the hierarchy.\n\nIf you need to enable the default error display of a child in the hierarchy after setting `hideError: true` on the parent field, simply set `hideError: false` on the child.\n\nThis is useful when you have a custom field or widget that utilizes either the `rawErrors` or the `errorSchema` to manipulate and/or show the error(s) for the field/widget itself.\n\n### inputType\n\nTo change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n inputType: 'tel',\n },\n};\n```\n\n### label\n\nField labels are rendered by default.\nLabels may be omitted on a per-field by setting the `label` option to `false` in the `ui:options` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nThey can also be omitted globally by setting the `label` option to `false` in the `ui:globalOptions` uiSchema directive.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n label: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### optionValueFormat\n\nControls how enum-backed widgets (`select`, `radio`, `checkboxes`) encode option values in their DOM `value` attributes. Accepts `'indexed'` (default) or `'realValue'`.\n\n- `'indexed'`: options are encoded as their array index (e.g. `value=\"0\"`, `value=\"1\"`). This is the historical behavior and keeps non-primitive enum values (objects, arrays) addressable without stringifying them.\n- `'realValue'`: primitive option values are stringified directly (e.g. `value=\"admin\"`, `value=\"42\"`, `value=\"true\"`). This enables native HTML form submission and browser autocomplete since the submitted value matches the enum value. Non-primitive values (objects, arrays) still fall back to their index because `String(obj)` would produce `\"[object Object]\"`.\n\nThe form data passed to `onChange` is always the typed enum value; this option only affects the DOM-level encoding. Can be specified in `ui:globalOptions` to apply to all enum-backed fields, or per-field in `ui:options`.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n role: { type: 'string', enum: ['admin', 'editor', 'viewer'] },\n },\n};\n\n// Form-wide\nconst uiSchema: UiSchema = {\n 'ui:globalOptions': {\n optionValueFormat: 'realValue',\n },\n};\n\n// Or per-field\nconst fieldUiSchema: UiSchema = {\n role: {\n 'ui:options': {\n optionValueFormat: 'realValue',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### order\n\nThis property allows you to reorder the properties that are shown for a particular object. See [Objects](../json-schema/objects.md) for more information.\n\n### placeholder\n\nYou can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', format: 'uri' };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'http://',\n};\n\nrender(, document.getElementById('app'));\n```\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string', enum: ['First', 'Second'] };\nconst uiSchema: UiSchema = {\n 'ui:placeholder': 'Choose an option',\n};\n\nrender(, document.getElementById('app'));\n```\n\n### readonly\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only. This is equivalent to setting the `readOnly` property in the schema.\n\n> Note: If you're wondering about the difference between a `disabled` field and a `readonly` one: Marking a field as read-only will render it greyed out, but its text value will be selectable. Disabling it will prevent its value to be selected at all.\n\n### rows\n\nYou can set the initial height of a textarea widget by specifying `rows` option.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:options': {\n widget: 'textarea',\n rows: 15,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### title\n\nSometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = { type: 'string' };\nconst uiSchema: UiSchema = {\n 'ui:widget': 'password',\n 'ui:title': 'Your password',\n};\n```\n\n### submitButtonOptions\n\nSometimes it's convenient to change the behavior of the submit button for the form. This is the purpose of the `ui:submitButtonOptions` uiSchema directive:\n\nYou can pass any other prop to the submit button if you want, by default, this library will set the following options / props mentioned below for all submit buttons:\n\n#### `norender` option\n\nYou can set this property to `true` to remove the submit button completely from the form. Nice option, if the form is just for viewing purposes.\n\n#### `submitText` option\n\nYou can use this option to change the text of the submit button. Set to \"Submit\" by default.\n\n#### `props` section\n\nYou can pass any other prop to the submit button if you want, via this section.\n\n##### `disabled` prop\n\nYou can use this option to disable the submit button.\n\n##### `className` prop\n\nYou can use this option to specify a class name for the submit button.\n\n```tsx\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:submitButtonOptions': {\n props: {\n disabled: false,\n className: 'btn btn-info',\n },\n norender: false,\n submitText: 'Submit',\n },\n};\n```\n\n## `duplicateKeySuffixSeparator` option\n\nWhen using `additionalProperties`, key collision is prevented by appending a unique integer suffix to the duplicate key.\nFor example, when you add a key named `myKey` to a form where `myKey` is already defined, then your new key will become `myKey-1`.\nYou can use `ui:duplicateKeySuffixSeparator` to override the default separator, `\"-\"` with a string of your choice on a per-field basis.\n\nYou can also set this in the `ui:globalOptions` to have the same separator used everywhere.\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema = {\n 'ui:globalOptions': {\n duplicateKeySuffixSeparator: '_',\n },\n};\n```\n\n## Using uiSchema with oneOf, anyOf\n\n### anyOf\n\nThe uiSchema will work with elements inside an `anyOf` as long as the uiSchema defines the `anyOf` key at the same level as the `anyOf` within the `schema`.\nBecause the `anyOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `anyOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n anyOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n### oneOf\n\nThe uiSchema will work with elements inside an `oneOf` as long as the uiSchema defines the `oneOf` key at the same level as the `oneOf` within the `schema`.\nBecause the `oneOf` in the `schema` is an array, so must be the one in the `uiSchema`.\nIf you want to override the titles of the first two elements within the `oneOf` list you would do the following:\n\n```ts\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n title: 'Strings',\n type: 'string',\n },\n {\n title: 'Numbers',\n type: 'number',\n },\n {\n title: 'Booleans',\n type: 'boolean',\n },\n ],\n};\n\nconst uiSchema: UiSchema = {\n oneOf: [\n {\n 'ui:title': 'Custom String Title',\n },\n {\n 'ui:title': 'Custom Number Title',\n },\n ],\n};\n```\n\n> NOTE: Because the third element in the `schema` does not have an associated element in the `uiSchema`, it will keep its original title.\n\n## Theme Options\n\n- [AntD Customization](themes/antd/uiSchema.md)\n- [Chakra-UI Customization](themes/chakra-ui/uiSchema.md)\n- [MUI Customization](themes/mui/uiSchema.md)\n- [PrimeReact Customization](themes/primereact/uiSchema.md)\n- [Semantic-UI Customization](themes/semantic-ui/uiSchema.md)\n\n\n# RJSF utility functions, constants and types\n\nIn version 5, the utility functions from `@rjsf/core/utils` were refactored into their own library called `@rjsf/utils`.\nThese utility functions are separated into two distinct groups.\nThe first, larger, group are the [functions](#non-validator-utility-functions) that do NOT require a `ValidatorType` interface be provided as one of their parameters.\nThe second, smaller, group are the [functions](#validator-based-utility-functions) that DO require a `ValidatorType` interface be provided as a parameter.\nThere is also a helper [function](#schema-utils-creation-function) used to create a `SchemaUtilsType` implementation from a `ValidatorType` implementation and `rootSchema` object.\n\n## Constants\n\nThe `@rjsf/utils` package exports a set of constants that represent all the keys into various elements of a RJSFSchema or UiSchema that are used by the various utility functions.\nIn addition to those keys, there is the special `ADDITIONAL_PROPERTY_FLAG` flag that is added to a schema under certain conditions by the `retrieveSchema()` utility.\n\nThese constants can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/constants.ts).\n\n## Types\n\nAdditionally, the Typescript types used by the utility functions represent nearly all the types used by RJSF.\nThose types are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/types.ts).\n\n**`ObjectPath`** — Used by the path utilities (`getByPath`, `setByPath`, `hasByPath`, `unsetByPath`) to address a value inside a plain object. It is `string | number | FieldPathList`. A bare **string is always a single literal key**: `'a.b'` means the key `'a.b'`, never the nested path `a` → `b`. To walk a dotted path string, split it explicitly with [toPath()](#topath) first, or pass a `FieldPathList` (`(string | number)[]`) of segments. Reads and existence checks resolve **own** properties only, so inherited members never appear as form data.\n\n**`SchemaFieldPath`** — Used when navigating a JSON Schema subtree (for example with `getFromSchema` and `findFieldInSchema` on `SchemaUtilsType`, documented under [Validator-based utility functions](#validator-based-utility-functions)). It is `string | FieldPathList`: either a dotted path or an array of segments with the same rules as `FieldPathList` (`(string | number)[]`). A numeric segment denotes an array index or an object key that is numeric. Navigation skips only `undefined` or empty-string segments, so segment **`0`** is always honored (this avoids the bug from treating `0` as a falsy path unit).\n\n## Enums\n\nThere are enumerations in `@rjsf/utils` that are exported for use by `@rjsf/core` and all the themes, as well as any customizations you may build.\n\nThese enums can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/utils/src/enums.ts).\n\n## Non-Validator utility functions\n\n### allowAdditionalItems()\n\nChecks the schema to see if it is allowing additional items, by verifying that `schema.additionalItems` is an object.\nThe user is warned in the console if `schema.additionalItems` has the value `true`.\n\n#### Parameters\n\n- schema: S - The schema object to check\n\n#### Returns\n\n- boolean: True if additional items is allowed, otherwise false\n\n### ariaDescribedByIds()\n\nReturn a list of element ids that contain additional information about the field that can be used to as the aria description of the field.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n- [includeExamples=false]: boolean - Optional flag, if true, will add the `examplesId` into the list\n\n#### Returns\n\n- string: The string containing the list of ids for use in an `aria-describedBy` attribute\n\n### asNumber()\n\nAttempts to convert the string into a number. If an empty string is provided, then `undefined` is returned.\nIf a `null` is provided, it is returned.\nIf the string ends in a `.` then the string is returned because the user may be in the middle of typing a float number.\nIf a number ends in a pattern like `.0`, `.20`, `.030`, string is returned because the user may be typing number that will end in a non-zero digit.\nOtherwise, the string is wrapped by `Number()` and if that result is not `NaN`, that number will be returned, otherwise the string `value` will be.\n\n#### Parameters\n\n- value: string | null - The string or null value to convert to a number\n\n#### Returns\n\n- undefined | null | string | number: The `value` converted to a number when appropriate, otherwise the `value`\n\n### bracketNameGenerator()\n\nGenerates bracketed names for form fields.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [isMultiValue]: boolean | undefined - Optional flag, if true, will append `[]` to the end of the name for multi-value fields (e.g., checkboxes, multi-select)\n\n#### Returns\n\n- string: The generated bracketed name (e.g., `root[tasks][0][title]`, or `root[hobbies][]` for multi-value fields)\n\n### buttonId()\n\nReturn a consistent `id` for the `btn` button element\n\n#### Parameters\n\n- id: FieldPathId | string - The id of the parent component for the option\n- btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove' - The button type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the button from the given `id` and `btn` type\n\n### canExpand<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks whether the field described by `schema`, having the `uiSchema` and `formData` supports expanding.\nThe UI for the field can expand if it has additional properties, is not forced as non-expandable by the `uiSchema` and the `formData` object doesn't already have `schema.maxProperties` elements.\n\n#### Parameters\n\n- schema: S - The schema for the field that is being checked\n- [uiSchema=\\{}]: UiSchema<T, S, F> - The uiSchema for the field\n- [formData]: T | undefined - The formData for the field\n\n#### Returns\n\n- boolean: True if the schema element has additionalProperties or patternProperties keywords, is expandable, and not at the maxProperties limit\n\n### createErrorHandler<T = any>()\n\nGiven a `formData` object, recursively creates a `FormValidation` error handling structure around it\n\n#### Parameters\n\n- formData: T - The form data around which the error handler is created\n\n#### Returns\n\n- FormValidation<T>: A `FormValidation` object based on the `formData` structure\n\n### dataURItoBlob()\n\nGiven the `FileReader.readAsDataURL()` based `dataURI` extracts that data into an actual Blob along with the name\nof that Blob if provided in the URL. If no name is provided, then the name falls back to `unknown`.\n\n#### Parameters\n\n- dataURI: string - The `DataUrl` potentially containing name and raw data to be converted to a Blob\n\n#### Returns\n\n- \\{ blob: Blob, name: string }: An object containing a Blob and its name, extracted from the URI\n\n### dateRangeOptions<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns a list of options for a date range between `start` and `stop`.\nIf the start date is greater than the end date, then the date range is reversed.\nIf `start` and `stop` are negative numbers (or zero), then they will be treated as relative to the current year.\n\n#### Parameters\n\n- start: number - The starting point of the date range\n- stop: number - The ending point of the date range\n\n#### Returns\n\n- EnumOptionsType<S>[]: The list of EnumOptionsType for the date range between `start` and `stop`\n\n#### Throws\n\n- Error when `start` and `stop` aren't both %lt;= 0 or > 0\n\n### deepEquals()\n\nImplements a deep equals that treats all functions as equivalent and tracks circular references, so self-referential inputs do not recurse infinitely.\n\n#### Parameters\n\n- a: any - The first element to compare\n- b: any - The second element to compare\n\n#### Returns\n\n- boolean: True if the `a` and `b` are deeply equal, false otherwise\n\n### descriptionId()\n\nReturn a consistent `id` for the field description element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field description element from the given `id`\n\n### dotNotationNameGenerator()\n\nGenerates dot-notation names for form fields. Multi-value fields are handled the same as single-value fields in dot notation.\n\n#### Parameters\n\n- path: FieldPathList - The path of field path units to use when generating the name\n- idPrefix: string - The prefix to use at the start of the generated name\n- [_isMultiValue]: boolean | undefined - Optional flag (unused in dot notation)\n\n#### Returns\n\n- string: The generated dot-notation name (e.g., `root.tasks.0.title`)\n\n### englishStringTranslator()\n\nTranslates a `TranslatableString` value `stringToTranslate` into english.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `stringToTranslate` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\nstringToTranslate: TranslatableString - The `TranslatableString` value to convert to english\n[params]: string[] - The optional list of replaceable parameter values to substitute to the english string\n\n#### Returns\n\n- string: The `stringToTranslate` itself with any replaceable parameter values substituted\n\n### enumOptionsDeselectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nRemoves the enum option value at the `valueIndex` from the currently `selected` (list of) value(s).\nIf `selected` is a list, then that list is updated to remove the enum option value with the `valueIndex` in `allEnumOptions`.\nIf it is a single value, then if the enum option value with the `valueIndex` in `allEnumOptions` matches `selected`, undefined is returned, otherwise the `selected` value is returned.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value to be removed from the selected list or single value\n- [selected]: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined - The current (list of) selected value(s)\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated `selected` list with the `value` removed from it\n\n### enumOptionSelectedValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nComputes the value to pass to a select element's `value` attribute.\nWhen `format` is `'realValue'`, converts form data values to strings.\nWhen `format` is `'indexed'` (the default), resolves to index-based values via `enumOptionsIndexForValue`.\nReturns `emptyValue` when the current value is empty.\n\n#### Parameters\n\n- value: any - The current form data value\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- multiple: boolean - Whether the select allows multiple selections\n- [format='indexed']: OptionValueFormat - How option values are encoded on the DOM\n- emptyValue: any - The value to return when the selection is empty\n\n#### Returns\n\n- any: The value to use for the select element's `value` attribute\n\n### enumOptionsIndexForValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the index(es) of the options in `allEnumOptions` whose value(s) match the ones in `value`.\nAll the `enumOptions` are filtered based on whether they are a \"selected\" `value` and the index of each selected one is then stored in an array.\nIf `multiple` is true, that array is returned, otherwise the first element in the array is returned.\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The single value or list of values for which indexes are desired\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [multiple=false]: boolean - Optional flag, if true will return a list of index, otherwise a single one\n\n#### Returns\n\n- string | string[] | undefined: A single string index for the first `value` in `allEnumOptions`, if not `multiple`. Otherwise, the list of indexes for (each of) the value(s) in `value`.\n\n### enumOptionsIsSelected<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetermines whether the given `value` is (one of) the `selected` value(s).\n\n#### Parameters\n\n- value: EnumOptionsType<S>[\"value\"] - The value being checked to see if it is selected\n- selected: EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] - The current selected value or list of values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- boolean: true if the `value` is one of the `selected` ones, false otherwise\n\n### enumOptionsSelectValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nAdd the `value` to the list of `selected` values in the proper order as defined by `allEnumOptions`.\n\n#### Parameters\n\n- valueIndex: string | number - The index of the value that should be selected\n- selected: EnumOptionsType<S>[\"value\"][] - The current list of selected values\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"][]: The updated list of selected enum values with `value` added to it in the proper location\n\n### enumOptionsValueForIndex<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the value(s) from `allEnumOptions` at the index(es) provided by `valueIndex`.\nIf `valueIndex` is not an array AND the index is not valid for `allEnumOptions`, `emptyValue` is returned.\nIf `valueIndex` is an array, AND it contains an invalid index, the returned array will have the resulting undefined values filtered out, leaving only valid values or in the worst case, an empty array.\n\n#### Parameters\n\n- valueIndex: string | number | Array<string | number> - The index(es) of the value(s) that should be returned\n- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions\n- [emptyValue]: EnumOptionsType<S>[\"value\"] | undefined - The value to return when the non-array `valueIndex` does not refer to a real option\n\n#### Returns\n\n- EnumOptionsType<S>[\"value\"] | EnumOptionsType<S>[\"value\"][] | undefined: The single or list of values specified by the single or list of indexes if they are valid. Otherwise, `emptyValue` or an empty list.\n\n### enumOptionValueDecoder<S extends StrictRJSFSchema = RJSFSchema>()\n\nDecodes a string from a DOM value attribute back to a typed enum value.\nWhen `format` is `'realValue'`, does a reverse lookup: finds the enum option whose `String(value)` matches the input string and returns the original typed value.\nFor object/array values that were encoded as indices, falls back to index resolution.\nWhen `format` is `'indexed'` (the default), uses index-based resolution via `enumOptionsValueForIndex`.\n\n#### Parameters\n\n- value: string | string[] - The string value(s) from the DOM\n- enumOptions: EnumOptionsType<S>[] | undefined - The available enum options\n- [format='indexed']: OptionValueFormat - How the values were encoded on the DOM\n- emptyValue: unknown - The value to return for empty/missing selections\n\n#### Returns\n\n- unknown: The original typed enum value(s)\n\n### enumOptionValueEncoder()\n\nEncodes an enum option value into a string for a DOM value attribute.\nWhen `format` is `'realValue'`, primitive values are converted via `String()`.\nNon-primitive values (objects, arrays) fall back to the index since `String()` would produce `\"[object Object]\"`.\nWhen `format` is `'indexed'` (the default), returns the index as a string.\n\n#### Parameters\n\n- value: unknown - The typed enum value\n- index: number - The option's position in the enumOptions array\n- [format='indexed']: OptionValueFormat - How to encode the value for the DOM attribute\n\n#### Returns\n\n- string: The string to use as the DOM value attribute\n\n### logUnsupportedDefaultForEnum<S extends StrictRJSFSchema = RJSFSchema>()\n\nLogs a warning when a single-select enum widget has a schema default that is not one of its enum options.\nMulti-select widgets are ignored because they do not use the same single-value default handling.\n\n#### Parameters\n\n- id: string - The field id used in the warning message\n- schema: S - The schema whose default value is checked\n- [enumOptions]: EnumOptionsType<S>[] - The enum options available to the widget\n- [multiple=false]: boolean - Whether the widget allows multiple selections\n\n### errorId()\n\nReturn a consistent `id` for the field error element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field error element from the given `id`\n\n### examplesId()\n\nReturn a consistent `id` for the field examples element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field examples element from the given `id`\n\n### findSchemaDefinition<S extends StrictRJSFSchema = RJSFSchema>()\n\nGiven the name of a `$ref` from within a schema, using the `rootSchema`, look up and return the sub-schema using the path provided by that reference.\nIf `#` is not the first character of the reference, or the path does not exist in the schema, then throw an Error.\nOtherwise, return the sub-schema. Also deals with nested `$ref`s in the sub-schema.\n\n#### Parameters\n\n- $ref: string - The ref string for which the schema definition is desired\n- [rootSchema={}]: S - The root schema in which to search for the definition\n\n#### Returns\n\n- S: The sub-schema within the `rootSchema` which matches the `$ref` if it exists\n\n#### Throws\n\n- Error indicating that no schema for that reference exists\n\n### getByPath<R = unknown>()\n\nGets the value at `path` of `obj`, returning `defaultValue` when the resolved value is `undefined`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment must be an **own** property, matching [hasByPath()](#hasbypath), so the two can be used as a guard/read pair.\nInherited members are never resolved: `getByPath({}, 'toString')` returns `defaultValue` rather than `Function.prototype.toString`. For the plain form data and schemas RJSF navigates, an inherited member is never data, and the own-property rule also makes prototype internals such as `__proto__` unreachable unless they are genuine own data keys.\n\nAn empty segment list resolves to nothing, so `defaultValue` is returned rather than `obj` itself; this matches [hasByPath()](#hasbypath), which is `false` for an empty path.\n\nThe value at a runtime-computed path cannot be known statically, so `R` is the caller's declaration of the expected type (like `Map.get()`); it defaults to `unknown`, which forces narrowing when no type is given.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments at which to get the value\n- [defaultValue]: R - The value returned when the resolved value is `undefined`\n\n#### Returns\n\n- R: The resolved value, otherwise `defaultValue`\n\n#### Example\n\n```typescript\ngetByPath({ a: { b: 1 } }, ['a', 'b']); // 1\ngetByPath({ 'a.b': 1 }, 'a.b'); // 1, a bare string is one literal key\ngetByPath({ a: { b: 1 } }, toPath('a.b')); // 1\ngetByPath({ a: {} }, ['a', 'missing'], 'fallback'); // 'fallback'\ngetByPath({}, 'toString', 'fallback'); // 'fallback', inherited members are not read\ngetByPath({ a: 1 }, [], 'fallback'); // 'fallback', an empty path resolves to nothing\n```\n\n### getChangedFields(a: unknown, b: unknown, deep?: boolean)\n\nCompares two objects and returns the names of the fields that have changed.\nThis function iterates over each field of object `a`, using `_.isEqual` to compare the field value with the corresponding field value in object `b`.\nIf the values are different, the field name will be included in the returned array.\n\nWhen `deep` is true, a field holding a nested object or a same-length array is descended into and the dotted path of the deepest field that changed is returned instead of the name of the top-level field holding it.\nA key that contains a `.` or a `[` is descended into like any other: the path it produces cannot be told apart from a path through nested keys, and neither can the entry an `ErrorSchema` keeps for it, since [toErrorSchema()](#toerrorschema) spells such a name out as a path in the same way.\n\n#### Parameters\n\n- a: unknown - The first object, representing the original data to compare.\n- b: unknown - The second object, representing the updated data to compare.\n- [deep=false]: boolean - Optional flag that, when true, returns the dotted path of the deepest field that changed.\n\n#### Returns\n\n- string[] : An array of field names that have changed.\n\n#### Example\n\n```typescript\nconst a = { name: 'John', age: 30 };\nconst b = { name: 'John', age: 31 };\nconst changedFields = getChangedFields(a, b);\nconsole.log(changedFields); // Output: ['age']\n```\n\n#### Example (deep)\n\n```typescript\nconst a = { items: [{ qux: '', corge: '' }] };\nconst b = { items: [{ qux: 'a', corge: '' }] };\nconsole.log(getChangedFields(a, b)); // Output: ['items']\nconsole.log(getChangedFields(a, b, true)); // Output: ['items.0.qux']\n```\n\n### getDecimalSeparator(languages?: string | string[])\n\nDetermines the locale-specific decimal separator.\nIt uses the provided locale or the first locale in navigator.languages (if available) and falls back to \"en\".\n\n#### Parameters\n\n- languages?: string | string[] - Optional array of locales or a single locale string.\n\n#### Returns\n\n- string : The decimal separator character (typically '.' or ',').\n\n#### Example\n\n```typescript\nconst separator = getDecimalSeparator('fr');\nconsole.log(separator); // Output: ','\n```\n\n### getDiscriminatorFieldFromSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the `discriminator.propertyName` when defined in the `schema` if it is a string. A warning is generated when it is not a string.\nReturns `undefined` when a valid discriminator is not present.\n\n#### Parameters\n\n- schema: S - The schema from which the discriminator is potentially obtained\n\n#### Returns\n\n- string | undefined: The `discriminator.propertyName` if it exists in the schema, otherwise `undefined`\n\n### getDateElementProps()\n\nGiven date & time information with optional yearRange & format, returns props for DateElement\n\n#### Parameters\n\n- date: DateObject - Object containing date with optional time information\n- time: boolean - Determines whether to include time or not\n- [yearRange=[1900, new Date().getFullYear() + 2]]: [number, number] - Controls the list of years to be displayed\n- [format='YMD']: DateElementFormat - Controls the order in which day, month and year input element will be displayed\n\n#### Returns\n\n- Array of props for DateElement\n\n### getInputProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nUsing the `schema`, `defaultType` and `options`, extract out the props for the `` element that make sense.\n\n#### Parameters\n\n- schema: S - The schema for the field provided by the widget\n- [defaultType]: string | undefined - The default type, if any, for the field provided by the widget\n- [options={}]: UIOptionsType<T, S, F> - The UI Options for the field provided by the widget\n- [autoDefaultStepAny=true]: boolean - Determines whether to auto-default step=any when the type is number and no step\n\n#### Returns\n\n- InputPropsType: The extracted `InputPropsType` object\n\n### getOptionMatchingSimpleDiscriminator()\n\nCompares the value of `discriminatorField` within `formData` against the value of `discriminatorField` within schema for each `option`. Returns index of first `option` whose discriminator matches formData. Returns `undefined` if there is no match.\n\nThis function does not work with discriminators of `\"type\": \"object\"` and `\"type\": \"array\"`\n\n#### Parameters\n\n- [formData]: T | undefined - The current formData, if any, used to figure out a match\n- options: S[] - The list of options to find a matching options from\n- [discriminatorField]: string | undefined - The optional name of the field within the options object whose value is used to determine which option is selected\n\n#### Returns\n\n- number | undefined: index of the matched option\n\n### getOptionValueFormat()\n\nResolves the effective `optionValueFormat` for enum-backed widgets.\nProvides a single source of truth for the default DOM encoding format (`'indexed'`) used by `SelectWidget`, `RadioWidget`, and `CheckboxesWidget`.\nWidgets should call this helper once and pass the result to `enumOptionValueEncoder`, `enumOptionValueDecoder`, and `enumOptionSelectedValue` rather than reading `options.optionValueFormat` directly.\n\n#### Parameters\n\n- [options]: \\{ optionValueFormat?: OptionValueFormat } | undefined - The widget options (typically from the `options` prop, already resolved from `ui:options` and `ui:globalOptions`)\n\n#### Returns\n\n- OptionValueFormat: The resolved `OptionValueFormat`, defaulting to `'indexed'` when not set\n\n### getPropertySchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nReturns the sub-schema declared for `property` in the `properties` of `schema`, falling back to an empty schema when the schema has no such property.\nCallers treat the properties of a schema as schemas of the same type `S`, which the `JSONSchema7` typing of `properties` cannot express, so this function owns that single assertion rather than repeating it at every lookup.\n\n#### Parameters\n\n- schema: S | undefined - The schema, if any, from which to read the property sub-schema\n- property: string - The name of the property whose sub-schema is desired\n\n#### Returns\n\n- S: The sub-schema for `property`, or an empty schema when it is not declared\n\n### getSchemaType()\n\nGets the type of a given `schema`.\nIf the type is not explicitly defined, then an attempt is made to infer it from other elements of the schema as follows:\n\n- schema.const: Returns the `guessType()` of that value\n- schema.enum: Returns `string`\n- schema.properties: Returns `object`\n- schema.additionalProperties: Returns `object`\n- schema.patternProperties: Returns `object`\n- type is an array with a length of 2 and one type is 'null': Returns the other type\n\n#### Parameters\n\n- schema: S - The schema for which to get the type\n\n#### Returns\n\n- string | string[] | undefined: The type of the schema\n\n### getSubmitButtonOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nExtracts any `ui:submitButtonOptions` from the `uiSchema` and merges them onto the `DEFAULT_OPTIONS`\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - the UI Schema from which to extract submit button props\n\n#### Returns\n\n- UISchemaSubmitButtonOptions: The merging of the `DEFAULT_OPTIONS` with any custom ones\n\n### getTemplate<Name extends keyof TemplatesType<T, S, F>, T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nReturns the template with the given `name` from either the `uiSchema` if it is defined or from the `registry`\notherwise. NOTE, since `ButtonTemplates` are not overridden in `uiSchema` only those in the `registry` are returned.\n\n#### Parameters\n\n- name: Name - The name of the template to fetch, restricted to the keys of `TemplatesType`\n- registry: Registry<T, S, F> - The `Registry` from which to read the template\n- [uiOptions=\\{}]: UIOptionsType<T, S, F> - The `UIOptionsType` from which to read an alternate template\n\n#### Returns\n\n- TemplatesType<T, S, F>[Name] - The template from either the `uiSchema` or `registry` for the `name`\n\n### getTestIds()\n\nReturns an object of test IDs that can only be used in test mode.\nIf the function is called in a test environment (`NODE_ENV === 'test'`, this is set by jest) then a Proxy object will be returned.\nIf a key within the returned object is accessed, if the value already exists the object will return that value, otherwise it will create that key\nwith a generated `uuid` value and return the generated ID.\nIf it is called outside of a test environment, the function will return an empty object, therefore returning `undefined` for any property within the object and excluding the prop from the rendered output of the component in which it is used.\nTo use this helper, you will want to generate a separate object for each component to avoid potential overlapping of ID names.\nYou will also want to export the object for use in tests, because the keys will be generated in the component file, and used in the test file.\nWithin the component file, add: `export const TEST_IDS = getTestIds();`\nThen pass `TEST_IDS.examplePropertyName` as the value of the test ID attribute of the intended component.\nThis will allow you to use `TEST_IDS.examplePropertyName` within your tests, while keeping the test IDs out of your rendered output.\n\n#### Returns\n\n- TestIdShape: An object that auto-generates test ids upon request the first time and then returns the same value on subsequent calls\n\n### getUiOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGet all passed options from ui:options, and ui:<optionName>, returning them in an object with the `ui:` stripped off.\nAny `globalOptions` will always be returned, unless they are overridden by options in the `uiSchema`.\n\n#### Parameters\n\n- [uiSchema={}]: UiSchema<T, S, F> - The UI Schema from which to get any `ui:xxx` options\n- [globalOptions={}]: GlobalUISchemaOptions - The optional Global UI Schema from which to get any fallback `xxx` options\n\n#### Returns\n\n- UIOptionsType<T, S, F> An object containing all of the `ui:xxx` options with the `ui:` stripped off along with all `globalOptions`\n\n### getWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nGiven a schema representing a field to render and either the name or actual `Widget` implementation, returns the\nReact component that is used to render the widget. If the `widget` is already a React component, then it is wrapped\nwith a `MergedWidget`. Otherwise an attempt is made to look up the widget inside of the `registeredWidgets` map based\non the schema type and `widget` name. If no widget component can be found an `Error` is thrown.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- Widget<T, S, F>: The `Widget` component to use\n\n#### Throws\n\n- An error if there is no `Widget` component that can be returned\n\n### hasByPath()\n\nDetermines whether `obj` has an **own** property at `path`.\nA bare string `path` is a single literal key, not a dotted path; use [toPath()](#topath) to split a dotted path string into segments first.\nEvery segment is checked with `Object.hasOwn()`, so inherited properties report `false` — `hasByPath({}, 'toString')` is `false`. [getByPath()](#getbypath) applies the same own-property rule, so the two can be used as a guard/read pair.\n\n#### Parameters\n\n- obj: unknown - The object to query\n- path: ObjectPath - The single key or list of path segments to check for\n\n#### Returns\n\n- boolean: True if the own property exists at `path`, otherwise false\n\n#### Example\n\n```typescript\nhasByPath({ a: { b: undefined } }, ['a', 'b']); // true, the key exists\nhasByPath({ a: { b: 1 } }, 'a.b'); // false, there is no key named 'a.b'\nhasByPath({}, 'toString'); // false, inherited properties are not own properties\n```\n\n### hashObject()\n\nStringifies an `object` and returns the hash of the resulting string.\nSorts object fields in consistent order before stringify to prevent different hash ids for the same object.\n\n#### Parameters\n\n- object: object - The object for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified object\n\n### hashString()\n\nHashes a string using the algorithm based on Java's hashing function.\n\n#### Parameters\n\n- string: string - The string for which to get the hash\n\n#### Returns\n\n- string: The resulting hash of the string in hex format\n\n### guessType()\n\nGiven a specific `value` attempts to guess the type of a schema element. In the case where we have to implicitly\ncreate a schema, it is useful to know what type to use based on the data we are defining.\n\n#### Parameters\n\n- value: any - The value from which to guess the type\n\n#### Returns\n\n- string: The best guess for the object type\n\n### hashForSchema<S extends StrictRJSFSchema = RJSFSchema>()\n\nStringifies the schema and returns the hash of the resulting string.\n\n#### Parameters\n\n- schema: S - The schema for which the hash is desired\n\n#### Returns\n\n- string: The string obtained from the hash of the stringified schema\n\n### hasWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nDetects whether the `widget` exists for the `schema` with the associated `registryWidgets` and returns true if it does, or false if it doesn't.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- widget: Widget<T, S, F> | string - Either the name of the widget OR a `Widget` implementation to use\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- boolean: True if the widget exists, false otherwise\n\n### helpId()\n\nReturn a consistent `id` for the field help element.\n\n#### Parameters\n\n- id: FieldPathId | string - Either simple string id or an FieldPathId from which to extract it\n\n#### Returns\n\n- string: The consistent id for the field help element from the given `id`\n\n### isConstant<S extends StrictRJSFSchema = RJSFSchema>()\n\nThis function checks if the given `schema` matches a single constant value.\nThis happens when either the schema has an `enum` array with a single value or there is a `const` defined.\n\n#### Parameters\n\n- schema: S - The schema for a field\n\n#### Returns\n\n- boolean: True if the `schema` has a single constant value, false otherwise\n\n### isCustomWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nChecks to see if the `uiSchema` contains the `widget` field and that the widget is not `hidden`\n\n#### Parameters\n\n- uiSchema: UiSchema<T, S, F> - The UI Schema from which to detect if it is customized\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isFixedItems<S extends StrictRJSFSchema = RJSFSchema>()\n\nDetects whether the given `schema` contains fixed items.\nThis is the case when `schema.items` is a non-empty array that only contains objects.\n\n#### Parameters\n\n- schema: S - The schema in which to check for fixed items\n\n#### Returns\n\n- boolean: True if there are fixed items in the schema, false otherwise\n\n### isFormDataAvailable<T = any>()\n\nDetermines whether the given `formData` represents valid form data, such as a primitive type, an array, or a non-empty object.\n\n#### Parameters\n\n- formData: T - The data to check\n\n#### Returns\n\n- boolean: True if `formData` is not undefined, null, a primitive type or an array or an empty object\n\n### isObject()\n\nDetermines whether a `thing` is an object for the purposes of RSJF.\nIn this case, `thing` is an object if it has the type `object` but is NOT null, an array or a File.\n\n#### Parameters\n\n- thing: any - The thing to check to see whether it is an object\n\n#### Returns\n\n- boolean: True if it is a non-null, non-array, non-File object\n\n### isPlainObject()\n\nDetermines whether `thing` is a plain object, i.e. one created by the `Object` constructor or with a `null` prototype.\nUnlike [isObject()](#isobject), class instances such as `Error` are not plain objects, which matters when recursively walking a structure whose nested values are expected to be plain data.\n\n#### Parameters\n\n- thing: unknown - The thing to check to see whether it is a plain object\n\n#### Returns\n\n- boolean: True if it is a plain object, otherwise false. When true, `thing` is narrowed to `Record`\n\n### isRootSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nHelper to check whether a JSON schema object is the root schema. The schema is a root schema with root `properties`\nkey or a root `$ref` key. If the `schemaToCompare` has a root `oneOf` property, the function will\nreturn false. Else if `schemaToCompare` and `rootSchema` are the same object or equal, the function will return\n`true`. Else if the `rootSchema` has a $ref, it will be resolved using `schemaUtils.resolveSchema` utility. If the\nresolved schema matches the `schemaToCompare` the function will return `true`. Otherwise, it will return false.\n\n#### Parameters\n\n- registry: Registry<T, S, F> - The `Registry` used to get the `rootSchema` and `schemaUtils`\n- schemaToCompare: S - The JSON schema object to check. If `schemaToCompare` is an root schema, the function will return true.\n\n#### Returns\n\n- boolean: True if the `uiSchema` describes a custom widget, false otherwise\n\n### isValueEmpty()\n\nReturns true when a form value is considered empty: `null`, `undefined`, or `''` (empty string), an empty array (`[]`), or a plain object whose every own value is itself empty (checked recursively). Scalar values such as `0` and `false` are not considered empty.\n\n#### Parameters\n\n- value: unknown - The value to check\n\n#### Returns\n\n- boolean: True if the value is considered empty, false otherwise\n\n### labelValue()\n\nHelper function that will return the value to use for a widget `label` based on `hideLabel`.\nThe `fallback` is used as the return value from the function when `hideLabel` is true.\nDue to the implementation of theme components, it may be necessary to return something other than `undefined` to cause the theme component to not render a label.\nSome themes require may `false` and others may require an empty string.\n\n#### Parameters\n\n- [label]: string | ReactElement | undefined - The label string or component to render when not hidden\n- [hideLabel]: boolean| undefined - Flag, if true, will cause the label to be hidden\n- [fallback]: undefined | false | '' - One of 3 values, `undefined` (the default), `false` or an empty string\n\n- #### Returns\n\n- string | boolean | undefined: `fallback` if `hideLabel` is true, otherwise `label`\n\n### localToUTC()\n\nConverts a local Date string into a UTC date string\n\n#### Parameters\n\n- dateString: string - The string representation of a date as accepted by the `Date()` constructor\n\n#### Returns\n\n- string | undefined: A UTC date string if `dateString` is truthy, otherwise undefined\n\n### lookupFromFormContext<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, R = unknown>()\n\nGiven a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`.\nThis might be contained within the lookup map in the formContext.\nIf no such value exists, return the `fallback` value.\n\n#### Parameters\n\n- regOrFc: Registry<T, S, F> | Registry<T, S, F>['formContext'] - The @rjsf registry or form context in which the lookup will occur\n- toLookup: string - The name of the field in the lookup map in the form context to get the value for\n- [fallback]: R - The fallback value to use if the form context does not contain a value for `toLookup`\n\n#### Returns\n\n- R: The value associated with `toLookup` in the form context or `fallback`\n\n### mergeDefaultsWithFormData<T = any>()\n\nMerges the `defaults` object of type `T` into the `formData` of type `T`\n\nWhen merging defaults and form data, we want to merge in this specific way:\n\n- objects are deeply merged\n- arrays are merged in such a way that:\n - when the array is set in form data, only array entries set in form data are deeply merged; additional entries from the defaults are ignored unless `mergeExtraArrayDefaults` is true, in which case the extras are appended onto the end of the form data\n - when the array is not set in form data, the default is copied over\n- scalars are overwritten/set by form data\n\n#### Parameters\n\n- [defaults]: T | undefined - The defaults to merge\n- [formData]: T | undefined - The form data into which the defaults will be merged\n- [mergeExtraArrayDefaults=false]: boolean - If true, any additional default array entries are appended onto the formData\n- [defaultSupercedesUndefined=false]: boolean - If true, an explicit undefined value will be overwritten by the default value\n\n#### Returns\n\n- T | undefined: The resulting merged form data with defaults\n\n### mergeObjects()\n\nRecursively merge deeply nested objects.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n- [concatArrays=false]: boolean | \"preventDuplicates\" - Optional flag that, when true, will cause arrays to be concatenated. Use \"preventDuplicates\" to merge arrays in a manner that prevents any duplicate entries from being merged.\n\n#### Returns\n\n@returns - A new object that is the merge of the two given objects\n\n### mergeSchemas()\n\nRecursively merge deeply nested schemas.\nThe difference between mergeSchemas and mergeObjects is that mergeSchemas only concats arrays for values under the 'required' keyword, and when it does, it doesn't include duplicate values. NOTE: Uses shallow comparison for the duplicate checking.\n\n#### Parameters\n\n- obj1: GenericObjectType - The first object to merge\n- obj2: GenericObjectType - The second object to merge\n\n#### Returns\n\n- GenericObjectType: The merged schema object\n\n### optionalControlsId()\n\nReturn a consistent `id` for the optional data controls `element`\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- element: 'Add' | 'Msg' | 'Remove' - The element type for which to generate the id\n\n#### Returns\n\n- string: The consistent id for the optional data controls element from the given `id` and `element` type\n\n### optionId()\n\nReturn a consistent `id` for the `optionIndex`s of a `Radio` or `Checkboxes` widget\n\n#### Parameters\n\n- id: string - The id of the parent component for the option\n- optionIndex: number - The index of the option for which the id is desired\n\n#### Returns\n\n- string: An id for the option index based on the parent `id`\n\n### noop()\n\nA function that does nothing and returns `undefined`, useful as a placeholder for an optional callback or as the implementation of a mocked function.\n\n#### Returns\n\n- void\n\n### optionsList<T = any, S extends StrictRJSFSchema = RJSFSchema,F extends FormContextType = any>()\n\nGets the list of options from the `schema`. If the schema has an enum list, then those enum values are returned.\nThe labels for the options will be extracted from `ui:enumNames` in the `uiSchema` if provided, otherwise the label will be the same as the `value`. If `ui:enumOrder` is provided, the options will be reordered accordingly.\n\nIf the schema has a `oneOf` or `anyOf`, then the value is the list of either:\n\n-\n- The `const` values from the schema if present\n- If the schema has a discriminator and the label using either the `schema.title` or the value. If a `uiSchema` is\n provided, and it has the `ui:enumNames` matched with `enum` or it has an associated `oneOf` or `anyOf` with a list of\n objects containing `ui:title` then the UI schema values will replace the values from the schema.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the options list\n- [uiSchema]: UiSchema<T, S, F> - The optional uiSchema from which to get alternate labels for the options\n\n#### Returns\n\n- \\{ schema?: S, label: string, value: any }: The list of options from the schema\n\n### orderProperties()\n\nGiven a list of `properties` and an `order` list, returns a list that contains the `properties` ordered correctly.\nIf `order` is not an array, then the untouched `properties` list is returned.\nOtherwise `properties` is ordered per the `order` list.\nIf `order` contains a '_' then any `properties` that are not mentioned explicity in `order` will be places in the location of the `_`.\n\n#### Parameters\n\n- properties: string[] - The list of property keys to be ordered\n- order: string[] - An array of property keys to be ordered first, with an optional '\\*' property\n\n#### Returns\n\n- string[]: A list with the `properties` ordered\n\n#### Throws\n\n- Error when the properties cannot be ordered correctly\n\n### pad()\n\nReturns a string representation of the `num` that is padded with leading \"0\"s if necessary\n\n#### Parameters\n\n- num: number - The number to pad\n- width: number - The width of the string at which no lead padding is necessary\n\n#### Returns\n\n- string: The number converted to a string with leading zero padding if the number of digits is less than `width`\n\n### parseDateString()\n\nParses the `dateString` into a `DateObject`, including the time information when `includeTime` is true\n\n#### Parameters\n\n- dateString: string - The date string to parse into a DateObject\n- [includeTime=true]: boolean - Optional flag, if false, will not include the time data into the object\n\n#### Returns\n\n- DateObject: The date string converted to a `DateObject`\n\n#### Throws\n\n- Error when the date cannot be parsed from the string\n\n### rangeSpec<S extends StrictRJSFSchema = RJSFSchema>()\n\nExtracts the range spec information `{ step?: number, min?: number, max?: number }` that can be spread onto an HTML input from the range analog in the schema `{ multipleOf?: number, minimum?: number, maximum?: number }`.\n\n#### Parameters\n\n- schema: S - The schema from which to extract the range spec\n\n#### Returns\n\n- RangeSpecType: A range specification from the schema\n\n### replaceStringParameters()\n\nPotentially substitutes all replaceable parameters with the associated value(s) from the `params` if available.\nWhen a `params` array is provided, each value in the array is used to replace any of the replaceable parameters in the `inputString` using the `%1`, `%2`, etc. replacement specifiers.\n\n#### Parameters\n\n- inputString: string - The string which will be potentially updated with replacement parameters\n- [params]: string[] - The optional list of replaceable parameter values to substitute into the english string\n\n#### Returns\n\n- string: The updated string with any replacement specifiers replaced\n\n### resolveDefaultWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nComputes the widget name a field falls back to when no `ui:widget` is specified, along with the `enumOptions` (if any) that back a `select`-like fallback.\nThe default is `select` when `schema` has enumerable options, the schema's `format` when a widget is registered for it, or `text` otherwise.\n\n#### Parameters\n\n- schema: S - The schema for the field\n- uiSchema: UiSchema<T, S, F> | undefined - The uiSchema for the field\n- schemaUtils: SchemaUtilsType<T, S, F> - The `SchemaUtilsType` used to detect whether `schema` has enumerable options\n- [registeredWidgets={}]: RegistryWidgetsType<T, S, F> - A registry of widget name to `Widget` implementation\n\n#### Returns\n\n- \\{ defaultWidget: string, enumOptions: EnumOptionsType<S>[] | undefined }: The default widget name and the `enumOptions`, if any, computed along the way\n\n### resolveUiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nResolves the uiSchema for a given schema, considering `ui:definitions` stored in the registry.\nCalled at runtime for each field. When the schema contains a `$ref`, looks up the corresponding uiSchema definition from `registry.uiSchemaDefinitions` and merges it with local overrides.\nFor schemas with `oneOf`/`anyOf` branches, also populates `uiSchema[keyword][i]` for branches whose `$ref` matches a definition, so `MultiSchemaField` can read dropdown option titles.\n\nResolution order (later sources override earlier):\n\n1. `ui:definitions[$ref]` - base definition from registry\n2. `localUiSchema` - local overrides at current path\n\n#### Parameters\n\n- schema: S - The JSON schema (may contain `$ref` or `RJSF_REF_KEY`)\n- localUiSchema: UiSchema<T, S, F> | undefined - The uiSchema at the current path (local overrides)\n- registry: Registry<T, S, F> - The registry containing `uiSchemaDefinitions`\n\n#### Returns\n\n- UiSchema<T, S, F>: The resolved uiSchema with definitions merged in\n\n### schemaHasNestedConditional<S extends StrictRJSFSchema = RJSFSchema>()\n\nRecursively checks whether the given raw `schema` contains a `dependencies` or `if` keyword anywhere below its top level, e.g. inside a nested object's `properties`, a `$ref`, an array's tuple `items`, or a `patternProperties` entry.\n`retrieveSchema()` only resolves the `dependencies`/`if` declared directly on the schema it is given, so a root-level retrieved schema never reflects a conditional branch switch that happens deeper in the tree.\n`Form` uses this to detect when a comparison of root-level retrieved schemas can't be trusted to decide whether sanitization is needed.\n\n#### Parameters\n\n- schema: S | boolean | undefined - The raw schema node to search\n- rootSchema: S - The root schema, used to resolve any `$ref`s encountered while searching\n- atRoot: boolean = true - Whether `schema` is the root of the search, whose own `dependencies`/`if` don't count\n- seenRefs: string[] = [] - The `$ref`s already resolved along this branch of the search, to guard against cycles\n\n#### Returns\n\n- boolean: True if a `dependencies` or `if` keyword exists below the root of the schema\n\n### schemaRequiresTrueValue<S extends StrictRJSFSchema = RJSFSchema>()\n\nCheck to see if a `schema` specifies that a value must be true. This h\n\n\n\n\n# @rjsf/validator-ajv8 APIs\n\nIn RJSF version 6, the original, embedded AJV 6 validator implementation from earlier versions was removed in favor of the `@rjsf/validator-ajv8` package.\n`@rjsf/validator-ajv8` uses the AJV 8 package, including adding support for using precompiled validators.\nBelow are the exported API functions that are provided by this package.\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Types\n\nThere are a few Typescript types that are exported by `@rjsf/validator-ajv8` in support of the APIs.\n\nThese types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ajv8/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional meta schemas the validator can access\n - `customFormats`: Additional custom format validators\n - `ajvOptionsOverrides`: Config overrides passed to the AJV constructor\n - `ajvFormatOptions`: Options for `ajv-formats`; pass `false` to disable format support entirely\n - `AjvClass`: The AJV class to construct (e.g. `Ajv2019`, `Ajv2020`)\n - `extenderFn`: A function called to extend the AJV instance (e.g. `ajvErrors()`)\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n\n#### Returns\n\n- AJV8Validator<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nThe function used to compile a schema into an output file in the form that allows it to be used as a precompiled validator.\nThe main reasons for using a precompiled validator is reducing code size, improving validation speed and, most importantly, avoiding dynamic code compilation when prohibited by a browser's Content Security Policy.\nFor more information about AJV code compilation see: https://ajv.js.org/standalone.html\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validators functions\n- output: string - The name of the file into which the precompiled validator functions will be generated\n- [options={}]: CustomValidatorOptionsType - The set of `CustomValidatorOptionsType` information used to alter the AJV validator used for compiling the schema. They are the same options that are passed to the `customizeValidator()` function in order to modify the behavior of the regular AJV-based validator.\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying AJV validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of Ajv `ErrorObject`s after running the form validation using AJV\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n\n\n# @rjsf/validator-ata APIs\n\n`@rjsf/validator-ata` is an alternative to `@rjsf/validator-ajv8`, backed by [`ata-validator`](https://www.npmjs.com/package/ata-validator) instead of AJV.\nThe public surface mirrors the AJV package, so swapping the import is enough for the form to keep working: `customizeValidator()`, `ValidatorType`, custom formats, `transformErrors`, `customValidate`, and `suppressDuplicateFiltering` all behave the same.\n\nSee the [Validation documentation](../usage/validation.md) for examples of using these APIs.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options (`AjvClass`, `ajvFormatOptions`, `ajvOptionsOverrides`) are not accepted. The closest equivalent is `ataOptionsOverrides`, which is spread on top of the default `ata-validator` options.\n- The `ata-validator` format set is always installed, so there is no opt-in flag for formats.\n- `ata-validator`'s error params are frozen, so the pre-quote pass that `validator-ajv8` runs for `ajv-i18n` is unnecessary. Localizers that mutate `message` in place still work as-is.\n- Precompiled validators (`compileSchemaValidators` / `createPrecompiledValidator`) are supported. `ata-validator`'s `bundleStandalone` output is adapted into the validator function map the precompiled consumer expects. Error output matches the non-precompiled validator, including per-field errors for schema-valued `additionalProperties` (with `ata-validator` `>= 0.17.4`); an invalid `anyOf` reports a single error on the field, the same as the runtime path. One constraint carries over from the standalone (AOT) path: custom formats must be a RegExp or pre-anchored string pattern, since a function checker cannot be serialized into the bundle and is rejected at compile time.\n\n## Types\n\nThere are a few TypeScript types that are exported by `@rjsf/validator-ata` in support of the APIs. These types can be found on GitHub [here](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-ata/src/types.ts).\n\n## APIs\n\n### customizeValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a customized implementation of the `ValidatorType` with the given customization `options` if provided.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n#### Parameters\n\n- [options={}]: CustomValidatorOptionsType - The optional map of `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance. Supported options:\n - `additionalMetaSchemas`: Additional schemas registered for cross-schema `$ref` resolution\n - `customFormats`: Custom format checkers; values can be functions, RegExps, or pre-anchored regex source strings\n - `ataOptionsOverrides`: Overrides spread on top of the default `ata-validator` options (e.g. `coerceTypes`, `removeAdditional`, `verbose`, `abortEarly`)\n - `extenderFn`: A function called against the constructed `Validator` instance for additional setup; returning a different instance is supported\n - `suppressDuplicateFiltering`: Controls filtering of duplicate `anyOf`/`oneOf` errors using the `SuppressDuplicateFilteringType` type. `'none'` (default) filters duplicates for both; `'anyOf'` suppresses filtering for `anyOf` (oneOf duplicates still filtered); `'oneOf'` suppresses filtering for `oneOf` (anyOf duplicates still filtered); `'all'` disables all duplicate filtering.\n- [localizer]: Localizer | undefined - If provided, is used to localize a list of `ata-validator` `ValidationError`s after running the form validation\n\n#### Returns\n\n- ValidatorType<T, S, F>: The custom validator implementation resulting from the set of parameters provided\n\n### compileSchemaValidators<S extends StrictRJSFSchema = RJSFSchema>()\n\nCompiles a schema into an output file that can be loaded later as a precompiled validator.\nThe main reasons for using a precompiled validator are reducing code size, improving startup time by skipping schema compilation, and avoiding dynamic code generation when a browser's Content Security Policy forbids it.\nUnder the hood this calls `ata-validator`'s `bundleStandalone` and wraps the result in the map the precompiled consumer expects.\n\n> NOTE: Custom formats passed through `options.customFormats` must be a RegExp or a pre-anchored string pattern. A function checker cannot be serialized into the standalone bundle and is rejected at compile time.\n\n#### Parameters\n\n- schema: S - The schema to be compiled into a set of precompiled validator functions\n- output: string - The name of the file into which the precompiled validator functions are generated\n- [options={}]: CustomValidatorOptionsType - The `CustomValidatorOptionsType` options accepted by `customizeValidator()`, with limits: `extenderFn`, extra schemas without an `$id` and the `ataOptionsOverrides` keys `coerceTypes`, `removeAdditional` and `keywords` cannot be carried into the generated file and are ignored with a warning, the generated file never fills in `default` values, and `suppressDuplicateFiltering` belongs to `createPrecompiledValidator()`. See the precompiled section of `usage/validation.md`\n\n### createPrecompiledValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()\n\nCreates and returns a `ValidatorType` interface that is implemented with a precompiled validator.\nIf a `localizer` is provided, it is used to translate the messages generated by the underlying `ata-validator` validation.\n\n> NOTE: The `validateFns` parameter is an object obtained by importing from a precompiled validation file created via the `compileSchemaValidators()` function.\n\n#### Parameters\n\n- validateFns: ValidatorFunctions - The map of the validation functions that are created by the `compileSchemaValidators()` function\n- rootSchema: S - The root schema that was used with the `compileSchemaValidators()` function\n- [localizer]: Localizer | undefined - If provided, is used to localize the list of `ata-validator` `ValidationError`s after running the form validation\n- [suppressDuplicateFiltering]: `SuppressDuplicateFilteringType | undefined` - Controls filtering of duplicate `anyOf`/`oneOf` errors. See `customizeValidator()` for the full description of each value.\n\n#### Returns\n\n- ValidatorType<T, S, F>: The precompiled validator implementation resulting from the set of parameters provided\n\n\n# @rjsf/validator-cfworker APIs\n\n`@rjsf/validator-cfworker` is an additional, eval-free validator option for CSP-constrained applications. It is backed by [`@cfworker/json-schema`](https://github.com/cfworker/cfworker/tree/main/packages/json-schema), interprets schemas without `eval` or `new Function`, and defaults to JSON Schema draft 2020-12.\n\nIt is not an AJV replacement. See the package [README](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/validator-cfworker) for the unsupported-keyword matrix and current upstream-state notes.\n\n## Differences from `@rjsf/validator-ajv8`\n\n- AJV-only options and extensions such as `AjvClass`, `$data`, `discriminator`, and `ajv-errors`'s `errorMessage` are not supported.\n- `$dynamicRef` and `$dynamicAnchor` are not currently supported by the underlying engine.\n- Error messages differ from AJV, and there is no `ajv-i18n` localizer equivalent. Use `transformErrors` to customize messages.\n- Precompiled-validator mode is not part of this initial package.\n- The wrapper normalizes `undefined` form-data values before validation and caches validators by schema id to make repeated RJSF `isValid()` calls safe.\n\n## Types\n\nThe package exports `CustomValidatorOptionsType`, `CFWorkerValidationError`, `CFWorkerFormatChecker`, and `SuppressDuplicateFilteringType` from [`src/types.ts`](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/validator-cfworker/src/types.ts).\n\n## APIs\n\n### `customizeValidator()`\n\nCreates a `ValidatorType` backed by `@cfworker/json-schema`.\n\n#### Parameters\n\n- `options.additionalMetaSchemas`: additional schemas registered for cross-schema `$ref` resolution\n- `options.customFormats`: format checkers expressed as functions, regular expressions, or regular-expression source strings\n- `options.draft`: `'4'`, `'7'`, `'2019-09'`, or `'2020-12'`; defaults to `'2020-12'`\n- `options.extenderFn`: hook called with every newly constructed engine validator\n- `options.shortCircuit`: stop at the first error; defaults to `false`\n- `options.suppressDuplicateFiltering`: `'none'`, `'anyOf'`, `'oneOf'`, or `'all'`\n\n#### Returns\n\n- `ValidatorType`: the customized validator implementation\n\n```ts\nimport { customizeValidator } from '@rjsf/validator-cfworker';\n\nconst validator = customizeValidator({\n draft: '2020-12',\n customFormats: { slug: /^[a-z0-9-]+$/ },\n});\n```\n\n\n# Contributing\n\n## Development server\n\nWe are using `Vite` to power our `playground`, which caches all the built `@rjsf/*` distributions.\nIn order to test the `playground` locally after a new clone or fresh pull from `main`, run the following from the root directory of the monorepo:\n\n```bash\npnpm install\npnpm run build\ncd packages/playground\npnpm start\n```\n\nThis will start the live development server showcasing components at [localhost:8080](http://localhost:8080).\n\nWhenever you make changes to source code, stop the running playground and return to the root directory and rerun `pnpm run build`.\nThanks to `nx` caching, this should only rebuild what is necessary.\nAfter the build is complete, return to the root of the `playground` and restart the server via `pnpm start`.\n\n### First time step\n\nIf this is the first time you have cloned the repo, run the `pnpm run prepare` script that will set up `husky` to provide a git precommit hook that will format and lint any code you have added to a PR.\n\n### Optional development process\n\nWith the large number of packages, sometimes running `pnpm run build` or `pnpm start` from the root directory will overwhelm an underpowered computer.\nIf that is the situation for you, you can instead use `pnpm run build-serial` to build the packages one at a time instead of all at once.\nAlso, if you are only working on one package, you can `pnpm run build` and `pnpm run test` from within the subdirectory.\nFinally, you can simply `pnpm start` inside of the `playground` directory to test changes if you have already built all of your packages, without needing to watch all of the packages via the root directory `pnpm start`.\n\n### Troubleshooting build failures\n\nSometimes your local builds fail and you can't figure out why. This is most likely to happen after rebase to `main` due\nto `package.json` changes upstream. There are two commands you can use to (hopefully) get your environment back to a\nworking state. Try running the following two commands:\n\n```bash\npnpm run refresh-node-modules\npnpm run clean-build\n```\n\nThe first command will delete all of the `node_modules` directories in the environment and then rerun `pnpm install`.\nThe second command cleans up the typescript build cache files before retrying the build.\n\nWorst case scenario when neither of those commands work, try running `pnpm run nuke-build-env` and then rerun the two commands.\n\n## Cloud builds\n\nWhen building in environments with limited memory, such as Netlify, it's recommended to use `pnpm run build-serial` that builds the packages serially.\n\n## Coding style\n\nAll the JavaScript/Typescript code in this project conforms to the [prettier](https://github.com/prettier/prettier) coding style.\nCode is automatically prettified upon commit using precommit hooks, assuming you followed the `First time step` above.\n\nYou can also run `pnpm cs-format` within any package directory you are changing.\n\n## Documentation\n\nWe use [Docusaurus](https://docusaurus.io/) to build our documentation. To run documentation locally, run:\n\n```bash\ncd packages/docs\npnpm start\n```\n\nDocumentation will be served on [localhost:3000](http://localhost:3000).\n\n## Tests\n\nYou can run all tests from the root directory OR from `packages` subdirectory using the following command:\n\n```bash\npnpm run test\n```\n\n### Snapshot testing\n\nAll the themes, including `core` use snapshot testing (NOTE: `core` also has extensive non-snapshot tests).\nThe source-code of these snapshot tests reside in the `core` package in the `testSnap` directory and are shared with all the themes.\nIn order to support the various themes, the code for the tests are actually functions that take two parameters:\n\n- `Form`: ComponentType<FormProps> - The component from the theme implementation\n- `[customOptions]`: \\{ [key: string]: TestRendererOptions } - an optional map of `react-test-renderer` `TestRendererOptions` implementations that some themes need to be able properly run\n\nThere are functions in the `testSnap` directory: `arrayTests`, `formTests` and `objectTests`, each with its own definition of `customOptions`\n\nEach theme will basically run these functions by creating a `Xxx.test.tsx` file (where `Xxx` is `Array`, `Form` or `Object`) that looks like the following:\n\n```tsx\nimport { arrayTests } from '@rjsf/snapshot-tests'; // OR\n// import { formTests } from '@rjsf/snapshot-tests';\n// import { objectTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\narrayTests(Form); // OR\n// formTests(Form);\n// objectTests(Form);\n```\n\nAnytime you add a new feature, be sure to update the appropriate `xxxTests()` function in the `testSnap` directory and do `pnpm run test` from the root directory to update all the snapshots.\nIf you add a theme-only feature, it is ok to update the appropriate `Xxx.test.tsx` file to add (or update) the theme-specific `describe()` block.\nFor example:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport { arrayTests } from '@rjsf/snapshot-tests';\n\nimport Form from '../src';\n\nformTests(Form);\n\ndescribe('Theme specific tests', () => {\n it('test a theme-specific option', () => {\n const schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n };\n const uiSchema: UiSchema = {\n // Enable the theme specific feature\n };\n const tree = renderer.create().toJSON();\n expect(tree).toMatchSnapshot();\n });\n});\n```\n\nSee the `antd` `Form.test.tsx` for a specific example of this.\n\n### Code coverage\n\nCode coverage reports are currently available only for the `@rjsf/core` theme package.\nThey are generated using [nyc](https://github.com/istanbuljs/nyc) each time the `pnpm test-coverage` script is run.\nThe full report can be seen by opening `./coverage/lcov-report/index.html`.\n\n#### Utils and validator-ajv8 code coverage\n\n100% code coverage is required by the `@rjsf/utils` and `@rjsf/validator-ajv8` tests.\nIf you make changes to those libraries, you will have to maintain that coverage, otherwise the tests will fail.\n\n> NOTE: All three of these directories share the same tests for verifying `validator` based APIs. See the documentation in the `getTestValidator()` functions for more information.\n\n## Releasing\n\nTo release, go to the main branch (NOT a fork) and then create a new branch with the version number (with an `rc` prefix instead of `v`).\nFor instance if you are about to create the new `6.100.10` branch, then you would run the following commands:\n\n```bash\ngit checkout -b rc6.100.10\npnpm exec nx release version --git-tag\ngit commit -m \"Releasing 6.100.10\"\ngit push\npnpm run update-version-tags\n```\n\nMake sure you use [semver](https://semver.org/) for version numbering when selecting the version.\nThe `pnpm exec nx release version --git-tag` command will update the `package*.json` files and create a new version tag.\nCommitting and pushing the branch will allow you to create the PR on GitHub.\nThe `pnpm run update-version-tags` will push the tags up to GitHub.\n\nThen, make a PR to main. Merge the PR into main -- make sure you use \"merge commit\", not squash and merge, so that\nthe original commit where the tag was based on is still present in the main branch.\n\nThen, create a release in the GitHub \"Releases\" tab, select the new tag that you have added,\nand add a description of the changes in the new release. You can copy\nthe latest changelog entry in `CHANGELOG.md` to make the release notes, and update as necessary.\n\nThis will trigger a GitHub Actions pipeline that will build and publish all packages to npm.\n\nThe package is published through an automation token belonging to the\n[rjsf-bot](https://www.npmjs.com/~rjsf-bot) user on npm. This token\nis stored as the `NPM_TOKEN` secret on GitHub Actions.\n\n### Releasing docs\n\nDocs are automatically published to GitHub Pages when the `main` branch is updated.\n\nWe are currently in the process of automatically configuring versionable documentation on our new docs site.\n\n### Releasing the playground\n\nThe playground automatically gets deployed from GitHub Pages.\n\nIf you need to manually publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/), though, run:\n\n```bash\ncd packages/playground\npnpm run publish-to-gh-pages\n```\n\n### Releasing a new package\n\nPublishing a new `@rjsf/*` package requires additional setup. The package must first be published locally, then in the NPM web app, you must set up \"Trusted Publishing\" so future releases can be published via GitHub Actions. The steps to accomplish this are:\n\n1. Create the new release as described above. Existing packages will be published, but the jobs to publish new package(s) will fail.\n2. Locally, check out the release tag (e.g. `git checkout v6.8.0`). You may need to `git fetch --tags`. Make sure your `git status` is clean.\n3. `cd packages/new-package`\n4. `pnpm login` (login to an account with RJSF publishing privileges)\n5. `pnpm publish --no-git-checks`.\n\nThe new package will be released. Then, set up Trusted Publishing:\n\n1. Navigate to the new package in NPM (e.g. `https://www.npmjs.com/package/@rjsf/new-package`)\n2. Go to Settings -> Trusted Publisher -> GitHub Actions\n3. Set up the fields to match an existing package (e.g. look at `@rjsf/core`).\n 1. Organization or user: `rjsf-team`\n 2. Repository: `react-jsonschema-form`\n 3. Workflow filename: `release.yml`\n 4. Allow `npm publish`\n\n\n# Arrays\n\nArrays are defined with a type equal to `array`, and array items' schemas are specified in the `items` keyword.\n\n## Arrays of a single field\n\nArrays of a single field type can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Arrays of objects\n\nArrays of objects can be specified as follows:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## uiSchema for array items\n\nTo specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema = {\n items: {\n 'ui:widget': 'textarea',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n> NOTE: The `items` property in `uiSchema` can also accept a function for dynamic UI schema generation based on array item data. See [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) for advanced use cases.\n\n## The `additionalItems` keyword\n\nThe `additionalItems` keyword allows the user to add additional items of a given schema. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n additionalItems: {\n type: 'boolean',\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Array item uiSchema options\n\nAny of these options can be set globally if they are contained within the `ui:globalOptions` block.\nThey can also be overridden on a per-field basis inside a `ui:options` block as shown below.\n\n### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n orderable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n addable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `copyable` option\n\nA copy button is **NOT** shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance.\nYou can turn this **ON** with the `copyable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n copyable: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n removable: false,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Multiple-choice list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. There are two alternative widgets for picking multiple elements from a list of choices. Typically, this applies when a schema has an `enum` list for the `items` property of an `array` field, and the `uniqueItems` property set to `true`.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Custom widgets\n\nIn addition to [ArrayFieldTemplate](../advanced-customization/custom-templates.md#arrayfieldtemplate) you use your own widget by providing it to the uiSchema with the property of `ui:widget`.\n\nExample:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst CustomSelectComponent = (props) => {\n return (\n \n );\n};\n\nconst schema: RJSFSchema = {\n type: 'array',\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'CustomSelect',\n};\n\nconst widgets = {\n CustomSelect: CustomSelectComponent,\n};\n\nrender(\n ,\n document.getElementById('app'),\n);\n```\n\n## Specifying the minimum or maximum number of items\n\nNote that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.\n\nExample:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nYou can also specify the maximum number of items in an array using the `maxItems` property.\n\n## Inline checkboxes\n\nBy default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'array',\n minItems: 2,\n title: 'A multiple-choice list',\n items: {\n type: 'string',\n enum: ['foo', 'bar', 'fuzz', 'qux'],\n },\n uniqueItems: true,\n};\n\nconst uiSchema: UiSchema = {\n 'ui:widget': 'checkboxes',\n 'ui:options': {\n inline: true,\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n\n# Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which allows you to re-use parts of your schema:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n address: {\n type: 'object',\n properties: {\n street_address: { type: 'string' },\n city: { type: 'string' },\n state: { type: 'string' },\n },\n required: ['street_address', 'city', 'state'],\n },\n },\n type: 'object',\n properties: {\n billing_address: { $ref: '#/definitions/address' },\n shipping_address: { $ref: '#/definitions/address' },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nNote that this library only supports local definition referencing. The value in the `$ref` keyword should be a [JSON Pointer](https://tools.ietf.org/html/rfc6901) in URI fragment identifier format.\n\n## uiSchema for Schema Definitions\n\nTo customize the UI for schemas referenced via `$ref`, use the `ui:definitions` property in your uiSchema. This works for both reused and recursive schemas.\n\nSee [ui:definitions](../api-reference/uiSchema.md#uidefinitions) for full details and more examples.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n definitions: {\n node: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n children: {\n type: 'array',\n items: { $ref: '#/definitions/node' },\n },\n },\n },\n },\n type: 'object',\n properties: {\n tree: { $ref: '#/definitions/node' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:definitions': {\n '#/definitions/node': {\n name: { 'ui:placeholder': 'Node name' },\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n\n# Dependencies\n\nreact-jsonschema-form supports the `dependencies` keyword from an earlier draft of JSON Schema (note that this is not part of the latest JSON Schema spec, though). Dependencies can be used to create dynamic schemas that change fields based on what data is entered.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined, making them both required if either is defined.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n billing_address: { type: 'string' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: ['billing_address'],\n billing_address: ['credit_card'],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))_\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n\n properties: {\n name: { type: 'string' },\n credit_card: { type: 'number' },\n },\n\n required: ['name'],\n\n dependencies: {\n credit_card: {\n properties: {\n billing_address: { type: 'string' },\n },\n required: ['billing_address'],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n_(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))_\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Person',\n type: 'object',\n properties: {\n 'Do you have any pets?': {\n type: 'string',\n enum: ['No', 'Yes: One', 'Yes: More than one'],\n default: 'No',\n },\n },\n required: ['Do you have any pets?'],\n dependencies: {\n 'Do you have any pets?': {\n oneOf: [\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['No'],\n },\n },\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: One'],\n },\n 'How old is your pet?': {\n type: 'number',\n },\n },\n required: ['How old is your pet?'],\n },\n {\n properties: {\n 'Do you have any pets?': {\n enum: ['Yes: More than one'],\n },\n 'Do you want to get rid of any?': {\n type: 'boolean',\n },\n },\n required: ['Do you want to get rid of any?'],\n },\n ],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.\n\n\n# Objects\n\n## Object properties\n\nObjects are defined with a type equal to `object` and properties specified in the `properties` keyword.\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Required properties\n\nYou can specify which properties are required using the `required` attribute:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My title',\n description: 'My description',\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n age: {\n type: 'number',\n },\n },\n required: ['name'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Specifying property order\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n foo: { type: 'string' },\n bar: { type: 'string' },\n },\n};\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', 'foo'],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:order': ['bar', '*'],\n};\n```\n\n## Additional and pattern properties\n\nThe `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n additionalProperties: {\n type: 'number',\n enum: [1, 2, 3],\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nIn this way, an add button for new properties is shown by default.\n\nYou can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.\n\nThe `patternProperties` keyword allows the user to add properties with names that match one or more of the specified regular expressions\n\n```tsx\nimport { Form } from '@rjsf/core';\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n },\n },\n patternProperties: {\n '^foo+$': {\n type: 'number',\n enum: [1, 2, 3],\n },\n },\n};\n\nrender(, document.getElementById('app'));\n```\n\nAlso in this case, an add button for new properties is shown by default.\n\n### `expandable` option\n\nYou can turn support for `additionalProperties` and `patternProperties` off with the `expandable` option in `uiSchema`:\n\n```ts\nimport { UiSchema } from '@rjsf/utils';\n\nconst uiSchema: UiSchema = {\n 'ui:options': {\n expandable: false,\n },\n};\n```\n\n\n# oneOf, anyOf, and allOf\n\nreact-jsonschema-form supports custom widgets for oneOf, anyOf, and allOf.\n\n- A schema with `oneOf` is valid if _exactly one_ of the subschemas is valid.\n- A schema with `anyOf` is valid if _at least one_ of the subschemas is valid.\n- A schema with `allOf` is valid if _all_ of the subschemas are valid.\n\n## oneOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n oneOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n ipsum: {\n type: 'string',\n },\n },\n required: ['ipsum'],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## anyOf\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'object',\n anyOf: [\n {\n properties: {\n lorem: {\n type: 'string',\n },\n },\n required: ['lorem'],\n },\n {\n properties: {\n lorem: {\n type: 'string',\n },\n ipsum: {\n type: 'string',\n },\n },\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## allOf\n\nWhen `allOf` is specified in a schema, react-jsonschema-form uses the [@x0k/json-schema-merge](https://github.com/x0k/json-schema-merge/) library to merge the specified subschemas to create a combined subschema that is valid. For example, the below schema evaluates to a combined subschema of `{type: \"boolean\"}`:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'Field',\n allOf: [\n {\n type: ['string', 'boolean'],\n },\n {\n type: 'boolean',\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n\n# Single fields\n\nThe simplest example of a JSON Schema contains only a single field. The field type is determined by the `type` parameter.\n\n## Field types\n\nThe base field types in JSON Schema include:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n- `null`\n\nHere is an example of a string field:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Titles and descriptions\n\nFields can have titles and descriptions specified by the `title` keyword in the schema and the `description` keyword in the schema, respectively. These two can also be overridden by the `ui:title` and `ui:description` keywords in the uiSchema.\n\nDescription can render markdown. This feature is disabled by default. It needs to be enabled by the `ui:enableMarkdownInDescription` keyword and setting to `true`. Read more about markdown options in the `markdown-to-jsx` official [docs](https://markdown-to-jsx.quantizor.dev/).\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n title: 'My form',\n description: 'My description',\n type: 'string',\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Deprecated fields\n\nThe JSON Schema `deprecated` keyword can be used to indicate that a field is no longer supported.\n\nThe `deprecated` keyword is a JSON Schema Draft 2019-09 feature. You may need to configure your schema validator to properly recognize it. See the [Validation](../usage/validation.md#ajvclass) documentation for more details.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n deprecated: true,\n};\n\nrender(, document.getElementById('app'));\n```\n\nBy default, RJSF will append ` (deprecated)` to the field label. You can customize this behavior using the `deprecatedHandling` option in the uiSchema. See [deprecatedHandling](../api-reference/uiSchema.md#deprecatedhandling) for more details.\n\n## Enumerated values\n\nAll base schema types support the `enum` attribute, which restricts the user to select among a list of options. For example:\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['one', 'two', 'three'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Custom labels for `enum` fields\n\nJSON Schema supports the following approaches to enumerations using `oneOf`/`anyOf`; react-jsonschema-form supports it as well.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n anyOf: [\n {\n type: 'number',\n title: 'one',\n enum: [1],\n },\n {\n type: 'number',\n title: 'two',\n enum: [2],\n },\n {\n type: 'number',\n title: 'three',\n enum: [3],\n },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\n\nconst schema: RJSFSchema = {\n type: 'number',\n oneOf: [\n { const: 1, title: 'one' },\n { const: 2, title: 'two' },\n { const: 3, title: 'three' },\n ],\n};\n\nrender(, document.getElementById('app'));\n```\n\nIf you use `enum` in your JSON Schema, you may instead specify `ui:enumNames` in your `uiSchema`, which RJSF can use to label an enumeration. `ui:enumNames` can be an array (matched by index) or a map (matched by value):\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'number',\n enum: [1, 2, 3],\n};\n\n// Array form (matched by index)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': ['one', 'two', 'three'],\n};\n\n// Map form (matched by value)\nconst uiSchema: UiSchema = {\n 'ui:enumNames': { 1: 'one', 2: 'two', 3: 'three' },\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Ordering `enum` fields\n\nTo control the display order of enum options, use `ui:enumOrder`. Use `'*'` to represent all remaining values in their original schema order. Unlisted values not covered by `'*'` are dropped.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'string',\n enum: ['apple', 'banana', 'cherry', 'date'],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumOrder': ['cherry', '*', 'apple'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n### Disabled attribute for `enum` fields\n\nTo disable an option, use the `ui:enumDisabled` property in the uiSchema.\n\n```tsx\nimport { RJSFSchema, UiSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: 'boolean',\n enum: [true, false],\n};\n\nconst uiSchema: UiSchema = {\n 'ui:enumDisabled': [true],\n};\n\nrender(, document.getElementById('app'));\n```\n\n## Nullable types\n\nJSON Schema supports specifying multiple types in an array; however, react-jsonschema-form only supports a restricted subset of this -- nullable types, in which an element is either a given type or equal to null.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nconst schema: RJSFSchema = {\n type: ['string', 'null'],\n};\n\nrender(, document.getElementById('app'));\n```\n\n\n# 2.x Upgrade Guide\n\n## Changes from v1 -> v2\n\n### Breaking changes\n\n- We now officially support the @rjsf/material-ui theme. We use a monorepo with Lerna and have published two packages (@rjsf/core and @rjsf/material-ui) with this version number. Note that react-jsonschema-form has been renamed to @rjsf/core ([#1642](https://github.com/rjsf-team/react-jsonschema-form/pull/1642))\n- Combine all themes into a single playground ([#1539](https://github.com/rjsf-team/react-jsonschema-form/pull/1539), [#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607), [#1623](https://github.com/rjsf-team/react-jsonschema-form/pull/1623))\n- Remove ui:order console warning about extraneous properties ([#1508](https://github.com/rjsf-team/react-jsonschema-form/pull/1508))\n- Capitalized Yes and No defaults ([#1395](https://github.com/rjsf-team/react-jsonschema-form/pull/1395))\n- Fix id of oneof and anyof select ([#1212](https://github.com/rjsf-team/react-jsonschema-form/pull/1212)). The oneof select id is now suffixed by \\_\\_oneof_select and the anyof select by \\_\\_anyof_select.\n- React 16+ is now a peer dependency ([#1408](https://github.com/rjsf-team/react-jsonschema-form/pull/1408))\n- We no longer actively support Node version < 8 ([#1462](https://github.com/rjsf-team/react-jsonschema-form/pull/1462))\n- Removed setState, setImmediate, safeRenderCompletion helpers/hacks ([#1454](https://github.com/rjsf-team/react-jsonschema-form/pull/1454), [#1720](https://github.com/rjsf-team/react-jsonschema-form/pull/1720))\n- Inject defaults in arrays ([#1499](https://github.com/rjsf-team/react-jsonschema-form/pull/1499))\n\n### Features\n\n- Add material-ui theme in the main repo ([#1420](https://github.com/rjsf-team/react-jsonschema-form/pull/1420)) (note: has not been fully integrated yet -- this will be fully integrated when we publish multiple packages with lerna - [#1501](https://github.com/rjsf-team/react-jsonschema-form/pull/1501))\n- Add extraErrors prop for async validation ([#1444](https://github.com/rjsf-team/react-jsonschema-form/pull/1444))\n- Add support for overriding UnsupportedField ([#1660](https://github.com/rjsf-team/react-jsonschema-form/pull/1660))\n\n### Fixes\n\n- Fix issue with false as formData on radio components ([#1438](https://github.com/rjsf-team/react-jsonschema-form/pull/1438))\n- Security patches ([#1458](https://github.com/rjsf-team/react-jsonschema-form/pull/1458), [#1459](https://github.com/rjsf-team/react-jsonschema-form/pull/1459))\n- Memo components in custom widgets and fields. ([#1447](https://github.com/rjsf-team/react-jsonschema-form/pull/1447))\n- Introduce Form autoComplete attribute and deprecate autocomplete ([#1483](https://github.com/rjsf-team/react-jsonschema-form/pull/1483))\n- Rewrite mergeSchemas to fix schema dependencies merging ([#1476](https://github.com/rjsf-team/react-jsonschema-form/pull/1476))\n- Update arrays correctly when changing index ([#1485](https://github.com/rjsf-team/react-jsonschema-form/pull/1485))\n- Update anyOf schema to correctly update items in an array ([#1491](https://github.com/rjsf-team/react-jsonschema-form/pull/1491))\n- Update schema to re-render when idschema changes ([#1493](https://github.com/rjsf-team/react-jsonschema-form/pull/1493))\n- Make sure BooleanField supports an overridable DescriptionField ([#1594](https://github.com/rjsf-team/react-jsonschema-form/pull/1594))\n- Export typings ([#1607](https://github.com/rjsf-team/react-jsonschema-form/pull/1607))\n\n\n# 3.x Upgrade Guide\n\n## Breaking changes\n\n### Node support\n\nDropped support for Node 8, 9, 10. Minimum supported version of Node.js is now 12.\n\n### Dereferenced schemas for `anyOf`/`allOf` options\n\n`MultiSchemaField`'s `options` interface is different. Before, an option could include a `$ref`. Now, any option with a reference will be resolved/dereferenced when given as props for `MultiSchemaField`.\n\n### Help field IDs\n\nIDs for [Help fields](../api-reference/uiSchema.md#help) are now suffixed by `__help` so that the IDs are unique. Previously, their IDs would be nonexistent or the same as the fields that they were describing.\n\n### Bring your own polyfills\n\ncore-js@2 has been removed from @rjsf/core. See more about [the rationale here](https://github.com/rjsf-team/react-jsonschema-form/pull/2211#issue-563700810).\n\nIf you're using a framework like [Create React App](https://create-react-app.dev/docs/supported-browsers-features#supported-browsers), [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/browser-support/), [Next.js](https://nextjs.org/docs/basic-features/supported-browsers-features), or transpiling code through something like `@babel/preset-env`, polyfills are already included there and you won't have to do anything.\n\nIf you were directly depending on @rjsf/core's @babel/runtime pulling in core-js@2, just `npm install core-js` and using a side effectful import at the top of your entry point (`import 'core-js'`) might be enough.\n\nFor a slightly more elaborate setup, [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#how-does-it-work) is probably a good second choice.\n\nFrom `@babel/preset-env`'s docs\n\n> We leverage [`browserslist`, `compat-table`, and `electron-to-chromium`] to maintain mappings of which version of our supported target environments gained support of a JavaScript syntax or browser feature, as well as a mapping of those syntaxes and features to Babel transform plugins and core-js polyfills.\n\n\n# 4.x Upgrade Guide\n\n## Breaking changes\n\n### React version\n\nNo longer actively supporting React version < 16.3. The minimum supported version of React is now 16.3. [Discussion can be found here](https://github.com/rjsf-team/react-jsonschema-form/pull/2605#discussion_r792685354)\n\n### @rjsf/material-ui package - Minimum version of material-ui 4\n\nIf you are using the material-ui 4 theme, @material-ui/core and @material-ui/icons packages should be updated to the latest versions. The minimum versions supported for @material-ui/core and @material-ui/icons are 4.12.0 and 4.11.1 respectively. This change is required for [support for the material-ui version 5 theme](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/material-ui)\n\n\n"}