Register

Usage

import React from "react";
import { Input, Button, Select } from "tawuniya";
import { Controller, useForm } from "react-hook-form";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

import styles from "../styles.module.css";

const schema = Yup.object().shape({
  name: Yup.string().required("Name is required").min(1, "Name is required"),
  username: Yup.string()
    .required("Username is required")
    .min(1, "Username is required"),
  email: Yup.string().email("Email is required").required("Email is required"),
  gender: Yup.string()
    .required("Please select an option")
    .min(1, "Please select an option"),
  password: Yup.string()
    .required("Password is required")
    .min(1, "Password is required"),
});

type LoginFormType = Yup.InferType<typeof schema>;

const RegisterForm = () => {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<LoginFormType>({
    resolver: yupResolver(schema as Yup.ObjectSchema<LoginFormType>),
    mode: "onChange",
  });

  const onSubmit = (data: LoginFormType) => {
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <div className={styles.container}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className={styles.grid}>
          <Input
            name="name"
            label="Name"
            register={register}
            size="lg"
            error={errors.name?.message}
          />
          <Input
            name="username"
            label="Username"
            register={register}
            size="lg"
            error={errors.username?.message}
          />
        </div>
        <div className={styles.grid}>
          <Input
            type="email"
            name="email"
            label="Email"
            register={register}
            size="lg"
            error={errors.email?.message}
          />
          <div className={styles.fieldItem}>
            <Select
              options={[
                {
                  value: "male",
                  label: "Male",
                },
                {
                  value: "female",
                  label: "Female",
                },
              ]}
              label="Gender"
              searchText="Search gender..."
              searchable
              form={{
                controller: Controller,
                control,
                name: "gender",
              }}
              size="lg"
              error={errors.gender?.message}
              className={styles.wFull}
            />
          </div>
        </div>
        <Input
          type="password"
          name="password"
          label="Password"
          register={register}
          size="lg"
          error={errors.password?.message}
        />
        <Button type="submit" size="lg">
          Register
        </Button>
      </form>
    </div>
  );
};

export default RegisterForm;
Usage​

Usage
