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
`FileUploadMultipleField`	Multiple-file upload	View
`ComboBoxField`	Searchable dropdown	View
`PrivacyAgreementField`	Privacy policy checkbox	View
`SignatureField`	Statement-of-truth attestation	View

Action Components

Component	Description	Storybook
`Button`	Primary/secondary action button	View
`ButtonPair`	Paired primary/secondary buttons	View

Component	Description	Storybook
`NavigationButtons`	Back/Continue/Submit controls for wizards	View

Feedback Components

Component	Description	Storybook
`Alert`	Status alert (info/success/warning/error)	View
`AdditionalInfo`	Progressive-disclosure trigger + content	View

Structure Components

Component	Description	Storybook
`Accordion`	Collapsible sections container	View
`AccordionItem`	A single collapsible section	View
`SegmentedProgressBar`	Multi-step progress indicator	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
`ReviewField`	Labeled value with empty-state	View
`ReviewFullNameField`	Formatted full name	View
`ReviewAddressField`	Formatted multi-line address	View
`ReviewDateField`	Formatted date value	View

Form Components

The composable Form primitives connect field components to React Hook Form, following the shadcn/ui pattern. See the Form primitives story .

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

Field Layout Primitives

Unstyled, control-agnostic layout primitives for arranging labels, controls, descriptions, and errors. See the Field primitives story .

Component	Description
`Field`	Field container (vertical or horizontal)
`FieldGroup`	Stacks multiple `Field`s
`FieldSet`	Fieldset for grouping related controls
`FieldLegend`	Legend for a `FieldSet`
`FieldLabel`	Label element for a control
`FieldContent`	Content wrapper for horizontal layouts
`FieldTitle`	Title within `FieldContent`
`FieldDescription`	Help text for a field
`FieldError`	Validation error(s) from React Hook Form
`FieldSeparator`	Visual separator between sections

Branding

Component	Description	Storybook
`Logo`	FormKit Gov brand mark (SVG)	View

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