Basic

Basic Login Form

To craft a basic form, start by creating your form schema

import { z } from 'zod';

const loginSchema = z.object({
  username: z.string().email({ message: 'Invalid username' }),
  password: z.string().min(1, { message: 'Password is required' }),
  remember: z.boolean(),
});

Define the schema type:

type Login = z.infer<typeof loginSchema>;

Create form and import SubmitHandler from react-hook-form

import { SubmitHandler } from 'react-hook-form';

export default function SignInForm() {
  const onSubmit: SubmitHandler<Login> = (data) => {
    console.log(data);
  };

  return (
    <Form<Login> // schema type
      validationSchema={loginSchema}
      resetValues={reset}
      onSubmit={onSubmit}
    >
      {({ register, formState: { errors } }) => (
        <div className="space-y-5">
          <Input
            type="email"
            size="lg"
            label="Email"
            placeholder="Enter your email"
            color="info"
            className="[&>label>span]:font-medium"
            inputClassName="text-sm"
            {...register('username')}
            error={errors.username?.message}
          />
          <Password
            label="Password"
            placeholder="Enter your password"
            size="lg"
            className="[&>label>span]:font-medium"
            inputClassName="text-sm"
            color="info"
            {...register('password')}
            error={errors.password?.message}
          />
          <Button className="w-full" type="submit" size="lg" color="info">
            <span>Sign in</span>{' '}
            <PiArrowRightBold className="ms-2 mt-0.5 h-6 w-6" />
          </Button>
        </div>
      )}
    </Form>
  );
}

This sets you up with a basic login form structure using react-hook-form and zod for schema validation.