Formik

The theme has integrated excellent Formik plugin for easy validation and onChange events input handling. Please visit Formik documentation for more info

import { Formik, Form as FormikForm, Field } from "formik"

export default function BasicForm() {
  return (
    <Formik
      initialValues={{
        email: "",
        password: "",
      }}
      onSubmit={async (values) => {
        await new Promise((r) => setTimeout(r, 500))
        alert(JSON.stringify(values, null, 2))
      }}
    >
      <FormikForm>
        <div className="mb-3">
          <Form.Label className="text-uppercase" htmlFor="email">
            Email
          </Form.Label>
          <Field
            id="email"
            name="email"
            type="email"
            placeholder="Email Address"
            className="form-control"
          />
        </div>
        <div className="mb-3">
          <Form.Label className="text-uppercase" htmlFor="email">
            Password
          </Form.Label>
          <Field
            id="password"
            name="password"
            type="password"
            placeholder="Password"
            className="form-control"
          />
        </div>
        <div className="mb-3">
          <Button variant="primary" type="submit">
            Log in
          </Button>
        </div>
      </FormikForm>
    </Formik>
  )
}

Basic Form

Lorem ipsum dolor sit amet consectetur.

Horizontal Form

Lorem ipsum dolor sit amet consectetur.

Example help text that remains unchanged.
Example help text that remains unchanged.

Inputs with floating labels

Modal Form

All form elements


A block of help text that breaks onto a new line and may extend beyond one line.








Please provide your name.



$
$
$.00



Your company © 2021

Version 1.0.0