Forms

Forms are used to collect information in an organized and structured manner, making it easier for both the end user and the reader to understand and process the information. We are using Formik for our forms, for more information, please visit formik documentation by clicking here

Usage

You can use any Rhythm formik input controls with Formik without any hassle. From basic components like RhInputFormik to advanced ones like RhDatePickerFormik , RhSelectFormik and Form groups, Rhythm input components can be easily incorporated into your forms.

For your information , Rhythm itself provides all input components that can be easily used with Formik. Generally, you will see the suffix 'Formik' added to the end of input component names. For example, RhInput becomes RhInputFormik.

Here are some examples and demos demonstrating how to use Formik forms

copy

import { Form, Formik } from "formik" 
import {RhInputFormik,RhButton} from "@rhythm-ui/react

You can then use Formik' & Form components in your JSX code:

Simple usage

copy

<Formik
  initialValues={{
    email: "",
    password: "",
  }}
  onSubmit={(values) => {
    alert(JSON.stringify(values));
  }}
>
  <Form className="flex flex-col ">
    <>
      <RhInputFormik
        label="E-mail"
        className="w-full"
        name="email"
        placeholder="alex@codemonk.in"
      />

      <RhInputFormik
        className="w-full"
        placeholder="*********"
        type={"password"}
        name="password"
        label="Password"
      />
    </>

    <div className="flex flex-col mt-2  gap-2 w-full">
      <RhButton className="w-full" type="submit" size="xl">
        Log in
      </RhButton>
    </div>
  </Form>
</Formik>

With Validation

Easily validate all form fields using Yup, a JavaScript schema validation library that ensures data objects conform to a specific set of rules, such as required fields, data types, and lengths.

By using Yup validation on top of Formik forms, you can create powerful and customizable form validation.

For more information on Yup, visit their GitHub page here.

Here is an example.

copy

import * as Yup from 'yup';

copy

<Formik
  initialValues={{
    email: "",
    password: "",
  }}
  validationSchema={Yup.object().shape({
    email: Yup.string()
      .email("Please enter a valid email.")
      .required("E-mail is required."),
    password: Yup.string()
      .min(6, "Password must be minimum of six characters.")
      .required("Password is required."),
  })}
  onSubmit={(values) => {
    alert(JSON.stringify(values));
  }}
>
  <Form className="flex flex-col ">
    <>
      <RhInputFormik
        label="E-mail"
        className="w-full"
        name="email"
        placeholder="alex@codemonk.in"
      />

      <RhInputFormik
        className="w-full"
        placeholder="*********"
        type={"password"}
        name="password"
        label="Password"
      />
    </>

    <div className="flex flex-col mt-2  gap-2 w-full">
      <RhButton className="w-full" type="submit" size="xl">
        Log in
      </RhButton>
    </div>
  </Form>
</Formik>

With Advance Rhythm components

Here is an example how to use Form Groups in forms.

In forms we will use RhSelectFormik not RhSelect . In same way you can use any rhythm input components with suffix Formik.

Here is an explanation of how we can group items like radio inputs and checkboxes using Rhythm's RhFormGroup and RhFormGroupItem.

For example, you can use RhFormGroup and RhFormGroupItem to group radio inputs as shown below:

copy

<Formik
  initialValues={{
    userType: { label: "Student", value: "student" },
    nationality: "indian",
  }}
  onSubmit={(values) => {
    alert(JSON.stringify(values));
  }}
>
  <Form className="flex flex-col ">
    <>
      <RhSelectFormik
        label="Register as"
        className="w-full"
        placeholder="Select profession"
        options={[
          { label: "Student", value: "student" },
          { label: "Teacher", value: "teacher" },
        ]}
        name="userType"
      />

      <RhFormGroup>
        <div className="flex flex gap-2   ">
          <div>
            <RhFormGroupItem
              control={
                <RhInputFormik
                  type="radio"
                  value={"indian"}
                  name={`nationality`}
                />
              }
              label={"Indian"}
            />
          </div>

          <div>
            <RhFormGroupItem
              control={
                <RhInputFormik
                  type="radio"
                  value={"other"}
                  name={`nationality`}
                />
              }
              label={"Other"}
            />
          </div>
        </div>
      </RhFormGroup>
    </>

    <div className="flex flex-col w-full gap-2 mt-2">
      <RhButton className="w-full" type="submit" size="xl">
        Register
      </RhButton>
    </div>
  </Form>
</Formik>

Use custom components as form inputs

Any custom component can be used with Formik by utilizing the setFieldValue and values properties. For example, we can create a form input using custom components like the three cards we've made for plan selection: basic, pro, and pro+. By default, pro is selected, and we're using setFieldValue to update the form value when a plan is selected. for more information, please visit formik documentation by clicking here

copy

<Formik
  initialValues={{
    plan: "pro",
  }}
  onSubmit={(values) => {
    alert(JSON.stringify(values));
  }}
>
  {({ setFieldValue, values }) => {
    return (
      <Form className="flex flex-col ">
        <>
          <div className="my-4">
            <RhLabel>Select your plan</RhLabel>
            <div className="flex gap-4 mt-2">
              <RhCard
                onClick={() => setFieldValue("plan", "basic")}
                className={classNames(
                  "flex items-center justify-center px-6 py-2 font-extrabold cursor-pointer",
                  {
                    "bg-primary-500 text-white": values.plan == "basic",
                  }
                )}
              >
                BASIC
              </RhCard>
              <RhCard
                onClick={() => setFieldValue("plan", "pro")}
                className={classNames(
                  "flex items-center justify-center px-6 py-2 font-extrabold cursor-pointer",
                  {
                    "bg-primary-500 text-white": values.plan == "pro",
                  }
                )}
              >
                PRO
              </RhCard>
              <RhCard
                onClick={() => setFieldValue("plan", "pro+")}
                className={classNames(
                  "flex items-center justify-center px-6 py-2 font-extrabold cursor-pointer",
                  {
                    "bg-primary-500 text-white": values.plan == "pro+",
                  }
                )}
              >
                PRO+
              </RhCard>
            </div>
          </div>
        </>

        <div className="flex flex-col w-full gap-2 mt-2">
          <RhButton className="w-full" type="submit" size="xl">
            Select
          </RhButton>
        </div>
      </Form>
    );
  }}
</Formik>