Skip to content

Commit 0c83b27

Browse files
committed
docs: Describe nameGenerator prop & add feature in the migration guide
1 parent 78f0294 commit 0c83b27

File tree

3 files changed

+55
-1
lines changed

3 files changed

+55
-1
lines changed

packages/core/src/components/Form.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,8 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
196196
* to put the second parameter before the first in its translation.
197197
*/
198198
translateString?: Registry['translateString'];
199+
/** Optional function to generate custom HTML `name` attributes for form fields.
200+
*/
199201
nameGenerator?: NameGeneratorFunction;
200202
/** Optional configuration object with flags, if provided, allows users to override default form state behavior
201203
* Currently only affecting minItems on array fields and handling of setting defaults based on the value of

packages/docs/docs/api-reference/form-props.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,47 @@ render(<Form schema={schema} validator={validator} idSeparator={'/'} />, documen
439439
This will render `<input id="root/first">` instead of `<input
440440
id="root_first">` when rendering `first`.
441441

442+
## nameGenerator
443+
444+
The `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.
445+
446+
**Default behavior:** When no `nameGenerator` is provided, the `name` attribute will equal the `id` attribute (e.g., `root_tasks_0_title`).
447+
448+
RJSF provides two built-in generators:
449+
450+
**`bracketNameGenerator`** - Generates bracket notation for PHP/Rails (e.g., `root[tasks][0][title]`). Automatically appends `[]` for multi-value fields like checkboxes.
451+
452+
**`dotNotationNameGenerator`** - Generates dot notation for other frameworks (e.g., `root.tasks.0.title`).
453+
454+
```tsx
455+
import { Form } from '@rjsf/core';
456+
import { bracketNameGenerator, RJSFSchema } from '@rjsf/utils';
457+
import validator from '@rjsf/validator-ajv8';
458+
459+
const schema: RJSFSchema = {
460+
type: 'object',
461+
properties: {
462+
firstName: { type: 'string' },
463+
tasks: {
464+
type: 'array',
465+
items: {
466+
type: 'object',
467+
properties: {
468+
title: { type: 'string' },
469+
},
470+
},
471+
},
472+
},
473+
};
474+
475+
render(
476+
<Form schema={schema} validator={validator} nameGenerator={bracketNameGenerator} />,
477+
document.getElementById('app'),
478+
);
479+
```
480+
481+
You 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).
482+
442483
## liveOmit
443484

444485
If `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.

packages/docs/docs/migration-guides/v6.x upgrade guide.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,11 @@ export type GlobalFormOptions = {
378378
readonly idSeparator?: string;
379379
/** The component update strategy used by the Form and its fields for performance optimization */
380380
readonly experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';
381+
/** Optional function to generate custom HTML name attributes for form elements. Receives the field path segments
382+
* and element type (object or array), and returns a custom name string. This allows backends like PHP/Rails
383+
* (`root[tasks][0][title]`) or Django (`root__tasks-0__title`) to receive form data in their expected format.
384+
*/
385+
readonly nameGenerator?: NameGeneratorFunction;
381386
};
382387
```
383388

@@ -729,7 +734,7 @@ Many new or formerly internally private utility functions are available in `@rjs
729734
- `optionalControlsId(id: FieldPathId | string, element: 'Add' | 'Msg' | 'Remove')`: Return a consistent `id` for the optional data controls `element`
730735
- `shouldRenderOptionalField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(registry: Registry<T, S, F>, schema: S, required: boolean, uiSchema?: UiSchema<T, S, F>): boolean`: Determines if this field should be rendered with the Optional Data Controls UI.
731736
- `sortedJSONStringify(object: unknown): string`: Stringifies an `object`, sorts object fields in consistent order before stringifying it.
732-
- `toFieldPathId(fieldPath: string | number, globalFormOptions: GlobalFormOptions, parentPath?: FieldPathId | FieldPathList)`: Constructs the `FieldPathId` for `fieldPath` and the optional `parentPath`, using `globalFormOptions`
737+
- `toFieldPathId(fieldPath: string | number, globalFormOptions: GlobalFormOptions, parentPath?: FieldPathId | FieldPathList, isMultiValue?: boolean)`: Constructs the `FieldPathId` for `fieldPath` and the optional `parentPath`, using `globalFormOptions`
733738

734739
### New validator-based utility functions
735740

@@ -773,3 +778,9 @@ const uiSchema: UiSchema = {
773778

774779
This feature is fully backward compatible - existing forms using object-based `uiSchema.items` will continue to work without changes.
775780
See the [Dynamic UI Schema Examples](../api-reference/dynamic-ui-schema-examples.md) documentation for comprehensive examples and usage patterns.
781+
782+
### Custom field `name` generation
783+
784+
RJSF 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.
785+
786+
The default behavior is unchanged if the prop is not provided.

0 commit comments

Comments
 (0)