diff --git a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
index 10345415..10b31f63 100644
--- a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
+++ b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
@@ -31,8 +31,8 @@ export default {
 
 export const FormEditTest: StoryObj<typeof FormEdit> = {
   play: async ({ canvasElement }) => {
-    await editFieldLabel(canvasElement, 'Pattern 1', 'First field label');
-    await editFieldLabel(canvasElement, 'Pattern 2', 'Second field label');
+    await editFieldLabel(canvasElement, 'Pattern 1', 'Pattern 1 (updated)');
+    await editFieldLabel(canvasElement, 'Pattern 2', 'Pattern 2 (updated)');
   },
 };
 
@@ -51,6 +51,31 @@ export const FormEditAddPattern: StoryObj<typeof FormEdit> = {
   },
 };
 
+const editFieldLabel = async (
+  element: HTMLElement,
+  currentLabel: string,
+  updatedLabel: string
+) => {
+  const canvas = within(element);
+
+  // Give focus to the field matching `currentLabel`
+  await userEvent.click(await canvas.findByLabelText(currentLabel));
+
+  // Enter new text for first field
+  const input = canvas.getByLabelText('Field label');
+  await userEvent.clear(input);
+  await userEvent.type(input, updatedLabel);
+  await userEvent.click(canvas.getByLabelText('Add a pattern'));
+
+  waitFor(
+    async () => {
+      const newLabel = await canvas.getByLabelText(updatedLabel);
+      await expect(newLabel).toBeInTheDocument();
+    },
+    { interval: 5 }
+  );
+};
+
 // This test only works in a real browser, not via JSDOM as we use it.
 /*
 export const FormEditReorderPattern: StoryObj<typeof FormEdit> = {
@@ -81,27 +106,3 @@ export const FormEditReorderPattern: StoryObj<typeof FormEdit> = {
   },
 };
 */
-
-const editFieldLabel = async (
-  element: HTMLElement,
-  currentLabel: string,
-  updatedLabel: string
-) => {
-  const canvas = within(element);
-
-  // Give focus to the field matching `currentLabel`
-  await userEvent.click(await canvas.findByLabelText(currentLabel));
-
-  // Enter new text for first field
-  const input = canvas.getByLabelText('Field label');
-  await userEvent.clear(input);
-  await userEvent.type(input, updatedLabel);
-
-  waitFor(
-    async () => {
-      const newLabel = await canvas.getByLabelText(updatedLabel);
-      await expect(newLabel).toBeInTheDocument();
-    },
-    { interval: 5 }
-  );
-};
diff --git a/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx b/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx
index 7b109534..82595a34 100644
--- a/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx
+++ b/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx
@@ -7,8 +7,13 @@ export const PreviewPattern: PatternComponent = function PreviewPattern(props) {
   const { context, setFocus } = useFormManagerStore(state => ({
     context: state.context,
     setFocus: state.setFocus,
-    updatePatternById: state.updatePatternById,
   }));
+  const focus = useFormManagerStore(state => {
+    if (state.focus?.pattern.id === props._patternId) {
+      return state.focus;
+    }
+  });
+
   const EditComponent = context.editComponents[props.type];
 
   return (
@@ -26,7 +31,7 @@ export const PreviewPattern: PatternComponent = function PreviewPattern(props) {
         }
       }}
     >
-      <EditComponent context={context} previewProps={props} />
+      <EditComponent context={context} previewProps={props} focus={focus} />
     </div>
   );
 };
diff --git a/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx
index 939b0c25..7905b3bc 100644
--- a/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx
@@ -1,32 +1,30 @@
+import classnames from 'classnames';
 import React from 'react';
 
 import { type CheckboxProps, type PatternId } from '@atj/forms';
+import { type CheckboxPattern } from '@atj/forms/src/patterns/checkbox';
 
 import Checkbox from '../../../Form/components/Checkbox';
 import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
-import {
-  PatternEditForm,
-  usePatternEditFormContext,
-} from './common/PatternEditForm';
+import { PatternEditForm } from './common/PatternEditForm';
+import { usePatternEditFormContext } from './common/hooks';
 
