Components

FormKit Gov provides React components that wrap VA Design System web components with React Hook Form integration.

Field Components

Component	Description	Storybook
`TextInputField`	Single-line text input	View
`TextareaField`	Multi-line text input	View
`SelectField`	Dropdown selection	View
`CheckboxField`	Single checkbox	View
`CheckboxGroupField`	Multiple checkboxes	View
`RadioField`	Radio button group	View
`DateField`	Date picker (month/day/year)	View
`MemorableDateField`	Memorable date with dropdowns	View
`NumberField`	Numeric input	View
`CurrencyField`	Currency input with formatting	View
`PhoneField`	Phone number with formatting	View
`SSNField`	Social Security Number with masking	View
`FileUploadField`	File upload with validation	View
`ComboBoxField`	Searchable dropdown	View
`PrivacyAgreementField`	Privacy policy checkbox	View

Molecular Components

Component	Description	Storybook
`FullNameField`	First, middle, last, suffix	View
`AddressField`	Complete address form	View

Review Components

Component	Description	Storybook
`ReviewSection`	Section with edit button	View
`ReviewItem`	Single field display	View
`ReviewList`	List of review items	View

Form Components

Component	Description
`Form`	Form wrapper with React Hook Form
`FormField`	Field controller wrapper
`FormItem`	Field container
`FormLabel`	Field label
`FormControl`	Input wrapper
`FormDescription`	Help text
`FormMessage`	Error message

Usage Example


import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Form, FormField } from '@formkit-gov/react';
import { TextInputField } from '@formkit-gov/react/components';
import { createEmailSchema } from '@formkit-gov/core/schemas';
 
const schema = z.object({
  email: createEmailSchema(),
});
 
function EmailForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: '' },
  });
 
  return (
    <Form form={form} onSubmit={data => console.log(data)}>
      <FormField
        control={form.control}
        name="email"
        render={({ field, fieldState }) => (
          <TextInputField
            {...field}
            label="Email address"
            type="email"
            error={fieldState.error?.message}
            required
          />
        )}
      />
      <va-button type="submit">Submit</va-button>
    </Form>
  );
}

For interactive examples, visit Storybook . See the complete form example for a full integration demo.

Next Steps

See @formkit-gov/react for complete API reference
Explore Patterns for form implementations
View Validation for Zod schema integration