Rafty UI + React Hook Form

This example shows how to build a simple form with Rafty UI's form components and the React Hook Form form library:

import { useForm } from "react-hook-form";
import {
  FieldControl,
  Label,
  InputField,
  ErrorMessage,
  Button,
} from "@rafty/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod";

const schema = z.object({
  name: z.string().min(4).max(50),
});

export default function HookForm() {
  const {
    handleSubmit,
    register,
    reset,
    formState: { errors, isSubmitting },
  } = useForm <
  z.infer <
  typeof schema >>
    {
      resolver: zodResolver(schema),
    };

  return (
    <form
      onSubmit={handleSubmit((values) => console.log(values))}
      className="space-y-2"
    >
      <FieldControl name="name" isRequired>
        <Label>Name</Label>
        <InputField placeholder="Enter your Name" {...register("name")} />
        <ErrorMessage>{errors.name?.message}</ErrorMessage>
      </FieldControl>
      <div className="flex justify-between">
        <Button type="button" variant="outline" onClick={() => reset()}>
          Reset
        </Button>
        <Button type="submit" colorScheme="primary" isLoading={isSubmitting}>
          Submit
        </Button>
      </div>
    </form>
  );
}