-const CheckboxPatternEdit: PatternEditComponent<CheckboxProps> = props => {
-  const isSelected = useFormManagerStore(
-    state => state.focusedPattern?.id === props.previewProps._patternId
-  );
+const CheckboxPatternEdit: PatternEditComponent<CheckboxProps> = ({
+  focus,
+  previewProps,
+}) => {
   return (
     <>
-      {isSelected ? (
+      {focus ? (
         <PatternEditForm
-          patternId={props.previewProps._patternId}
-          editComponent={
-            <CheckboxEditComponent patternId={props.previewProps._patternId} />
-          }
+          pattern={focus.pattern}
+          editComponent={<CheckboxEditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <Checkbox {...props.previewProps} />
+        <Checkbox {...previewProps} />
       )}
     </>
   );
@@ -34,57 +32,53 @@ const CheckboxPatternEdit: PatternEditComponent<CheckboxProps> = props => {
 
 const CheckboxEditComponent = ({ patternId }: { patternId: PatternId }) => {
   const pattern = useFormManagerStore(state => state.form.patterns[patternId]);
-  const methods = usePatternEditFormContext();
+  const { fieldId, getFieldState, register } =
+    usePatternEditFormContext<CheckboxPattern>(patternId);
+
+  const label = getFieldState('label');
 
   return (
     <div className="grid-row grid-gap">
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
-        <label className="usa-label" htmlFor={`${pattern.id}.data.label`}>
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': label.error,
+          })}
+          htmlFor={fieldId('label')}
+        >
           Field label
         </label>
+        {label.error ? (
+          <span className="usa-error-message" role="alert">
+            {label.error.message}
+          </span>
+        ) : null}
         <input
           className="usa-input"
-          id={`${pattern.id}.data.label`}
-          defaultValue={`${pattern.id}`}
-          {...methods.register(`${pattern.id}.data.label`)}
+          id={fieldId('label')}
+          defaultValue={pattern.data.label}
+          {...register('label')}
           type="text"
         ></input>
       </div>
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
         <div className="usa-checkbox">
           <input
-            id={`${pattern.id}.data.defaultChecked`}
+            id={fieldId('defaultChecked')}
             type="checkbox"
-            {...methods.register(`${pattern.id}.data.defaultChecked`)}
+            {...register('defaultChecked')}
             className="usa-checkbox__input"
           />
           <label
             className="usa-checkbox__label"
-            htmlFor={`${pattern.id}.data.defaultChecked`}
+            htmlFor={fieldId('defaultChecked')}
           >
             Default field value
           </label>
         </div>
       </div>
       <div className="grid-col-12">
-        <PatternEditActions>
-          <span className="usa-checkbox">
-            <input
-              style={{ display: 'inline-block' }}
-              className="usa-checkbox__input"
-              type="checkbox"
-              id={`${pattern.id}.data.required`}
-              {...methods.register(`${pattern.id}.data.required`)}
-            />
-            <label
-              style={{ display: 'inline-block' }}
-              className="usa-checkbox__label"
-              htmlFor={`${pattern.id}.data.required`}
-            >
-              Required
-            </label>
-          </span>
-        </PatternEditActions>
+        <PatternEditActions />
       </div>
     </div>
   );
diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
index 4a651f13..4665fe2e 100644
--- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -7,26 +7,23 @@ import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
-import {
-  PatternEditForm,
-  usePatternEditFormContext,
-} from './common/PatternEditForm';
+import { PatternEditForm } from './common/PatternEditForm';
+import { usePatternEditFormContext } from './common/hooks';
+import { FieldsetPattern } from '@atj/forms/src/patterns/fieldset';
 
-const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
-  const isSelected = useFormManagerStore(
-    state => state.focusedPattern?.id === props.previewProps._patternId
-  );
+const FieldsetEdit: PatternEditComponent<FieldsetProps> = ({
+  focus,
+  previewProps,
+}) => {
   return (
     <>
-      {isSelected ? (
+      {focus ? (
         <PatternEditForm
-          patternId={props.previewProps._patternId}
-          editComponent={
-            <EditComponent patternId={props.previewProps._patternId} />
-          }
+          pattern={focus.pattern}
+          editComponent={<EditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <FieldsetPreview {...props.previewProps} />
+        <FieldsetPreview {...previewProps} />
       )}
     </>
   );
@@ -39,38 +36,42 @@ const FieldsetPreview = (props: FieldsetProps) => {
   return (
     <>
       <Fieldset {...(props as FieldsetProps)}>
-        {pattern && pattern.data.patterns.length === 0 &&
+        {pattern && pattern.data.patterns.length === 0 && (
           <div className="usa-alert usa-alert--warning usa-alert--no-icon margin-bottom-3">
             <div className="usa-alert__body">
               <p className="usa-alert__text">
-                <span className="alert-text display-inline-block text-top margin-right-2">Empty sections will not display.</span>
+                <span className="alert-text display-inline-block text-top margin-right-2">
+                  Empty sections will not display.
+                </span>
                 <span className="action-text add-question display-inline-block margin-right-2">
-                  <a className="usa-link" href="#">Add question</a>
+                  <a className="usa-link" href="#">
+                    Add question
+                  </a>
                 </span>
                 <span className="action-text remove-section display-inline-block text-top margin-right-2">
-                  <a className="usa-link" href="#">Remove section</a>
+                  <a className="usa-link" href="#">
+                    Remove section
+                  </a>
                 </span>
               </p>
             </div>
           </div>
-        }
+        )}
       </Fieldset>
-
     </>
   );
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const { register } = usePatternEditFormContext();
+  const { register } = usePatternEditFormContext<FieldsetPattern>(patternId);
   return (
-
     <div className="grid-row edit-component-panel">
       <div className="grid-col-12 margin-bottom-3 flex-align-self-end">
         <label className="usa-label width-full maxw-full">
           Legend Text Element
           <input
             className="usa-input bg-primary-lighter text-bold"
-            {...register(`${patternId}.data.legend`)}
+            {...register('legend')}
             type="text"
           ></input>
         </label>
@@ -81,4 +82,4 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   );
 };
 
-export default FieldsetEdit;
\ No newline at end of file
+export default FieldsetEdit;
diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
index 1f0d2c99..6cf5a887 100644
--- a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -3,36 +3,31 @@ import React from 'react';
 import { type FormSummaryProps, type PatternId } from '@atj/forms';
 
 import FormSummary from '../../../Form/components/FormSummary';
-import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
-import {
-  PatternEditForm,
-  usePatternEditFormContext,
-} from './common/PatternEditForm';
+import { PatternEditForm } from './common/PatternEditForm';
+import { usePatternEditFormContext } from './common/hooks';
 
-const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = props => {
-  const isSelected = useFormManagerStore(
-    state => state.focusedPattern?.id === props.previewProps._patternId
-  );
+const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = ({
+  focus,
+  previewProps,
+}) => {
   return (
     <>
-      {isSelected ? (
+      {focus ? (
         <PatternEditForm
-          patternId={props.previewProps._patternId}
-          editComponent={
-            <EditComponent patternId={props.previewProps._patternId} />
-          }
+          pattern={focus.pattern}
+          editComponent={<EditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <FormSummary {...props.previewProps} />
+        <FormSummary {...previewProps} />
       )}
     </>
   );
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const { register } = usePatternEditFormContext();
+  const { register } = usePatternEditFormContext(patternId);
   return (
     <div className="grid-row grid-gap-1 edit-component-panel">
       <div className="desktop:grid-col-4 mobile:grid-col-12">
@@ -40,7 +35,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           Title
           <input
             className="usa-input bg-primary-lighter text-bold"
-            {...register(`${patternId}.data.title`)}
+            {...register('title')}
             type="text"
           ></input>
         </label>
@@ -50,7 +45,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           Description
           <textarea
             className="usa-textarea bg-primary-lighter text-bold"
-            {...register(`${patternId}.data.description`)}
+            {...register('description')}
           ></textarea>
         </label>
       </div>
diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
index f8b7a11a..f34f7a6b 100644
--- a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
@@ -1,89 +1,104 @@
+import classnames from 'classnames';
 import React from 'react';
 
 import { PatternId, TextInputProps } from '@atj/forms';
+import { InputPattern } from '@atj/forms/src/patterns/input';
 
 import TextInput from '../../../Form/components/TextInput';
 import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
-import {
-  PatternEditForm,
-  usePatternEditFormContext,
-} from './common/PatternEditForm';
+import { PatternEditForm } from './common/PatternEditForm';
+import { usePatternEditFormContext } from './common/hooks';
 
-const InputPatternEdit: PatternEditComponent<TextInputProps> = props => {
-  const isSelected = useFormManagerStore(
-    state => state.focusedPattern?.id === props.previewProps._patternId
-  );
+const InputPatternEdit: PatternEditComponent<TextInputProps> = ({
+  focus,
+  previewProps,
+}) => {
   return (
     <>
-      {isSelected ? (
+      {focus ? (
         <PatternEditForm
-          patternId={props.previewProps._patternId}
-          editComponent={
-            <EditComponent patternId={props.previewProps._patternId} />
-          }
+          pattern={focus.pattern}
+          editComponent={<EditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <TextInput {...props.previewProps} />
+        <TextInput {...previewProps} />
       )}
     </>
   );
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const pattern = useFormManagerStore(state => state.form.patterns[patternId]);
+  const pattern = useFormManagerStore<InputPattern>(
+    state => state.form.patterns[patternId]
+  );
+  const { fieldId, register, getFieldState } =
+    usePatternEditFormContext<InputPattern>(patternId);
+
+  const initial = getFieldState('initial');
+  const label = getFieldState('label');
+  const maxLength = getFieldState('maxLength');
 
-  const methods = usePatternEditFormContext();
   return (
     <div className="grid-row grid-gap-1 edit-component-panel">
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
-        <label className="usa-label" htmlFor={`${pattern.id}.data.label`}>
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': label.error,
+          })}
+          htmlFor={fieldId('label')}
+        >
           Field label
         </label>
+        {label.error ? (
+          <span className="usa-error-message" role="alert">
+            {label.error.message}
+          </span>
+        ) : null}
         <input
-          className="usa-input bg-primary-lighter text-bold"
-          id={`${pattern.id}.data.label`}
-          defaultValue={`${pattern.id}`}
-          {...methods.register(`${pattern.id}.data.label`)}
+          className={classnames('usa-input bg-primary-lighter text-bold', {
+            'usa-input--error': label.error,
+          })}
+          id={fieldId('label')}
+          defaultValue={pattern.data.label}
+          {...register('label')}
           type="text"
         ></input>
       </div>
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
-        <label className="usa-label" htmlFor={`${pattern.id}.data.default`}>
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': initial.error,
+          })}
+          htmlFor={fieldId('initial')}
+        >
           Default field value
         </label>
         <input
           className="usa-input bg-primary-lighter text-bold"
-          id={`${pattern.id}.data.default`}
+          id={fieldId('initial')}
           type="text"
-          {...methods.register(`${pattern.id}.data.default`)}
+          {...register('initial')}
         ></input>
       </div>
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
-        <label className="usa-label" htmlFor={`${pattern.id}.data.maxLength`}>
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': maxLength.error,
+          })}
+          htmlFor={fieldId('maxLength')}
+        >
           Maximum length
         </label>
         <input
           className="usa-input bg-primary-lighter text-bold"
-          id={`${pattern.id}.data.maxLength`}
+          id={fieldId('maxLength')}
           type="text"
-          {...methods.register(`${pattern.id}.data.maxLength`)}
+          {...register('maxLength')}
         ></input>
       </div>
-      <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
-        <label className="usa-label" htmlFor={`${pattern.id}.type`}>
-          Field type
-        </label>
-        <select
-          className="usa-select bg-primary-lighter text-bold"
-          {...methods.register(`${pattern.id}.type`)}
-          id={`${pattern.id}.type`}
-        >
-          <option value={'input'}>Input</option>
-        </select>
-      </div>
       <div className="grid-col-12">
         <PatternEditActions>
           <span className="usa-checkbox">
@@ -91,13 +106,13 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
               style={{ display: 'inline-block' }}
               className="usa-checkbox__input bg-primary-lighter"
               type="checkbox"
-              id={`${pattern.id}.data.required`}
-              {...methods.register(`${pattern.id}.data.required`)}
+              id={fieldId('required')}
+              {...register('required')}
             />
             <label
               style={{ display: 'inline-block' }}
               className="usa-checkbox__label"
-              htmlFor={`${pattern.id}.data.required`}
+              htmlFor={fieldId('required')}
             >
               Required
             </label>
diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
index 968349a3..9cc62b01 100644
--- a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
@@ -1,61 +1,67 @@
+import classnames from 'classnames';
 import React from 'react';
 
 import { PatternId, type ParagraphProps } from '@atj/forms';
+import { type ParagraphPattern } from '@atj/forms/src/patterns/paragraph';
 
 import Paragraph from '../../../Form/components/Paragraph';
-import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
-import {
-  PatternEditForm,
-  usePatternEditFormContext,
-} from './common/PatternEditForm';
+import { PatternEditForm } from './common/PatternEditForm';
+import { usePatternEditFormContext } from './common/hooks';
+import { useFormManagerStore } from '../../store';
 
-const ParagraphPatternEdit: PatternEditComponent<ParagraphProps> = props => {
-  const isSelected = useFormManagerStore(
-    state => state.focusedPattern?.id === props.previewProps._patternId
-  );
+const ParagraphPatternEdit: PatternEditComponent<ParagraphProps> = ({
+  focus,
+  previewProps,
+}) => {
   return (
     <>
-      {isSelected ? (
+      {focus ? (
         <PatternEditForm
-          patternId={props.previewProps._patternId}
-          editComponent={
-            <EditComponent patternId={props.previewProps._patternId} />
-          }
+          pattern={focus.pattern}
+          editComponent={<EditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <Paragraph {...props.previewProps} />
+        <Paragraph {...previewProps} />
       )}
     </>
   );
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const { register } = usePatternEditFormContext();
+  const pattern = useFormManagerStore<ParagraphPattern>(
+    state => state.form.patterns[patternId]
+  );
+  const { fieldId, getFieldState, register } =
+    usePatternEditFormContext<ParagraphPattern>(patternId);
+  const text = getFieldState('text');
+
   return (
     <div className="grid-row grid-gap-1 edit-component-panel">
-      <div className="desktop:grid-col-9 mobile:grid-col-12 flex-align-self-end">
-        <label className="usa-label">
-          Text Element
-          <input
-            className="usa-input bg-primary-lighter text-bold"
-            {...register(`${patternId}.data.text`)}
-            type="text"
-          ></input>
-        </label>
-      </div>
-      <div className="desktop:grid-col-3 mobile:grid-col-12 flex-align-self-end">
-        <label className="usa-label">
-          <p className="usa-hint">Style</p>
-          <select className="usa-select bg-primary-lighter text-bold" {...register(`${patternId}.type`)}>
-            <option value={'paragraph'}>Question</option> {/* this is a stub */}
-            <option value={'paragraph'}>Title</option> {/* this is a stub */}
-            <option value={'paragraph'}>Instructions</option>{' '}
-            {/* this is a stub */}
-          </select>
+      <div className="tablet:grid-col-12">
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': text.error,
+          })}
+          htmlFor={fieldId('text')}
+        >
+          Paragraph text
         </label>
+        {text.error ? (
+          <span className="usa-error-message" role="alert">
+            {text.error.message}
+          </span>
+        ) : null}
+        <textarea
+          id={fieldId('text')}
+          className="usa-textarea bg-primary-lighter text-bold"
+          style={{ height: 'unset' }}
+          rows={4}
+          {...register('text')}
+          defaultValue={pattern.data.text}
+        ></textarea>
       </div>
       <PatternEditActions />
     </div>
diff --git a/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx
index 7be1bcf6..aa479fdb 100644
--- a/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx
@@ -1,74 +1,99 @@
+import classnames from 'classnames';
 import React, { useState } from 'react';
 
-import { type RadioGroupProps, type PatternId } from '@atj/forms';
+import { type RadioGroupProps } from '@atj/forms';
+import { type RadioGroupPattern } from '@atj/forms/src/patterns/radio-group';
 
 import RadioGroup from '../../../Form/components/RadioGroup';
-import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
-import {
-  PatternEditForm,
-  usePatternEditFormContext,
-} from './common/PatternEditForm';
-import { type RadioGroupPattern } from '@atj/forms/src/patterns/radio-group';
+import { PatternEditForm } from './common/PatternEditForm';
+import { usePatternEditFormContext } from './common/hooks';
 
-const RadioGroupPatternEdit: PatternEditComponent<RadioGroupProps> = props => {
-  const isSelected = useFormManagerStore(
-    state => state.focusedPattern?.id === props.previewProps._patternId
-  );
+const RadioGroupPatternEdit: PatternEditComponent<RadioGroupProps> = ({
+  focus,
+  previewProps,
+}) => {
   return (
     <>
-      {isSelected ? (
+      {focus ? (
         <PatternEditForm
-          patternId={props.previewProps._patternId}
-          editComponent={
-            <EditComponent patternId={props.previewProps._patternId} />
-          }
+          pattern={focus.pattern}
+          editComponent={<EditComponent pattern={focus.pattern} />}
         ></PatternEditForm>
       ) : (
-        <RadioGroup {...props.previewProps} />
+        <RadioGroup {...previewProps} />
       )}
     </>
   );
 };
 
-const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const pattern = useFormManagerStore(
-    state => state.form.patterns[patternId]
-  ) as RadioGroupPattern;
-  const methods = usePatternEditFormContext();
+const EditComponent = ({ pattern }: { pattern: RadioGroupPattern }) => {
+  const { fieldId, getFieldState, register } =
+    usePatternEditFormContext<RadioGroupPattern>(pattern.id);
   const [options, setOptions] = useState(pattern.data.options);
+  const label = getFieldState('label');
 
   return (
     <div className="grid-row grid-gap">
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
-        <label className="usa-label" htmlFor={`${pattern.id}.data.label`}>
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': label.error,
+          })}
+          htmlFor={fieldId('label')}
+        >
           Radio group label
         </label>
+        {label.error ? (
+          <span className="usa-error-message" role="alert">
+            {label.error.message}
+          </span>
+        ) : null}
         <input
           className="usa-input"
-          id={`${pattern.id}.data.label`}
-          defaultValue={`${pattern.id}`}
-          {...methods.register(`${pattern.id}.data.label`)}
+          id={fieldId('label')}
+          defaultValue={pattern.data.label}
+          {...register('label')}
           type="text"
         ></input>
       </div>
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
-        {options.map((option, index) => (
-          <div key={index} className="display-flex">
-            <input
-              className="usa-input"
-              id={`${pattern.id}.data.options.${index}.id`}
-              {...methods.register(`${pattern.id}.data.options.${index}.id`)}
-            />
-            <input
-              className="usa-input"
-              id={`${pattern.id}.data.options.${index}.label`}
-              {...methods.register(`${pattern.id}.data.options.${index}.label`)}
-            />
-          </div>
-        ))}
+        {options.map((option, index) => {
+          const optionId = getFieldState(`options.${index}.id`);
+          const optionLabel = getFieldState(`options.${index}.label`);
+          return (
+            <div key={index}>
+              {optionId.error ? (
+                <span className="usa-error-message" role="alert">
+                  {optionId.error.message}
+                </span>
+              ) : null}
+              {optionLabel.error ? (
+                <span className="usa-error-message" role="alert">
+                  {optionLabel.error.message}
+                </span>
+              ) : null}
+              <div className="display-flex">
+                <input
+                  className={classnames('usa-input', {
+                    'usa-label--error': label.error,
+                  })}
+                  id={fieldId(`options.${index}.id`)}
+                  {...register(`options.${index}.id`)}
+                  defaultValue={option.id}
+                />
+                <input
+                  className="usa-input"
+                  id={fieldId(`options.${index}.label`)}
+                  {...register(`options.${index}.label`)}
+                  defaultValue={option.label}
+                />
+              </div>
+            </div>
+          );
+        })}
         <button
           className="usa-button usa-button--outline"
           onClick={event => {
@@ -87,13 +112,13 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
               style={{ display: 'inline-block' }}
               className="usa-checkbox__input"
               type="checkbox"
-              id={`${pattern.id}.data.required`}
-              {...methods.register(`${pattern.id}.data.required`)}
+              id={fieldId('required')}
+              {...register('required')}
             />
             <label
               style={{ display: 'inline-block' }}
               className="usa-checkbox__label"
-              htmlFor={`${pattern.id}.data.required`}
+              htmlFor={fieldId('required')}
             >
               Required
             </label>
diff --git a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
index 44199ef4..22749d90 100644
--- a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
@@ -3,38 +3,30 @@ import React from 'react';
 import { type PatternId, SubmissionConfirmationProps } from '@atj/forms';
 
 import SubmissionConfirmation from '../../../Form/components/SubmissionConfirmation';
-import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
-import {
-  PatternEditForm,
-  usePatternEditFormContext,
-} from './common/PatternEditForm';
+import { PatternEditForm } from './common/PatternEditForm';
+import { usePatternEditFormContext } from './common/hooks';
 
 const SubmissionConfirmationEdit: PatternEditComponent<
   SubmissionConfirmationProps
-> = props => {
-  const isSelected = useFormManagerStore(
-    state => state.focusedPattern?.id === props.previewProps._patternId
-  );
+> = ({ focus, previewProps }) => {
   return (
     <>
-      {isSelected ? (
+      {focus ? (
         <PatternEditForm
-          patternId={props.previewProps._patternId}
-          editComponent={
-            <EditComponent patternId={props.previewProps._patternId} />
-          }
+          pattern={focus.pattern}
+          editComponent={<EditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <SubmissionConfirmation {...props.previewProps} />
+        <SubmissionConfirmation {...previewProps} />
       )}
     </>
   );
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const { register } = usePatternEditFormContext();
+  const { fieldId, register } = usePatternEditFormContext(patternId);
   return (
     <div className="grid-row grid-gap-1 edit-component-panel">
       <div className="desktop:grid-col-4 mobile:grid-col-12">
@@ -42,7 +34,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           Field label
           <input
             className="usa-input bg-primary-lighter text-bold"
-            {...register(`${patternId}.data.text`)}
+            {...register('text')}
             type="text"
           ></input>
         </label>
@@ -53,7 +45,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           <input
             className="usa-input bg-primary-lighter text-bold"
             type="text"
-            {...register(`${patternId}.data.initial`)}
+            {...register('initial')}
           ></input>
         </label>
       </div>
@@ -63,14 +55,17 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           <input
             className="usa-input bg-primary-lighter text-bold"
             type="text"
-            {...register(`${patternId}.data.maxLength`)}
+            {...register('maxLength')}
           ></input>
         </label>
       </div>
       <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Field type
-          <select className="usa-select bg-primary-lighter text-bold" {...register(`${patternId}.type`)}>
+          <select
+            className="usa-select bg-primary-lighter text-bold"
+            {...register('type')}
+          >
             <option value={'input'}>Input</option>
           </select>
         </label>
@@ -80,13 +75,10 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           <input
             className="usa-checkbox__input bg-primary-lighter"
             type="checkbox"
-            id={`${patternId}.required`}
-            {...register(`${patternId}.data.required`)}
+            id={fieldId('required')}
+            {...register('required')}
           />
-          <label
-            className="usa-checkbox__label"
-            htmlFor={`${patternId}.data.required`}
-          >
+          <label className="usa-checkbox__label" htmlFor={fieldId('required')}>
             Required
           </label>
         </div>
diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx
index c18832a3..889ae431 100644
--- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx
@@ -1,33 +1,44 @@
-import React from 'react';
-import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+import React, { useEffect } from 'react';
+import { type ErrorOption, FormProvider, useForm } from 'react-hook-form';
 
-import { type PatternId, type PatternMap } from '@atj/forms';
+import { type FormError, type Pattern, type PatternMap } from '@atj/forms';
 
 import { useFormManagerStore } from '../../../store';
 
 type PatternEditFormProps = {
-  patternId: PatternId;
+  pattern: Pattern;
   editComponent: React.ReactNode;
 };
 
 export const PatternEditForm = ({
-  patternId,
+  pattern,
   editComponent,
 }: PatternEditFormProps) => {
-  const { updatePatternById } = useFormManagerStore(state => ({
-    updatePatternById: state.updatePatternById,
-  }));
-  const pattern = useFormManagerStore(state => state.form.patterns[patternId]);
+  const updateActivePattern = useFormManagerStore(
+    state => state.updateActivePattern
+  );
+  const focus = useFormManagerStore(state => state.focus);
   const methods = useForm<PatternMap>({
     defaultValues: {
-      [patternId]: pattern,
+      [pattern.id]: pattern,
     },
   });
+
+  useEffect(() => {
+    methods.clearErrors();
+    Object.entries(focus?.errors || {}).forEach(([field, error]) => {
+      methods.setError(
+        `${focus?.pattern.id}.${field}`,
+        formErrorToReactHookFormError(error)
+      );
+    });
+  }, [focus]);
+
   return (
     <FormProvider {...methods}>
       <form
         onBlur={methods.handleSubmit(formData => {
-          updatePatternById(pattern.id, formData);
+          updateActivePattern(formData);
         })}
       >
         <div className="border-1 radius-md border-primary-light padding-1">
@@ -38,6 +49,16 @@ export const PatternEditForm = ({
   );
 };
 
-export const usePatternEditFormContext = () => {
-  return useFormContext<PatternMap>();
+const formErrorToReactHookFormError = (error: FormError): ErrorOption => {
+  if (error.type === 'required') {
+    return {
+      type: 'required',
+      message: error.message,
+    };
+  } else {
+    return {
+      type: 'custom',
+      message: error.message,
+    };
+  }
 };
diff --git a/packages/design/src/FormManager/FormEdit/components/common/hooks.ts b/packages/design/src/FormManager/FormEdit/components/common/hooks.ts
new file mode 100644
index 00000000..6a859709
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/components/common/hooks.ts
@@ -0,0 +1,28 @@
+import { useFormContext } from 'react-hook-form';
+
+import { type Pattern, type PatternId, type PatternMap } from '@atj/forms';
+
+type NestedKeys<T> = T extends object
+  ? {
+      [K in keyof T]-?: K extends string | number
+        ? T[K] extends Array<infer U>
+          ? U extends object
+            ? `${K & string}` | `${K & string}.${NestedKeys<U>}`
+            : `${K & string}`
+          : `${K & string}` | `${K & string}.${NestedKeys<T[K]>}`
+        : never;
+    }[keyof T]
+  : never;
+
+export const usePatternEditFormContext = <T extends Pattern>(
+  patternId: PatternId
+) => {
+  const { formState, getFieldState, register } = useFormContext<PatternMap>();
+  return {
+    errors: formState.errors,
+    fieldId: (path: NestedKeys<T['data']>) => `${patternId}.${path}`,
+    register: (path: NestedKeys<T['data']>) => register(`${patternId}.${path}`),
+    getFieldState: (path: NestedKeys<T['data']>) =>
+      getFieldState(`${patternId}.${path}`, formState),
+  };
+};
diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
index bfeebb7f..e5c9f027 100644
--- a/packages/design/src/FormManager/FormEdit/index.tsx
+++ b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
-import { Blueprint, createFormSession } from '@atj/forms';
+import { createFormSession } from '@atj/forms';
 
 import Form, {
   type ComponentForPattern,
@@ -12,24 +12,20 @@ import { PreviewPattern } from './PreviewPattern';
 import { PatternPreviewSequence } from './components/PreviewSequencePattern';
 import { useFormManagerStore } from '../store';
 
-export default function FormEdit({ formId }: { formId: string }) {
-  const saveForm = useFormManagerStore(state => state.saveForm);
+export default function FormEdit() {
   return (
     <>
       <h1>Edit form</h1>
       <p className="usa-intro">Your form has been imported for web delivery.</p>
-      <EditForm saveForm={form => saveForm(formId, form)} />
+      <EditForm />
     </>
   );
 }
 
-const EditForm = ({ saveForm }: { saveForm: (form: Blueprint) => void }) => {
+const EditForm = () => {
   const { form } = useFormManagerStore();
   const uiContext = useFormManagerStore(state => state.context);
   const disposable = createFormSession(form); // nullSession instead?
-  useEffect(() => {
-    saveForm(form);
-  }, [form]);
 
   return (
     <div className="position-relative edit-form-content-wrapper">
diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts
index 8fe8c742..e213958a 100644
--- a/packages/design/src/FormManager/FormEdit/store.ts
+++ b/packages/design/src/FormManager/FormEdit/store.ts
@@ -9,11 +9,12 @@ import {
   BlueprintBuilder,
 } from '@atj/forms';
 import { type FormManagerContext } from '..';
+import { type PatternFocus } from './types';
 
 export type FormEditSlice = {
   context: FormManagerContext;
   form: Blueprint;
-  focusedPattern?: Pattern;
+  focus?: PatternFocus;
   availablePatterns: {
     patternType: string;
     displayName: string;
@@ -21,11 +22,9 @@ export type FormEditSlice = {
 
   addPattern: (patternType: string) => void;
   deleteSelectedPattern: () => void;
-  setFocus: (patternId: PatternId) => void;
-  setSelectedPattern: (element?: Pattern) => void;
+  setFocus: (patternId: PatternId) => boolean;
   updatePattern: (data: Pattern) => void;
-  updatePatternById: (id: PatternId, formData: PatternMap) => void;
-  updateSelectedPattern: (formData: PatternMap) => void;
+  updateActivePattern: (formData: PatternMap) => void;
 };
 
 type FormEditStoreContext = {
@@ -50,26 +49,29 @@ export const createFormEditSlice =
       const state = get();
       const builder = new BlueprintBuilder(state.form);
       const newPattern = builder.addPattern(state.context.config, patternType);
-      set({ form: builder.form, focusedPattern: newPattern });
+      set({ form: builder.form, focus: { pattern: newPattern } });
     },
     deleteSelectedPattern: () => {
       const state = get();
-      if (state.focusedPattern === undefined) {
+      if (state.focus === undefined) {
         return;
       }
       const builder = new BlueprintBuilder(state.form);
-      builder.removePattern(state.context.config, state.focusedPattern.id);
-      set({ focusedPattern: undefined, form: builder.form });
+      builder.removePattern(state.context.config, state.focus.pattern.id);
+      set({ focus: undefined, form: builder.form });
     },
     setFocus: patternId => {
       const state = get();
-      if (state.focusedPattern?.id === patternId) {
-        return;
+      if (state.focus?.pattern.id === patternId) {
+        return true;
+      }
+      if (state.focus?.errors) {
+        return false;
       }
       const elementToSet = getPattern(state.form, patternId);
-      set({ focusedPattern: elementToSet });
+      set({ focus: { errors: undefined, pattern: elementToSet } });
+      return true;
     },
-    setSelectedPattern: focusedPattern => set({ focusedPattern }),
     updatePattern: pattern => {
       const state = get();
       const builder = new BlueprintBuilder(state.form);
@@ -81,35 +83,35 @@ export const createFormEditSlice =
         }
       );
       if (success) {
-        set({ form: builder.form, focusedPattern: undefined });
-      }
-    },
-    updatePatternById: (id, formData) => {
-      const state = get();
-      const builder = new BlueprintBuilder(state.form);
-      const success = builder.updatePatternById(
-        state.context.config,
-        id,
-        formData
-      );
-      if (success) {
-        set({ form: builder.form });
+        set({ form: builder.form, focus: undefined });
       }
     },
-    updateSelectedPattern: formData => {
+    updateActivePattern: formData => {
       const state = get();
-      if (state.focusedPattern === undefined) {
-        console.warn('No selected element');
+      if (state.focus === undefined) {
         return;
       }
       const builder = new BlueprintBuilder(state.form);
-      const success = builder.updatePattern(
+      const result = builder.updatePatternById(
         state.context.config,
-        state.focusedPattern,
+        state.focus.pattern.id,
         formData
       );
-      if (success) {
-        set({ form: builder.form, focusedPattern: undefined });
+      if (result.success) {
+        set({
+          form: builder.form,
+          focus: {
+            pattern: state.focus.pattern,
+            errors: undefined,
+          },
+        });
+      } else {
+        set({
+          focus: {
+            pattern: state.focus.pattern,
+            errors: result.error,
+          },
+        });
       }
     },
   });
diff --git a/packages/design/src/FormManager/FormEdit/types.ts b/packages/design/src/FormManager/FormEdit/types.ts
index f69fa383..4225f54f 100644
--- a/packages/design/src/FormManager/FormEdit/types.ts
+++ b/packages/design/src/FormManager/FormEdit/types.ts
@@ -1,10 +1,16 @@
-import { type PatternProps } from '@atj/forms';
+import { type FormErrors, type Pattern, type PatternProps } from '@atj/forms';
 import { FormManagerContext } from '..';
 
+export type PatternFocus = {
+  pattern: Pattern;
+  errors?: FormErrors;
+};
+
 export type PatternEditComponent<T extends PatternProps = PatternProps> =
   React.ComponentType<{
     context: FormManagerContext;
     previewProps: T;
+    focus?: PatternFocus;
   }>;
 
 export type EditComponentForPattern<T extends PatternProps = PatternProps> =
diff --git a/packages/design/src/FormManager/index.tsx b/packages/design/src/FormManager/index.tsx
index 772e6795..6e3ea8cb 100644
--- a/packages/design/src/FormManager/index.tsx
+++ b/packages/design/src/FormManager/index.tsx
@@ -35,13 +35,15 @@ export default function FormManager({ context }: FormManagerProps) {
       <Routes>
         <Route
           path={AppRoutes.MyForms.path}
-          Component={() => (
-            <FormManagerProvider context={context} form={nullBlueprint}>
-              <FormManagerLayout>
-                <FormList formService={context.formService} />
-              </FormManagerLayout>
-            </FormManagerProvider>
-          )}
+          Component={() => {
+            return (
+              <FormManagerProvider context={context} form={nullBlueprint}>
+                <FormManagerLayout>
+                  <FormList formService={context.formService} />
+                </FormManagerLayout>
+              </FormManagerProvider>
+            );
+          }}
         />
         <Route
           path={AppRoutes.Preview.path}
@@ -55,7 +57,11 @@ export default function FormManager({ context }: FormManagerProps) {
               return <div>Error loading form preview</div>;
             }
             return (
-              <FormManagerProvider context={context} form={form.data}>
+              <FormManagerProvider
+                context={context}
+                formId={formId}
+                form={form.data}
+              >
                 <FormManagerLayout>
                   <FormPreview />
                 </FormManagerLayout>
@@ -76,7 +82,11 @@ export default function FormManager({ context }: FormManagerProps) {
             }
             const form = result.data;
             return (
-              <FormManagerProvider context={context} form={form}>
+              <FormManagerProvider
+                context={context}
+                formId={formId}
+                form={form}
+              >
                 <FormManagerLayout
                   step={NavPage.upload}
                   back={AppRoutes.MyForms.getUrl()}
@@ -107,14 +117,18 @@ export default function FormManager({ context }: FormManagerProps) {
             }
             const form = result.data;
             return (
-              <FormManagerProvider context={context} form={form}>
+              <FormManagerProvider
+                context={context}
+                formId={formId}
+                form={form}
+              >
                 <FormManagerLayout
                   step={NavPage.create}
                   back={AppRoutes.Upload.getUrl(formId)}
                   next={AppRoutes.Configure.getUrl(formId)}
                   preview={AppRoutes.Preview.getUrl(formId)}
                 >
-                  <FormEdit formId={formId} />
+                  <FormEdit />
                 </FormManagerLayout>
               </FormManagerProvider>
             );
@@ -133,7 +147,11 @@ export default function FormManager({ context }: FormManagerProps) {
             }
             const form = result.data;
             return (
-              <FormManagerProvider context={context} form={form}>
+              <FormManagerProvider
+                context={context}
+                formId={formId}
+                form={form}
+              >
                 <FormManagerLayout
                   step={NavPage.configure}
                   back={AppRoutes.Create.getUrl(formId)}
@@ -159,7 +177,11 @@ export default function FormManager({ context }: FormManagerProps) {
             }
             const form = result.data;
             return (
-              <FormManagerProvider context={context} form={form}>
+              <FormManagerProvider
+                context={context}
+                formId={formId}
+                form={form}
+              >
                 <FormManagerLayout
                   step={NavPage.publish}
                   back={AppRoutes.Configure.getUrl(formId)}
diff --git a/packages/design/src/FormManager/store.tsx b/packages/design/src/FormManager/store.tsx
index 5aa8d421..402dd0a4 100644
--- a/packages/design/src/FormManager/store.tsx
+++ b/packages/design/src/FormManager/store.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { type StoreApi, type StateCreator, create } from 'zustand';
+import {
+  type StoreApi,
+  type StateCreator,
+  create,
+  UseBoundStore,
+} from 'zustand';
 import { createContext } from 'zustand-utils';
 
 import { BlueprintBuilder, type Blueprint } from '@atj/forms';
@@ -11,6 +16,7 @@ import { Result } from '@atj/common';
 
 type StoreContext = {
   context: FormManagerContext;
+  formId?: string;
   form: Blueprint;
 };
 
@@ -18,15 +24,19 @@ type FormManagerStore = FormEditSlice & FormListSlice & FormManagerSlice;
 const { Provider, useStore } = createContext<StoreApi<FormManagerStore>>();
 export const useFormManagerStore = useStore;
 
-const createStore = ({ context, form }: StoreContext) =>
-  create<FormManagerStore>((...args) => ({
+const createStore = ({ context, formId, form }: StoreContext) => {
+  const store = create<FormManagerStore>((...args) => ({
     ...createFormEditSlice({ context, form })(...args),
     ...createFormListSlice({ context })(...args),
-    ...createFormManagerSlice({ context, form })(...args),
+    ...createFormManagerSlice({ context, formId, form })(...args),
   }));
+  savePeriodically(store);
+  return store;
+};
 
 export const FormManagerProvider = (props: {
   context: FormManagerContext;
+  formId?: string;
   form: Blueprint;
   children: React.ReactNode;
 }) => {
@@ -38,9 +48,10 @@ export const FormManagerProvider = (props: {
 type FormManagerSlice = {
   context: FormManagerContext;
   form: Blueprint;
+  formId?: string;
   lastSaved?: Date;
   createNewForm: () => Promise<Result<string>>;
-  saveForm: (formId: string, blueprint: Blueprint) => void;
+  saveForm: (blueprint: Blueprint) => void;
 };
 
 type FormManagerSliceCreator = StateCreator<
@@ -50,23 +61,49 @@ type FormManagerSliceCreator = StateCreator<
   FormManagerSlice
 >;
 const createFormManagerSlice =
-  ({ context, form }: StoreContext): FormManagerSliceCreator =>
+  ({ context, formId, form }: StoreContext): FormManagerSliceCreator =>
   (set, get) => ({
     context,
     form,
+    formId,
     createNewForm: async () => {
       const builder = new BlueprintBuilder();
       builder.setFormSummary({
         title: `My form - ${new Date().toISOString()}`,
         description: '',
       });
-      return await context.formService.addForm(builder.form);
+      const result = await context.formService.addForm(builder.form);
+      if (!result.success) {
+        return result;
+      }
+      return {
+        success: true,
+        data: result.data.id,
+      };
     },
-    saveForm: async (formId, blueprint) => {
-      const { context } = get();
-      const result = await context.formService.saveForm(formId, blueprint);
-      if (result.success) {
-        set({ lastSaved: result.data.timestamp });
+    saveForm: async blueprint => {
+      const { context, formId } = get();
+      if (formId === undefined) {
+        const result = await context.formService.addForm(blueprint);
+        if (result.success) {
+          set({ formId: result.data.id, lastSaved: result.data.timestamp });
+        }
+      } else {
+        const result = await context.formService.saveForm(formId, blueprint);
+        if (result.success) {
+          set({ lastSaved: result.data.timestamp });
+        }
       }
     },
   });
+
+const savePeriodically = (store: UseBoundStore<StoreApi<FormManagerStore>>) => {
+  let lastForm: Blueprint;
+  setInterval(async () => {
+    const { form, saveForm } = store.getState();
+    if (lastForm !== form) {
+      await saveForm(form);
+      lastForm = form;
+    }
+  }, 5000);
+};
diff --git a/packages/form-service/src/context/browser/form-repo.ts b/packages/form-service/src/context/browser/form-repo.ts
index ba2ccd10..ea1b6714 100644
--- a/packages/form-service/src/context/browser/form-repo.ts
+++ b/packages/form-service/src/context/browser/form-repo.ts
@@ -48,7 +48,7 @@ export const getFormSummaryListFromStorage = (storage: Storage) => {
 export const addFormToStorage = (
   storage: Storage,
   form: Blueprint
-): Result<string> => {
+): Result<{ timestamp: Date; id: string }> => {
   const uuid = crypto.randomUUID();
 
   const result = saveFormToStorage(storage, uuid, form);
@@ -58,7 +58,10 @@ export const addFormToStorage = (
 
   return {
     success: true,
-    data: uuid,
+    data: {
+      timestamp: new Date(),
+      id: uuid,
+    },
   };
 };
 
diff --git a/packages/form-service/src/operations/add-form.ts b/packages/form-service/src/operations/add-form.ts
index 079300dd..1990e47f 100644
--- a/packages/form-service/src/operations/add-form.ts
+++ b/packages/form-service/src/operations/add-form.ts
@@ -6,6 +6,6 @@ import { addFormToStorage } from '../context/browser/form-repo';
 export const addForm = (
   ctx: { storage: Storage },
   form: Blueprint
-): Result<string> => {
+): Result<{ timestamp: Date; id: string }> => {
   return addFormToStorage(ctx.storage, form);
 };
diff --git a/packages/form-service/src/types.ts b/packages/form-service/src/types.ts
index 380a815a..b019712a 100644
--- a/packages/form-service/src/types.ts
+++ b/packages/form-service/src/types.ts
@@ -4,7 +4,7 @@ import { Blueprint, FormSession } from '@atj/forms';
 import { FormListItem } from './operations/get-form-list';
 
 export type FormService = {
-  addForm: (form: Blueprint) => Result<string>;
+  addForm: (form: Blueprint) => Result<{ timestamp: Date; id: string }>;
   deleteForm: (formId: string) => VoidResult;
   getForm: (formId: string) => Result<Blueprint>;
   getFormList: () => Result<FormListItem[]>;
diff --git a/packages/forms/src/builder/index.ts b/packages/forms/src/builder/index.ts
index 2a783615..d3b8a47c 100644
--- a/packages/forms/src/builder/index.ts
+++ b/packages/forms/src/builder/index.ts
@@ -1,6 +1,8 @@
+import { type VoidResult } from '@atj/common';
 import {
   type Blueprint,
   type FormConfig,
+  type FormErrors,
   type FormSummary,
   type Pattern,
   type PatternId,
@@ -46,31 +48,37 @@ export class BlueprintBuilder {
   }
 
   updatePattern(config: FormConfig, pattern: Pattern, formData: PatternMap) {
-    const updatedBlueprint = updatePatternFromFormData(
+    const result = updatePatternFromFormData(
       config,
       this.form,
       pattern,
       formData
     );
-    if (!updatedBlueprint) {
+    if (!result.success) {
       return false;
     }
-    this._bp = updatedBlueprint;
+    this._bp = result.data;
     return true;
   }
 
-  updatePatternById(config: FormConfig, id: PatternId, formData: PatternMap) {
+  updatePatternById(
+    config: FormConfig,
+    id: PatternId,
+    formData: PatternMap
+  ): VoidResult<FormErrors> {
     const pattern = getPattern(this.form, id);
-    const updatedBlueprint = updatePatternFromFormData(
+    const result = updatePatternFromFormData(
       config,
       this.form,
       pattern,
       formData
     );
-    if (!updatedBlueprint) {
-      return false;
+    if (!result.success) {
+      return result;
     }
-    this._bp = updatedBlueprint;
-    return true;
+    this._bp = result.data;
+    return {
+      success: true,
+    };
   }
 }
diff --git a/packages/forms/src/error.ts b/packages/forms/src/error.ts
new file mode 100644
index 00000000..741e55f0
--- /dev/null
+++ b/packages/forms/src/error.ts
@@ -0,0 +1,8 @@
+type FormErrorType = 'required' | 'custom';
+
+export type FormError = {
+  type: FormErrorType;
+  message?: string;
+};
+
+export type FormErrors = Record<string, FormError>;
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index 838fda60..7e5ce964 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -13,6 +13,7 @@ export * from './builder';
 export * from './components';
 export * from './config';
 export * from './documents';
+export * from './error';
 export * from './pattern';
 export * from './response';
 export * from './session';
diff --git a/packages/forms/src/pattern.ts b/packages/forms/src/pattern.ts
index 8340a5e0..67bd15aa 100644
--- a/packages/forms/src/pattern.ts
+++ b/packages/forms/src/pattern.ts
@@ -1,5 +1,5 @@
 import { type Result } from '@atj/common';
-import { updatePattern, type Blueprint } from '..';
+import { type FormErrors, type Blueprint, updatePattern } from '..';
 
 import { type CreatePrompt } from './components';
 
@@ -15,14 +15,14 @@ export type PatternValueMap = Record<PatternId, PatternValue>;
 export type PatternMap = Record<PatternId, Pattern>;
 export type GetPattern = (form: Blueprint, id: PatternId) => Pattern;
 
-type ParsePatternData<Pattern, PatternOutput> = (
+type ParseUserInput<Pattern, PatternOutput> = (
   pattern: Pattern,
   obj: unknown
-) => Result<PatternOutput>;
+) => Result<PatternOutput, FormErrors>;
 
 type ParsePatternConfigData<PatternConfigData> = (
   patternData: unknown
-) => Result<PatternConfigData>;
+) => Result<PatternConfigData, FormErrors>;
 
 type RemoveChildPattern<P extends Pattern> = (
   pattern: P,
@@ -39,7 +39,7 @@ export type PatternConfig<
 > = {
   displayName: string;
   initial: ThisPattern['data'];
-  parseUserInput?: ParsePatternData<ThisPattern, PatternOutput>;
+  parseUserInput?: ParseUserInput<ThisPattern, PatternOutput>;
   parseConfigData: ParsePatternConfigData<ThisPattern['data']>;
   getChildren: (
     pattern: ThisPattern,
@@ -72,7 +72,7 @@ export const validatePattern = (
   patternConfig: PatternConfig,
   pattern: Pattern,
   value: any
-): Result<Pattern['data']> => {
+): Result<Pattern['data'], FormErrors> => {
   if (!patternConfig.parseUserInput) {
     return {
       success: true,
@@ -86,12 +86,6 @@ export const validatePattern = (
       error: parseResult.error,
     };
   }
-  if (pattern.data.required && !parseResult.data) {
-    return {
-      success: false,
-      error: 'Required value not provided.',
-    };
-  }
   return {
     success: true,
     data: parseResult.data,
@@ -119,18 +113,20 @@ export const updatePatternFromFormData = (
   form: Blueprint,
   pattern: Pattern,
   formData: PatternMap
-) => {
+): Result<Blueprint, FormErrors> => {
   const elementConfig = getPatternConfig(config, pattern.type);
-  const data = formData[pattern.id].data;
-  const result = elementConfig.parseConfigData(data);
+  const result = elementConfig.parseConfigData(formData[pattern.id]);
   if (!result.success) {
-    return;
+    return result;
   }
   const updatedForm = updatePattern(form, {
     ...pattern,
     data: result.data,
   });
-  return updatedForm;
+  return {
+    success: true,
+    data: updatedForm,
+  };
 };
 
 const generatePatternId = () => crypto.randomUUID();
diff --git a/packages/forms/src/patterns/checkbox.ts b/packages/forms/src/patterns/checkbox.ts
index c2303c50..4e6bc920 100644
--- a/packages/forms/src/patterns/checkbox.ts
+++ b/packages/forms/src/patterns/checkbox.ts
@@ -6,15 +6,15 @@ import { getFormSessionValue } from '../session';
 import { safeZodParse } from '../util/zod';
 
 const configSchema = z.object({
-  label: z.string(),
+  label: z.string().min(1),
   defaultChecked: z.boolean(),
 });
-export type InputPattern = Pattern<z.infer<typeof configSchema>>;
+export type CheckboxPattern = Pattern<z.infer<typeof configSchema>>;
 
 const PatternOutput = z.boolean();
 type PatternOutput = z.infer<typeof PatternOutput>;
 
-export const checkboxConfig: PatternConfig<InputPattern, PatternOutput> = {
+export const checkboxConfig: PatternConfig<CheckboxPattern, PatternOutput> = {
   displayName: 'Checkbox',
   initial: {
     label: 'Checkbox label',
@@ -23,7 +23,9 @@ export const checkboxConfig: PatternConfig<InputPattern, PatternOutput> = {
   parseUserInput: (_, obj) => {
     return safeZodParse(PatternOutput, obj);
   },
-  parseConfigData: obj => safeZodParse(configSchema, obj),
+  parseConfigData: obj => {
+    return safeZodParse(configSchema, obj);
+  },
   getChildren() {
     return [];
   },
diff --git a/packages/forms/src/patterns/input.ts b/packages/forms/src/patterns/input.ts
index 0462778d..5f29d760 100644
--- a/packages/forms/src/patterns/input.ts
+++ b/packages/forms/src/patterns/input.ts
@@ -6,22 +6,27 @@ import { getFormSessionValue } from '../session';
 import { safeZodParse } from '../util/zod';
 
 const configSchema = z.object({
-  label: z.string(),
-  initial: z.string(),
+  label: z.string().min(1, 'A field label is required'),
+  initial: z.string().optional(),
   required: z.boolean(),
   maxLength: z.coerce.number(),
 });
 export type InputPattern = Pattern<z.infer<typeof configSchema>>;
 
-const createSchema = (data: InputPattern['data']) =>
-  z.string().max(data.maxLength);
+const createSchema = (data: InputPattern['data']) => {
+  const schema = z.string().max(data.maxLength);
+  if (!data.required) {
+    return schema;
+  }
+  return schema.min(1, { message: 'This field is required' });
+};
 
 type InputPatternOutput = z.infer<ReturnType<typeof createSchema>>;
 
 export const inputConfig: PatternConfig<InputPattern, InputPatternOutput> = {
   displayName: 'Text input',
   initial: {
-    label: '',
+    label: 'Field label',
     initial: '',
     required: true,
     maxLength: 128,
diff --git a/packages/forms/src/patterns/paragraph.ts b/packages/forms/src/patterns/paragraph.ts
index 9dd020e2..140662cf 100644
--- a/packages/forms/src/patterns/paragraph.ts
+++ b/packages/forms/src/patterns/paragraph.ts
@@ -5,8 +5,7 @@ import { type ParagraphProps } from '../components';
 import { safeZodParse } from '../util/zod';
 
 const configSchema = z.object({
-  text: z.string(),
-  maxLength: z.coerce.number(),
+  text: z.string().min(1),
 });
 export type ParagraphPattern = Pattern<z.infer<typeof configSchema>>;
 
@@ -14,7 +13,6 @@ export const paragraphConfig: PatternConfig<ParagraphPattern> = {
   displayName: 'Paragraph',
   initial: {
     text: 'Paragraph text...',
-    maxLength: 2048,
   },
   parseConfigData: obj => safeZodParse(configSchema, obj),
   getChildren() {
diff --git a/packages/forms/src/patterns/radio-group.ts b/packages/forms/src/patterns/radio-group.ts
index 8c3e5e08..8bc5ac00 100644
--- a/packages/forms/src/patterns/radio-group.ts
+++ b/packages/forms/src/patterns/radio-group.ts
@@ -8,11 +8,11 @@ import { getFormSessionValue } from '../session';
 import { safeZodParse } from '../util/zod';
 
 const configSchema = z.object({
-  label: z.string(),
+  label: z.string().min(1),
   options: z
     .object({
-      id: z.string().regex(/^[^\s]+$/),
-      label: z.string(),
+      id: z.string().regex(/^[^\s]+$/, 'Invalid option ID'),
+      label: z.string().min(1),
     })
     .array(),
 });
@@ -28,11 +28,26 @@ export const radioGroupConfig: PatternConfig<RadioGroupPattern, PatternOutput> =
       label: 'Radio group label',
       options: [
         { id: 'option-1', label: 'Option 1' },
-        { id: 'option-1', label: 'Option 2' },
+        { id: 'option-2', label: 'Option 2' },
       ],
     },
     parseUserInput: (pattern, input) => {
-      return extractOptionId(pattern.id, input);
+      const result = extractOptionId(pattern.id, input);
+      if (!result.success) {
+        return {
+          success: false,
+          error: {
+            [pattern.id]: {
+              type: 'custom',
+              message: result.error,
+            },
+          },
+        };
+      }
+      return {
+        success: true,
+        data: result.data,
+      };
     },
     parseConfigData: obj => {
       const result = safeZodParse(configSchema, obj);
diff --git a/packages/forms/src/util/zod.ts b/packages/forms/src/util/zod.ts
index 3a8060f3..5d233dee 100644
--- a/packages/forms/src/util/zod.ts
+++ b/packages/forms/src/util/zod.ts
@@ -2,12 +2,12 @@ import * as z from 'zod';
 
 import { type Result } from '@atj/common';
 
-import { type Pattern } from '..';
+import { type FormErrors, type Pattern } from '..';
 
 export const safeZodParse = <T extends Pattern>(
   schema: z.Schema,
   obj: unknown
-): Result<T['data']> => {
+): Result<T['data'], FormErrors> => {
   const result = schema.safeParse(obj);
   if (result.success) {
     return {
@@ -17,7 +17,26 @@ export const safeZodParse = <T extends Pattern>(
   } else {
     return {
       success: false,
-      error: result.error.message,
+      error: convertZodErrorToFormErrors(result.error),
     };
   }
 };
+
+const convertZodErrorToFormErrors = (zodError: z.ZodError): FormErrors => {
+  const formErrors: FormErrors = {};
+  zodError.errors.forEach(error => {
+    const path = error.path.join('.') || 'root';
+    if (error.code === 'too_small' && error.minimum === 1) {
+      formErrors[path] = {
+        type: 'required',
+        message: error.message,
+      };
+    } else {
+      formErrors[path] = {
+        type: 'custom',
+        message: error.message,
+      };
+    }
+  });
+  return formErrors;
+};