diff --git a/js/components/forms/__tests__/edit_officer_form.test.js b/js/components/forms/__tests__/edit_officer_form.test.js
new file mode 100644
index 00000000..b5b02aa2
--- /dev/null
+++ b/js/components/forms/__tests__/edit_officer_form.test.js
@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils'
+
+import EditOfficerForm from '../edit_officer_form'
+
+describe('EditOfficerForm', () => {
+  it('defaults to not editing', () => {
+    const wrapper = shallowMount(EditOfficerForm)
+    expect(wrapper.vm.$data.editing).toEqual(false)
+  })
+
+  it('does not start in editing mode when no errors', () => {
+    const wrapper = shallowMount(EditOfficerForm, {
+      propsData: { hasErrors: false },
+    })
+    expect(wrapper.vm.$data.editing).toEqual(false)
+  })
+
+  it('does start in editing mode when the form has errors', () => {
+    const wrapper = shallowMount(EditOfficerForm, {
+      propsData: { hasErrors: true },
+    })
+    expect(wrapper.vm.$data.editing).toEqual(true)
+  })
+
+  it('starts editing when edit method called', () => {
+    const wrapper = shallowMount(EditOfficerForm)
+    wrapper.vm.edit({ preventDefault: () => null })
+    expect(wrapper.vm.$data.editing).toEqual(true)
+  })
+
+  it('stops editing when cancel method called', () => {
+    const wrapper = shallowMount(EditOfficerForm)
+    wrapper.vm.cancel()
+    expect(wrapper.vm.$data.editing).toEqual(false)
+  })
+})
diff --git a/js/components/forms/edit_officer_form.js b/js/components/forms/edit_officer_form.js
new file mode 100644
index 00000000..a8e4311b
--- /dev/null
+++ b/js/components/forms/edit_officer_form.js
@@ -0,0 +1,40 @@
+import FormMixin from '../../mixins/form'
+import checkboxinput from '../checkbox_input'
+import textinput from '../text_input'
+
+export default {
+  name: 'edit-officer-form',
+
+  mixins: [FormMixin],
+
+  components: {
+    checkboxinput,
+    textinput,
+  },
+
+  props: {
+    hasErrors: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+
+  data: function() {
+    return {
+      editing: this.hasErrors,
+    }
+  },
+
+  methods: {
+    edit: function(event) {
+      event.preventDefault()
+      this.editing = true
+    },
+
+    cancel: function(event) {
+      this.editing = false
+    },
+  },
+
+  template: '<div></div>',
+}
diff --git a/js/index.js b/js/index.js
index b12de788..f9673744 100644
--- a/js/index.js
+++ b/js/index.js
@@ -11,6 +11,7 @@ import multicheckboxinput from './components/multi_checkbox_input'
 import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
 import DetailsOfUse from './components/forms/details_of_use'
+import EditOfficerForm from './components/forms/edit_officer_form'
 import poc from './components/forms/poc'
 import oversight from './components/forms/oversight'
 import financial from './components/forms/financial'
@@ -64,6 +65,7 @@ const app = new Vue({
     ConfirmationPopover,
     funding,
     DateSelector,
+    EditOfficerForm,
   },
 
   mounted: function() {