Custom field

You can create your own field inside the abstracted field shipped from React Final Form

type FieldStructure = {
    conditionalRender?: {
        conditionalFields: ConditionalType[];
        conditionalRulesChainOption?: 'AND' | 'OR';
    };
    fieldWrapperProperties?: JSX.IntrinsicElements['div'];
    fieldLabel?: (name: string) => ReactNode;
    placeholder?: string;
    validations?: Validation;
    ariaRequired?: boolean;
    disabled?: boolean;
    [key: string]: any;
}

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 CustomField = (props) => {//type of props is RenderProps const inputRef = React.useRef<HTMLInputElement>(); const { input } = props; const { onChange, value } = input; const reset = () => { if (inputRef.current) { inputRef.current.value = ''; } }; const onClick = () => { if (value && inputRef.current.value) { onChange([...(value as string[]), inputRef.current.value]); } else if (inputRef.current.value) { onChange([inputRef.current.value]) } reset(); } return ( <div className="mb-2"> <label htmlFor="test"> Please enter you favourite film </label> <div className="grid grid-cols-2 auto-rows-auto gap-5 mt-5"> <Input ref={inputRef} className="w-full" /> <Button scheme="primary" type="button" onClick={onClick} > Add movie </Button> {value && ( <ul className="col-start-1 col-end-3 row-start-2 pl-10"> {((value as string[]) || []).map( (entry, ix) => ( <li key={ix} className="list-disc list-item" > {entry} </li> ) )} </ul> )} </div> </div> ); } const labelExample = () => <p>Custom field</p> const schema: = { customFieldExample: { fieldLabel: labelExample, type: 'custom', render: CustomField } } 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 CustomField = (props) => {//type of props is RenderProps
    const inputRef = React.useRef<HTMLInputElement>();
    const { input } = props;
    const { onChange, value } = input;
    const reset = () => {
        if (inputRef.current) {
            inputRef.current.value = '';
        }
    };
    const onClick = () => {
        if (value && inputRef.current.value) {
            onChange([...(value as string[]), inputRef.current.value]);
        } else if (inputRef.current.value) {
            onChange([inputRef.current.value])
        }
        reset();
    }
    return (
        <div className="mb-2">
            <label htmlFor="test">
                Please enter you favourite film
            </label>
            <div className="grid grid-cols-2 auto-rows-auto gap-5 mt-5">
                <Input ref={inputRef} className="w-full" />
                <Button
                    scheme="primary"
                    type="button"
                    onClick={onClick}
                >
                    Add movie
                </Button>
                {value && (
                    <ul className="col-start-1 col-end-3 row-start-2 pl-10">
                        {((value as string[]) || []).map(
                            (entry, ix) => (
                                <li
                                    key={ix}
                                    className="list-disc list-item"
                                >
                                    {entry}
                                </li>
                            )
                        )}
                    </ul>
                )}
            </div>
        </div>
    );
}
const labelExample = () => <p>Custom field</p>
const schema: = {
    customFieldExample: {
        fieldLabel: labelExample,
        type: 'custom',
        render: CustomField
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
        initialValue={{ numberFieldExample: 12345 }}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result