vForms

Schema-driven form primitives. Zod schema as source of truth — field types inferred, validation wired, accessibility baked in. Built on react-hook-form + vUi.

Install

npm install @booga/vforms

Usage

import { z } from 'zod'
import { Form, Field, Submit, Reset } from '@booga/vforms'

const schema = z.object({
  email: z.string().email(),
  role: z.enum(['admin', 'user']),
  active: z.boolean(),
})

function MyForm() {
  return (
    <Form schema={schema} onSubmit={console.log} defaultValues={{ active: true }}>
      <Field name="email" label="Email" />
      <Field name="role" label="Role" />
      <Field name="active" label="Active" />
      <Submit />
      <Reset />
    </Form>
  )
}

Field dispatch

Zod type	Rendered primitive
z.string()	<input type="text">
z.number()	<input type="number">
z.boolean()	<button role="switch">
z.enum() / z.nativeEnum()	<select>
z.date()	<input type="date">

Wrappers (optional, nullable, default, refine, transform, pipe, brand, catch) are recursively stripped — the inner type drives dispatch.

Custom field override

<Field name="bio" as={MyCustomInput} multiline />

Custom components receive ControlledFieldProps: value, onChange, onBlur, name, id, aria-invalid, aria-describedby.

Config schema

import { VFormsConfigSchema } from '@booga/vforms'

VFormsConfigSchema.parse({
  validationMode: 'onChange',  // 'onSubmit' | 'onChange' | 'onBlur'
  resetOnSuccess: true,
})

Layout helpers

FieldGroup — <fieldset> with optional legend, groups related fields semantically. FieldRow — horizontal flex container for side-by-side fields.

Primitives (direct use)

InputField, TextareaField, SelectField, SwitchField, CheckboxField, RadioGroupField, DatePickerField — all exported for custom form layouts outside the Field dispatcher.

Code of Conduct

Contributor Covenant 2.1