Components

You can use Formite's components in your class components that do not support React Hooks.

Form

Form component.

Properties

PropertyTypeDescription
initialValuesValuesInitial values of the form
onSubmit(values: Values) => void ǀ Promise<void>The function that is called when submitting the form.
optionsFormOptions<Values>Optional Form options
children(form: FormiteForm<Values>, fields: Fields<Values>) => React.ReactNodeA function that renders the children

Remarks

The Form component uses children as a render prop. (see example)

Example

<Form initialValues={{ firstName: "", lastName: "" }} onSubmitForm={handleSubmit} >
    {(form, fields) => (
        <InputField field={fields.firstName}>
            {field => <input type="text" placeholder="First name" {...field} />}
        </InputField>
    )}
</Form>

Field

Field component to use a field with other components than standard HTML elements.

Properties

PropertyTypeDescription
fieldFieldThe Field to connect to an input component.
onValidateValidateFieldHandlerAn optional callback function to validate the field.
metadataanyAn optional data value that is stored with the Field.
children(field: FormiteField) => React.ReactNodeA function that renders the children

Remarks

For standard HTML elements it is easier to use Formite's components like InputField.

Example

<Form initialValues={{ firstName: "", lastName: "" }} onSubmitForm={handleSubmit} >
    {(form, fields) => (
        <Field field={fields.firstName}>
            {field => (
                <input
                    type="text"
                    placeholder="First name"
                    value={field.value}
                    onBlur={field.onBlur}
                    onChange={ev => field.onChange(ev.currentTarget.value)}
                />
            )}
        </Field>
    )}
</Form>

InputField

InputField component to use a field with a standard HTML input element.

Properties

ParameterTypeDescription
fieldFieldThe Field to connect to an input component.
onValidateValidateFieldHandlerAn optional callback function to validate the field.
metadataanyAn optional data value that is stored with the .
children(inputField: FormiteInput) => React.ReactNodeA function that renders the children

Remarks

The InputField component uses children as a render prop. (see example)

Example

<Form initialValues={{ firstName: "", lastName: "" }} onSubmitForm={handleSubmit} >
    {(form, fields) => (
        <InputField field={fields.firstName}>
            {field => <input type="text" placeholder="First name" {...field} />}
        </InputField>
    )}
</Form>

CheckboxField

CheckboxField component to use a field with a standard HTML input element.

Properties

ParameterTypeDescription
fieldField<boolean>The Field to connect to an input component.
onValidateValidateFieldHandlerAn optional callback function to validate the field.
metadataanyAn optional data value that is stored with the .
children(checkboxField: FormiteCheckbox) => React.ReactNodeA function that renders the children

Remarks

The CheckboxField component uses children as a render prop. (see example)

Example

<Form initialValues={{ remember: false }} onSubmitForm={handleSubmit} >
    {(form, fields) => (
        <CheckboxField field={fields.remember}>
            {checkbox => (
                <label><input {...checkbox} />Remember me</label>
            )}
        </CheckboxField>
    )}
</Form>

RadioButtonField

RadioButtonField component to use a field with a standard HTML input element.

Properties

ParameterTypeDescription
fieldFieldThe Field to connect to an input component.
valuestring ǀ numberThe value that should be assigned to the field when the radio button in the group is selected.
onValidateValidateFieldHandlerAn optional callback function to validate the field.
metadataanyAn optional data value that is stored with the .
children(radioButtonField: FormiteRadioButton) => React.ReactNodeA function that renders the children

Remarks

The RadioButtonField component uses children as a render prop. (see example)

Example

<Form initialValues={{ gender: "" }} onSubmitForm={handleSubmit} >
    {(form, fields) => (
            <div>
                <RadioButtonField field={fields.gender} value="FEMALE"}>
                    {radioButton => (
                        <label><input {...radioButton} />Female</label>
                    )}
                </RadioButtonField>
                <RadioButtonField field={fields.gender} value="MALE">
                    {radioButton => (
                        <label><input {...radioButton} />Male</label>
                    )}
                </RadioButtonField>
        </div>
    )}
</Form>

SelectField

SelectField component to use a field with a standard HTML input element.

Properties

ParameterTypeDescription
fieldFieldThe Field to connect to a select component.
onValidateValidateFieldHandlerAn optional callback function to validate the field.
metadataanyAn optional data value that is stored with the .
children(selectField: FormiteSelect) => React.ReactNodeA function that renders the children

Remarks

The SelectField component uses children as a render prop. (see example)

Example

<Form initialValues={{ country: "" }} onSubmitForm={handleSubmit} >
    {(form, fields) => (
        <SelectField field={fields.country}>
            {field => (
                <select {...field}>
                    <option value="Germany">Germany</option>
                    <option value="USA">USA</option>
                </select>
            )}
        </SelectField>
    )}
</Form>