@formkit-gov/react

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  TextInputField,
} from '@formkit-gov/react';
 
const schema = z.object({
  firstName: z.string().min(1, 'First name is required'),
  email: z.string().email('Enter a valid email address'),
});
 
type FormData = z.infer<typeof schema>;
 
function MyForm() {
  const form = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: { firstName: '', email: '' },
  });
 
  return (
    <Form form={form} onSubmit={data => console.log(data)}>
      <FormField
        control={form.control}
        name="firstName"
        render={({ field }) => (
          <FormItem>
            <FormLabel>First name</FormLabel>
            <FormControl>
              <TextInputField {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
 
      <FormField
        control={form.control}
        name="email"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <TextInputField type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
 
      <button type="submit">Submit</button>
    </Form>
  );
}

import { useState } from 'react';
import { TextInputField, SelectField, CheckboxField } from '@formkit-gov/react';
 
function StandaloneFields() {
  const [firstName, setFirstName] = useState('');
  const [state, setState] = useState('');
  const [agreed, setAgreed] = useState(false);
 
  return (
    <div>
      <TextInputField
        label="First name"
        value={firstName}
        onChange={e => setFirstName(e.target.value)}
        error={firstName ? undefined : 'This field is required'}
        required
      />
 
      <SelectField
        label="State"
        value={state}
        onChange={e => setState(e.target.value)}
        options={[
          { value: 'CA', label: 'California' },
          { value: 'TX', label: 'Texas' },
        ]}
      />
 
      <CheckboxField
        label="I agree to the terms"
        checked={agreed}
        onChange={e => setAgreed(e.target.checked)}
      />
    </div>
  );
}

import { useState } from 'react';
import { FullNameField } from '@formkit-gov/react';
 
function NameForm() {
  const [name, setName] = useState({ first: '', middle: '', last: '', suffix: '' });
 
  return (
    <FullNameField
      value={name}
      onChange={setName}
      config={{
        middle: { show: true },
        suffix: { show: true },
      }}
    />
  );
}

import { useState } from 'react';
import { AddressField } from '@formkit-gov/react';
 
function AddressForm() {
  const [address, setAddress] = useState({
    street: '',
    street2: '',
    city: '',
    state: '',
    zipCode: '',
  });
 
  return <AddressField value={address} onChange={setAddress} />;
}

import { ReviewSection, ReviewItem, ReviewList } from '@formkit-gov/react';
 
function ReviewPage({ onEditStep }: { onEditStep: (step: number) => void }) {
  return (
    <div>
      <ReviewSection title="Personal Information" onEdit={() => onEditStep(1)}>
        <ReviewItem label="Name" value="John Doe" />
        <ReviewItem label="Email" value="john@example.com" />
      </ReviewSection>
 
      <ReviewSection title="Address" onEdit={() => onEditStep(2)}>
        <ReviewList
          items={[
            { label: 'Street', value: '123 Main St' },
            { label: 'City', value: 'San Francisco' },
            { label: 'State', value: 'CA' },
          ]}
        />
      </ReviewSection>
    </div>
  );
}

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, PhoneField } from '@formkit-gov/react/components';
import { createTextSchema, createPhoneSchema } from '@formkit-gov/core/schemas';
 
const schema = z.object({
  name: createTextSchema({ required: true, maxLength: 100 }),
  phone: createPhoneSchema(),
});
 
function ContactForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { name: '', phone: '' },
  });
 
  return (
    <Form form={form} onSubmit={data => console.log(data)}>
      <FormField
        control={form.control}
        name="name"
        render={({ field, fieldState }) => (
          <TextInputField {...field} label="Your name" error={fieldState.error?.message} required />
        )}
      />
      <FormField
        control={form.control}
        name="phone"
        render={({ field, fieldState }) => (
          <PhoneField {...field} label="Phone number" error={fieldState.error?.message} />
        )}
      />
      <va-button type="submit">Submit</va-button>
    </Form>
  );
}