AntD Customization

formContext

You can customize the look of the form by passing options to Ant-Design theme fields.

The formContext antd object accepts the properties listed below, such as descriptionLocation and readonlyAsDisabled.

descriptionLocation can be 'below' | 'tooltip', the default is 'below' which places the description below the form item. You can set it to tooltip that put the description inside the tooltip. antd draws a tooltip only beside a label, so a field whose template draws no label, such as a checkbox, still shows its description below. Note that you should have antd 4.7+ to use 'tooltip'.

The antd theme draws readOnly fields as disabled. Setting {readonlyAsDisabled: false} on the formContext turns that off.

<Form
  formContext={{
    descriptionLocation: 'tooltip',
    readonlyAsDisabled: false,
    // other props...
  }}
/>

These are the formContext properties that you can modify to adjust the antd presentation. AntdFormContext, exported from @rjsf/antd, types them, to pass as the F type argument of generateForm() or to extend with your own:

• colon: Whether antd draws its colon after a label, replacing one the label ends in, defaults to true; antd hides its colon on a label above its control, where the default labelCol puts it
• colSpan: The columns of antd's 24-column grid an object's property spans, for every property or as a record keyed by the name of the widget it renders (text for a plain string, the format's name for a string whose format names a widget, such as data-url or hostname, select for a boolean with labelled options), the field a ui:field or its $id names, or the type of the field it renders, tried in that order, defaults to 24; a record gives a property with no entry 24 columns if it is the only visible property, an object, an array or a textarea, and 12 otherwise
• descriptionLocation: Where to display the description, either 'below' or 'tooltip', defaults to 'below'
• labelAlign: The alignment of the labels antd's Form.Item draws for a field and for an additional property's key, and of the headings of objects and arrays, one of 'start', 'end', 'left' or 'right' (antd 6 deprecates 'left' and 'right'); 'start' and 'left' put them at the start of their column, the others at its end. Unset, antd aligns a field's label, and a heading starts its column under the default labelCol or one with a span or an xl of 24 and ends it under any other labelCol. antd sometimes starts field labels whatever labelAlign says, and a heading can't see an enclosing antd Form; see the upgrade guide for those cases
• labelCol: The antd Col props of a field's label, defaults to { span: 24 }. A heading takes only its className, while the rest, such as style and offset, goes to field labels only
• readonlyAsDisabled: Whether to make the antd theme treat readOnly fields as disabled, defaults to true
• rowGutter: The gutter between the columns of a row, as antd's Row takes it, defaults to 24; an AltDateWidget spaces its date parts by half of each side of a [horizontal, vertical] pair, or by half of a single gutter both ways, though Row applies a single gutter horizontally only. A value Row draws no spacing for, such as 0, '' or a numeric string like '16', which Row turns into invalid CSS, gives the date parts none
• toolbarAlign: The vertical alignment of an array item's toolbar, or of an additional property's row, as antd's Row takes it, defaults to 'middle' for an array item with a label and 'top' otherwise
• wrapperCol: The antd Col props of a field's control, defaults to { span: 24 }
• wrapperStyle: The style of a field's antd Form.Item, which holds its label and control

import { generateForm, type AntdFormContext } from '@rjsf/antd';
import type { RJSFSchema } from '@rjsf/utils';

const Form = generateForm<unknown, RJSFSchema, AntdFormContext>();

const formContext: AntdFormContext = { labelAlign: 'start', rowGutter: [8, 8] };

<Form formContext={formContext} /* other props... */ />;

Using Antd v5 theme

You can use AntD v5 styling by wrapping your application with StyleProvider from @ant-design/cssinjs.

By default, @rjsf/antd components are using the v4 styling.

import { StyleProvider } from '@ant-design/cssinjs';

const Component = () => {
  return (
    <StyleProvider>
      <YourFormComponents />
    </StyleProvider>
  );
};