FormKit Gov

Production-grade form system for government applications

Built on VA Design System, React Hook Form, and Zod

Home • Documentation • Storybook • Next.js Demo • Vite Demo • Contributing

---

Features

• VA Design System Integration - Pre-built components wrapping @department-of-veterans-affairs/component-library
• Type-Safe Forms - Full TypeScript support with Zod schema validation
• React Hook Form - Seamless integration with the most popular React form library
• OpenAPI Schema Federation - Generate Zod schemas from your backend's OpenAPI specification
• Multi-Step Wizards - Built-in support for complex multi-page forms with save-in-progress
• Pluggable State Management - Works with sessionStorage, Zustand, Redux, or TanStack Query
• Accessibility First - WCAG 2.1 AA compliant, tested with axe-core
• Framework Agnostic Core - Use with Next.js, Vite, Remix, or any React application

Packages

Package	Description	Version
@formkit-gov/core	Zod schemas, validation utilities, regex patterns
@formkit-gov/react	React components with React Hook Form integration
@formkit-gov/store	Pluggable state management with persistence
@formkit-gov/wizard	Multi-step form orchestration
@formkit-gov/openapi	OpenAPI to Zod schema generation
@formkit-gov/validators	Extended government-specific validators
@formkit-gov/test-utils	Testing utilities for forms

Quick Start

Installation

npm install @formkit-gov/react @formkit-gov/core zod react-hook-form @hookform/resolvers
npm install @department-of-veterans-affairs/component-library

Basic Usage

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Form, FormField, TextInputField, PhoneField } from '@formkit-gov/react';
import { createEmailSchema, createPhoneSchema } from '@formkit-gov/core';

const schema = z.object({
  email: createEmailSchema(),
  phone: createPhoneSchema(),
});

function ContactForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: '', phone: '' },
  });

  return (
    <Form form={form} onSubmit={data => console.log(data)}>
      <FormField
        control={form.control}
        name="email"
        render={({ field, fieldState }) => (
          <TextInputField {...field} label="Email" error={fieldState.error?.message} required />
        )}
      />
      <FormField
        control={form.control}
        name="phone"
        render={({ field, fieldState }) => (
          <PhoneField {...field} label="Phone" error={fieldState.error?.message} />
        )}
      />
      <va-button type="submit">Submit</va-button>
    </Form>
  );
}

See the documentation for more examples.

Documentation

Visit docs.formkit-gov.org for full documentation:

• Getting Started
• Components
• Validation
• Form Patterns

Package Documentation

• @formkit-gov/core - Schemas, validators, patterns
• @formkit-gov/react - React components

Browser Support

FormKit Gov supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

We welcome contributions! Please read our Contributing Guide to get started.

# Clone the repo
git clone https://github.com/LinnJS/formkit-gov.git

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Start development
pnpm dev

License

MIT © FormKit Gov Contributors

Acknowledgments

• VA Design System - For the excellent component library
• React Hook Form - For the flexible form library
• Zod - For the TypeScript-first schema validation
• shadcn/ui - For the composable form component pattern