Read Only Field

type ReadOnlyFieldStructure = {
    type: 'readOnly';
    fieldOrigin?: FieldOrigin;
    readOnlyContent?: ReactNode;
    elementProperties?: DetailedHTMLProps<
        HTMLAttributes<HTMLElement>,
        HTMLElement
    >;
    conditionalRender?: {
        conditionalFields: ConditionalType[];
        conditionalRulesChainOption?: 'AND' | 'OR';
    };
    fieldWrapperProperties?: JSX.IntrinsicElements['div'];
}

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const schema: FormSchema = { readOnlyFieldFromInitialValue: { type: 'readOnly', fieldWrapperProperties: { className: 'mb-2' }, fieldOrigin: 'text' }, readOnlyFieldFromReadOnlyContent: { type: 'readOnly', fieldWrapperProperties: { className: 'mb-4' }, fieldOrigin: 'text', readOnlyContent: 'Text content from property readOnlyContent' elementProperties: { className: 'text-tropical-rain-forest font-bold' } } } const readOnlyFieldRenderMethod = ( readOnlyContent, name, restReadOnlyProperties, fieldOrigin, elementProperties ) => <p {...elementProperties}>{readOnlyContent}</p> render ( <FormWrapper schema={schema} initialValue={{ readOnlyFieldFromInitialValue: 'Content from initialValue' }} onSubmit={onSubmit} readOnlyFieldRender={readOnlyFieldRenderMethod} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const schema: FormSchema = {
    readOnlyFieldFromInitialValue: {
        type: 'readOnly',
        fieldWrapperProperties: { className: 'mb-2' },
        fieldOrigin: 'text'
    },
    readOnlyFieldFromReadOnlyContent: {
        type: 'readOnly',
        fieldWrapperProperties: { className: 'mb-4' },
        fieldOrigin: 'text',
        readOnlyContent: 'Text content from property readOnlyContent'
        elementProperties: { className: 'text-tropical-rain-forest font-bold' }
    }
}
const readOnlyFieldRenderMethod = (
      readOnlyContent,
      name,
      restReadOnlyProperties,
      fieldOrigin,
      elementProperties
  ) => <p {...elementProperties}>{readOnlyContent}</p>
render (
     <FormWrapper
        schema={schema}
        initialValue={{ readOnlyFieldFromInitialValue: 'Content from initialValue' }}
        onSubmit={onSubmit}
        readOnlyFieldRender={readOnlyFieldRenderMethod}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result