HTML Adapter

#useForm() Hook

Sets up the form hook for use with HTML form elements.

function useForm<Values extends FormValues>(
    initialValues: Values,
    onSubmit: (values: Values) => void | Promise<void>,
    options?: FormOptions<Values>
): FormiteHtmlForm<Values>
Copy

#Parameters

FormiteHtmlForm<Values>

The forms state and API, a Form component and a handleSubmit callback.

interface FormiteHtmlForm<Values extends FormValues> extends FormiteForm<Values> {
    Form: (props: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) => JSX.Element;
    handleSubmit: (ev: React.FormEvent<HTMLFormElement>) => void;
}
Copy

#Remarks

All initial field values should be set even if they are undefined.

#useInput() Hook

Sets up a form's field hook for use with an HTML input element.

function useInput(field: Field, onValidate?: ValidateFieldHandler, metadata?: any): {
    value: string | undefined;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
};
Copy

#Parameters

{
    value: string | undefined;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
}
Copy

The properties to pass to the HTML input component.

#Example

<input type="text" {...useInput(fields.stringField)} />
Copy

#useCheckbox() Hook

Sets up a form's field hook for use with an HTML checkbox element.

function useCheckbox(field: Field<boolean>, onValidate?: ValidateFieldHandler, metadata?: any): {
    checked: boolean | undefined;
    type: string;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
};
Copy

#Parameters

{
    checked: boolean | undefined;
    type: string;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
}
Copy

The properties to pass to the HTML input component.

#Example

<input {...useCheckbox(fields.aBooleanField)} />
Copy

#useRadioButton() Hook

Sets up a form's field hook for use with an HTML radio button element.

function useRadioButton(field: Field, value: string | number, onValidate?: ValidateFieldHandler, metadata?: any): {
    checked: boolean;
    type: string;
    value: string | number;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
};
Copy

#Parameters

{
    checked: boolean;
    type: string;
    value: string | number;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
}
Copy

The properties to pass to the HTML input component.

#Example

<input {...useRadioButton(fields.someField, "A_VALUE")} />
Copy

#useSelect() Hook

Sets up a form's field hook for use with an HTML select element.

function useSelect(field: Field, onValidate?: ValidateFieldHandler, metadata?: any): {
    value: string | string[] | undefined;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
};
Copy

#Parameters

{
    value: string | string[] | undefined;
    onBlur: () => void;
    onChange: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
}
Copy

The properties to pass to the HTML select component.

#Example

<select {...useSelect(fields.someField)}>
    <option value="VALUE_1">Option A</option>
    <option value="VALUE_2">Option B</option>
</select>
Copy