Vui Starter
npm

Form

Form wires React Hook Form to accessible fields, labels, and validation messages.

This is your public display name.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/form.

Usage

A thin wrapper over React Hook Form. FormField wires each control to the form; FormMessage renders the field error.

form-demo.tsx
import { useForm } from "react-hook-form";
import {
  Form, FormField, FormItem, FormLabel, FormControl,
  FormDescription, FormMessage,
} from "@viliha/vui-ui/form";
import { Input } from "@viliha/vui-ui/input";
import { Button } from "@viliha/vui-ui/button";

export function Example() {
  const form = useForm({ defaultValues: { username: "" } });
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)}>
        <FormField
          control={form.control}
          name="username"
          rules={{ required: "Username is required" }}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="viliha" {...field} />
              </FormControl>
              <FormDescription>Your public display name.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

Validation

Use RHF rules (shown here) or plug in a schema resolver like zod via @hookform/resolvers; both are consumer-side; the package only depends on react-hook-form.