Function Form

The main hub for the form. This component manages form state, the underlying formik instance and basic styling, etc.

Example

<Form
        id="login"
        onSubmit={(values: { username: string; password: string; }) => {}}
        initialFocus="username"
    >
        <FormBody>
            <FormField
                as={TextInput}
                id="username"
                label="Email"
                defaultValue="test@example.com"
                autocomplete={{
                    type: FormInputAutocompleteTypes.USERNAME
                }}
                schema={{ email: true }}
                required
            />
            <FormField
                as={PasswordInput}
                id="password"
                label="Password"
                autocomplete={{
                    type: FormInputAutocompleteTypes.CURRENT_PASSWORD
                }}
                required
            />
        </FormBody>
    </Form>

Returns

A fully rendered form component you can drop into the page, with submitting, validation, etc. sorted for you.