Input Field

type InputFieldStructure = {
    type: 'tel' | 'text' | 'number' | 'hidden' | 'email' | 'password';
    elementProperties?: JSX.IntrinsicElements['input'];
    conditionalRender?: {
        conditionalFields: ConditionalType[];
        conditionalRulesChainOption?: 'AND' | 'OR';
    };
    fieldWrapperProperties?: JSX.IntrinsicElements['div'];
    fieldLabel?: (name: string) => ReactNode;
    placeholder?: string;
    validations?: Validation;
    ariaRequired?: boolean;
    disabled?: boolean;
}

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 labelExample = () => <p>text in paragraph</p> const schema: FormSchema = { textFieldExample: { type: 'text', elementProperties: { className: 'w-60' }, fieldWrapperProperties: { className: 'mb-2' }, fieldLabel: labelExample, placeholder: 'Placeholder value', }, numberFieldExample: { fieldLabel: () => 'Label example', fieldWrapperProperties: { className: 'mb-4' }, type: 'number', disabled: true, } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} initialValue={{ numberFieldExample: 12345 }} > <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 labelExample = () => <p>text in paragraph</p>
const schema: FormSchema = {
    textFieldExample: {
        type: 'text',
        elementProperties: { className: 'w-60' },
        fieldWrapperProperties: { className: 'mb-2' },
        fieldLabel: labelExample,
        placeholder: 'Placeholder value',
    },
    numberFieldExample: {
        fieldLabel: () => 'Label example',
        fieldWrapperProperties: { className: 'mb-4' },
        type: 'number',
        disabled: true,
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
        initialValue={{ numberFieldExample: 12345 }}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result