Form

A powerful, accessible, and structured form wrapper built on top of react-hook-form and @manhphi1309/field. This package provides an elegant way to bind your UI components to form state while automatically handling accessible labels, descriptions, and error messages.

Subcomponents

• FormWrapper - The primary component that wraps your input fields and binds them to react-hook-form.
• FormWrapperSkeleton - A loading skeleton fallback for the form wrapper.

Dependencies

• react-hook-form
• @manhphi1309/field
• @manhphi1309/skeleton
• @manhphi1309/utils

Installation

npm install @manhphi1309/form

Usage Example

import { useForm } from "react-hook-form"
import { FormWrapper } from "@manhphi1309/form"
import { Input } from "@manhphi1309/input"
import { Button } from "@manhphi1309/button"

export function ProfileForm() {
  const form = useForm({
    defaultValues: {
      username: "",
    },
  })

  function onSubmit(data) {
    console.log(data)
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
      <FormWrapper
        form={form}
        name="username"
        label="Username"
        description="This is your public display name."
        isRequired
        render={({ field }) => (
          <Input placeholder="Enter your username" {...field} />
        )}
      />
      <Button type="submit">Submit</Button>
    </form>
  )
}