diff --git a/src/components/EditableInput.tsx b/src/components/EditableInput.tsx
index 6f6e5ff12..2e46d36b7 100644
--- a/src/components/EditableInput.tsx
+++ b/src/components/EditableInput.tsx
@@ -24,6 +24,7 @@ export interface EditableInputProps extends React.HTMLProps<EditableInput> {
   className?: string;
   minLength?: number;
   maxLength?: number;
+  hidden?: boolean;
 }
 
 export interface EditableInputState {
@@ -65,7 +66,11 @@ export default class EditableInput extends React.Component<
       error,
       label,
       extraContent,
+      hidden,
     } = this.props;
+    if (hidden) {
+      return this.renderHiddenElement();
+    }
     const checkboxOrRadioOrSelect = !!(
       type === "checkbox" ||
       type === "radio" ||
@@ -90,7 +95,7 @@ export default class EditableInput extends React.Component<
           <label className="control-label">
             {type !== "checkbox" && type !== "radio" && label}
             {required && <span className="required-field">Required</span>}
-            {this.renderElement(descriptionId)}
+            {this.renderElement(this.props, descriptionId)}
             {type === "checkbox" && label}
             {type === "radio" && <span>{label}</span>}
           </label>
@@ -98,7 +103,7 @@ export default class EditableInput extends React.Component<
         {(extraContent || !label) && (
           <div className={extraContent ? "with-add-on" : ""}>
             {extraContent}
-            {!label && this.renderElement(descriptionId)}
+            {!label && this.renderElement(this.props, descriptionId)}
           </div>
         )}
         {descriptionStr &&
@@ -107,7 +112,7 @@ export default class EditableInput extends React.Component<
     );
   }
 
-  renderElement(descriptionId?: string) {
+  renderElement(props, descriptionId?: string) {
     const {
       type,
       elementType,
@@ -124,7 +129,7 @@ export default class EditableInput extends React.Component<
       style,
       minLength,
       maxLength,
-    } = this.props;
+    } = props;
 
     return React.createElement(
       elementType || "input",
@@ -156,6 +161,10 @@ export default class EditableInput extends React.Component<
     );
   }
 
+  renderHiddenElement() {
+    return this.renderElement({ ...this.props, readOnly: true });
+  }
+
   renderDescription(id: string, description: string) {
     return (
       <p
diff --git a/src/components/ProtocolFormField.tsx b/src/components/ProtocolFormField.tsx
index eeb07fc89..a15013c45 100644
--- a/src/components/ProtocolFormField.tsx
+++ b/src/components/ProtocolFormField.tsx
@@ -54,6 +54,11 @@ export default class ProtocolFormField extends React.Component<
 
   render(): JSX.Element {
     const setting = this.props.setting as SettingData | CustomListsSetting;
+    if (setting.hidden) {
+      // TODO: Hijacking for any hidden fields for now, but need to handle
+      //  some types (e.g., "menu", "list")  differently.
+      return this.renderHiddenElement(setting);
+    }
     if (setting.type === "select") {
       return this.renderSelectSetting(setting);
     } else if (setting.type === "list" || setting.type === "menu") {
@@ -65,6 +70,22 @@ export default class ProtocolFormField extends React.Component<
     }
   }
 
+  renderHiddenElement(setting: SettingData) {
+    const { value, disabled = false, error = null } = this.props;
+    const props = {
+      key: setting.key,
+      hidden: true,
+      elementType: "input",
+      type: "hidden",
+      name: setting.key,
+      value: defaultValueIfMissing(value, setting.default),
+      ref: this.elementRef,
+      disabled,
+      error,
+    };
+    return React.createElement(EditableInput, props, null);
+  }
+
   renderSetting(setting: SettingData): JSX.Element {
     return (
       <div className={setting.randomizable ? "randomizable" : ""}>
diff --git a/src/components/__tests__/ProtocolFormField-test.tsx b/src/components/__tests__/ProtocolFormField-test.tsx
index f6ad380c4..88b427bb9 100644
--- a/src/components/__tests__/ProtocolFormField-test.tsx
+++ b/src/components/__tests__/ProtocolFormField-test.tsx
@@ -11,307 +11,470 @@ import ColorPicker from "../ColorPicker";
 import { Button } from "library-simplified-reusable-components";
 
 describe("ProtocolFormField", () => {
-  const setting = {
-    key: "setting",
-    label: "label",
-    description: "<p>description</p>",
-  };
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = mount(<ProtocolFormField setting={setting} disabled={false} />);
-  });
+  describe("When visible...", () => {
+    const setting = {
+      key: "setting",
+      label: "label",
+      description: "<p>description</p>",
+    };
+    let wrapper;
 
-  it("renders text setting", () => {
-    let input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("type")).to.equal("text");
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("label")).to.equal("label");
-    expect(input.prop("description")).to.equal("<p>description</p>");
-    expect(input.prop("value")).to.be.undefined;
-
-    wrapper.setProps({ value: "test", disabled: true });
-    input = wrapper.find(EditableInput);
-    expect(input.prop("disabled")).to.equal(true);
-    expect(input.prop("value")).to.equal("test");
-    const inputElement = input.find("input").getDOMNode();
-    expect(inputElement.value).to.equal("test");
-
-    (wrapper.instance() as ProtocolFormField).clear();
-    expect(inputElement.value).to.equal("");
-  });
+    beforeEach(() => {
+      wrapper = mount(<ProtocolFormField setting={setting} disabled={false} />);
+    });
 
-  it("renders date-picker setting", () => {
-    const datePickerSetting = { ...setting, ...{ type: "date-picker" } };
-    wrapper.setProps({ setting: datePickerSetting });
-    let input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("type")).to.equal("date");
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("label")).to.equal("label");
-    expect(input.prop("description")).to.equal("<p>description</p>");
-    expect(input.prop("value")).to.be.undefined;
-
-    wrapper.setProps({ value: "2020-10-13", disabled: true });
-    input = wrapper.find(EditableInput);
-    expect(input.prop("disabled")).to.equal(true);
-    expect(input.prop("value")).to.equal("2020-10-13");
-    const inputElement = input.find("input").getDOMNode();
-    expect(inputElement.value).to.equal("2020-10-13");
-
-    (wrapper.instance() as ProtocolFormField).clear();
-    expect(inputElement.value).to.equal("");
-  });
+    it("renders text setting", () => {
+      let input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("type")).to.equal("text");
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("label")).to.equal("label");
+      expect(input.prop("description")).to.equal("<p>description</p>");
+      expect(input.prop("value")).to.be.undefined;
+
+      wrapper.setProps({ value: "test", disabled: true });
+      input = wrapper.find(EditableInput);
+      expect(input.prop("disabled")).to.equal(true);
+      expect(input.prop("value")).to.equal("test");
+      const inputElement = input.find("input").getDOMNode();
+      expect(inputElement.value).to.equal("test");
+
+      (wrapper.instance() as ProtocolFormField).clear();
+      expect(inputElement.value).to.equal("");
+    });
 
-  it("renders optional setting", () => {
-    const optionalSetting = { ...setting, ...{ optional: true } };
-    wrapper.setProps({ setting, optionalSetting });
-
-    const input = wrapper.find(EditableInput);
-    const description = wrapper.find(".description");
-    expect(input.length).to.equal(1);
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("label")).to.equal("label");
-    expect(description.text()).to.equal("(Optional) description");
-  });
+    it("renders date-picker setting", () => {
+      const datePickerSetting = { ...setting, ...{ type: "date-picker" } };
+      wrapper.setProps({ setting: datePickerSetting });
+      let input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("type")).to.equal("date");
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("label")).to.equal("label");
+      expect(input.prop("description")).to.equal("<p>description</p>");
+      expect(input.prop("value")).to.be.undefined;
+
+      wrapper.setProps({ value: "2020-10-13", disabled: true });
+      input = wrapper.find(EditableInput);
+      expect(input.prop("disabled")).to.equal(true);
+      expect(input.prop("value")).to.equal("2020-10-13");
+      const inputElement = input.find("input").getDOMNode();
+      expect(inputElement.value).to.equal("2020-10-13");
+
+      (wrapper.instance() as ProtocolFormField).clear();
+      expect(inputElement.value).to.equal("");
+    });
 
-  it("renders randomizable setting", () => {
-    const randomizableSetting = { ...setting, ...{ randomizable: true } };
-    wrapper.setProps({ setting: randomizableSetting });
-
-    let input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("value")).to.be.undefined;
-    let button = wrapper.find(Button);
-    expect(button.length).to.equal(1);
-    expect(button.prop("disabled")).to.equal(false);
-    expect(button.text()).to.contain("random");
-
-    button.simulate("click");
-    expect((wrapper.instance() as ProtocolFormField).getValue()).to.be.ok;
-    expect(
-      (wrapper.instance() as ProtocolFormField).getValue().length
-    ).to.equal(32);
-
-    wrapper.setProps({ value: "test" });
-    input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("value")).to.equal("test");
-    button = wrapper.find("button");
-    expect(button.length).to.equal(0);
-  });
+    it("renders optional setting", () => {
+      const optionalSetting = { ...setting, ...{ optional: true } };
+      wrapper.setProps({ setting, optionalSetting });
+
+      const input = wrapper.find(EditableInput);
+      const description = wrapper.find(".description");
+      expect(input.length).to.equal(1);
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("label")).to.equal("label");
+      expect(description.text()).to.equal("(Optional) description");
+    });
 
-  it("renders setting with default", () => {
-    const defaultSetting = { ...setting, ...{ default: "default" } };
-    wrapper.setProps({ setting: defaultSetting });
-    let input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("value")).to.equal("default");
-
-    wrapper.setProps({ value: "test" });
-    input = wrapper.find(EditableInput);
-    expect(input.prop("value")).to.equal("test");
-  });
+    it("renders randomizable setting", () => {
+      const randomizableSetting = { ...setting, ...{ randomizable: true } };
+      wrapper.setProps({ setting: randomizableSetting });
+
+      let input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("value")).to.be.undefined;
+      let button = wrapper.find(Button);
+      expect(button.length).to.equal(1);
+      expect(button.prop("disabled")).to.equal(false);
+      expect(button.text()).to.contain("random");
+
+      button.simulate("click");
+      expect((wrapper.instance() as ProtocolFormField).getValue()).to.be.ok;
+      expect(
+        (wrapper.instance() as ProtocolFormField).getValue().length
+      ).to.equal(32);
+
+      wrapper.setProps({ value: "test" });
+      input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("value")).to.equal("test");
+      button = wrapper.find("button");
+      expect(button.length).to.equal(0);
+    });
+
+    it("renders setting with default", () => {
+      const defaultSetting = { ...setting, ...{ default: "default" } };
+      wrapper.setProps({ setting: defaultSetting });
+      let input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("value")).to.equal("default");
+
+      wrapper.setProps({ value: "test" });
+      input = wrapper.find(EditableInput);
+      expect(input.prop("value")).to.equal("test");
+    });
+
+    it("renders number setting", () => {
+      const numberSetting = { ...setting, ...{ type: "number" } };
+      wrapper.setProps({ setting: numberSetting });
+      let input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("validation")).to.equal("number");
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("label")).to.equal("label");
+      expect(input.prop("description")).to.equal("<p>description</p>");
+      expect(input.prop("value")).to.be.undefined;
+
+      wrapper.setProps({ value: "test" });
+      input = wrapper.find(EditableInput);
+      expect(input.prop("value")).to.equal("test");
+    });
+
+    it("renders select setting", () => {
+      const selectSetting = {
+        ...setting,
+        ...{
+          type: "select",
+          options: [
+            { key: "option1", label: "option 1" },
+            { key: "option2", label: "option 2" },
+          ],
+        },
+      };
+      wrapper.setProps({ setting: selectSetting });
+
+      const input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("label")).to.equal("label");
+      expect(input.prop("value")).to.be.undefined;
+      const children = input.find("option");
+      expect(children.length).to.equal(2);
+      expect(children.at(0).prop("value")).to.equal("option1");
+      expect(children.at(0).text()).to.contain("option 1");
+      expect(children.at(1).prop("value")).to.equal("option2");
+      expect(children.at(1).text()).to.contain("option 2");
+    });
+
+    it("renders textarea setting", () => {
+      const textareaSetting = {
+        ...setting,
+        ...{ type: "textarea", description: "<p>Textarea</p>" },
+      };
+      wrapper.setProps({ setting: textareaSetting });
+
+      let input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      const inputElement = input.find("textarea").at(0) as any;
+      expect(inputElement.length).to.equal(1);
+      expect(inputElement.text()).to.equal("");
+      expect(input.prop("type")).to.equal("text");
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("label")).to.equal("label");
+      expect(input.prop("description")).to.equal("<p>Textarea</p>");
+      expect(input.prop("value")).to.be.undefined;
+
+      wrapper.setProps({ value: "test" });
+      input = wrapper.find(EditableInput);
+      expect(input.prop("value")).to.equal("test");
+      expect(inputElement.text()).to.equal("test");
+
+      (wrapper.instance() as ProtocolFormField).clear();
+      expect(inputElement.text()).to.equal("");
+    });
 
-  it("renders number setting", () => {
-    const numberSetting = { ...setting, ...{ type: "number" } };
-    wrapper.setProps({ setting: numberSetting });
-    let input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("validation")).to.equal("number");
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("label")).to.equal("label");
-    expect(input.prop("description")).to.equal("<p>description</p>");
-    expect(input.prop("value")).to.be.undefined;
-
-    wrapper.setProps({ value: "test" });
-    input = wrapper.find(EditableInput);
-    expect(input.prop("value")).to.equal("test");
+    it("renders menu setting", () => {
+      let inputList = wrapper.find(InputList);
+      expect(inputList.length).to.equal(0);
+      const menuSetting = {
+        ...setting,
+        ...{
+          type: "menu",
+          menuOptions: ["A", "B", "C"].map((x) => (
+            <option key={x} aria-selected={false}>
+              {x}
+            </option>
+          )),
+        },
+      };
+      wrapper.setProps({
+        setting: menuSetting,
+        value: [],
+        altValue: "Alternate",
+        readOnly: true,
+        disableButton: true,
+      });
+      inputList = wrapper.find(InputList);
+      expect(inputList.length).to.equal(1);
+      expect(inputList.prop("setting")).to.equal(menuSetting);
+      expect(inputList.prop("altValue")).to.equal("Alternate");
+      expect(inputList.find("select").length).to.equal(1);
+      expect(inputList.prop("readOnly")).to.be.true;
+      expect(inputList.prop("disableButton")).to.be.true;
+    });
+
+    it("renders image setting", () => {
+      const imageSetting = { ...setting, ...{ type: "image" } };
+      wrapper.setProps({ setting: imageSetting });
+
+      let input = wrapper.find(EditableInput);
+      expect(input.length).to.equal(1);
+      expect(input.prop("type")).to.equal("file");
+      expect(input.prop("disabled")).to.equal(false);
+      expect(input.prop("name")).to.equal("setting");
+      expect(input.prop("label")).to.equal("label");
+      expect(input.prop("description")).to.equal("<p>description</p>");
+      expect(input.prop("value")).to.be.undefined;
+      expect(input.prop("accept")).to.equal("image/*");
+      let label = wrapper.find("label");
+      expect(label.text()).to.equal("label");
+
+      wrapper.setProps({ value: "image data" });
+      input = wrapper.find(EditableInput);
+      expect(input.prop("value")).to.be.undefined;
+      label = wrapper.find("label");
+      expect(label.text()).to.equal("label");
+      const img = wrapper.find("img");
+      expect(img.prop("src")).to.equal("image data");
+    });
+
+    it("renders color picker setting", () => {
+      const colorPickerSetting = {
+        ...setting,
+        ...{ type: "color-picker", default: "#aaaaaa" },
+      };
+      wrapper.setProps({ setting: colorPickerSetting });
+
+      let picker = wrapper.find(ColorPicker);
+      expect(picker.length).to.equal(1);
+      expect(picker.prop("setting")).to.equal(colorPickerSetting);
+      expect(picker.prop("value")).to.equal("#aaaaaa");
+      const label = wrapper.find("label").at(0);
+      expect(label.text()).to.equal("label");
+
+      wrapper.setProps({ value: "#222222" });
+      picker = wrapper.find(ColorPicker);
+      expect(picker.prop("value")).to.equal("#222222");
+    });
+
+    it("gets value of list setting without options", () => {
+      wrapper.setProps({
+        setting: { ...setting, ...{ type: "list" } },
+        value: ["item 1", "item 2"],
+      });
+      expect(
+        (wrapper.instance() as ProtocolFormField).getValue()
+      ).to.deep.equal(["item 1", "item 2"]);
+    });
+
+    it("optionally renders instructions", () => {
+      const instructionsSetting = {
+        ...setting,
+        ...{ instructions: "<ul><li>Step 1</li></ul>", type: "list" },
+      };
+      wrapper.setProps({ setting: instructionsSetting });
+
+      const instructions = wrapper.find(".well");
+      expect(instructions.length).to.equal(1);
+      expect(instructions.hasClass("description")).to.be.true;
+      expect(instructions.text()).to.equal("Step 1");
+    });
+
+    it("optionally accepts an onChange prop", () => {
+      const onChange = stub();
+      wrapper.setProps({ onChange });
+      const element = wrapper.find(EditableInput);
+      expect(element.prop("onChange")).to.equal(onChange);
+      const setting = { ...wrapper.prop("setting"), ...{ type: "list" } };
+      wrapper.setProps({ setting });
+      const inputList = wrapper.find(InputList);
+      expect(inputList.prop("onChange")).to.equal(onChange);
+    });
+
+    it("optionally accepts a readOnly prop", () => {
+      const setting = { ...wrapper.prop("setting"), ...{ type: "list" } };
+      wrapper.setProps({ setting: setting, readOnly: true });
+      const inputList = wrapper.find(InputList);
+      expect(inputList.prop("readOnly")).to.be.true;
+    });
+
+    it("gets value of text setting", () => {
+      wrapper.setProps({ value: "test" });
+      expect((wrapper.instance() as ProtocolFormField).getValue()).to.equal(
+        "test"
+      );
+    });
   });
 
-  it("renders select setting", () => {
-    const selectSetting = {
-      ...setting,
-      ...{
+  describe("When hidden...", () => {
+    // For the hidden settings, the values are passed in the `settings` object.
+    const setting = {
+      hidden: true,
+      key: "setting",
+      label: "label",
+      description: "<p>description</p>",
+    };
+    let wrapper;
+
+    const expectHiddenValue = (value) => {
+      const input = wrapper.find("input");
+      expect(input.length).to.equal(1);
+      expect(input.prop("type")).to.equal("hidden");
+      expect(input.prop("name")).to.equal("setting");
+      // The field contains the correct value.
+      expect(input.prop("value")).to.deep.equal(value);
+      // ProtocolFormField.getValue returns the correct value for the field.
+      expect((wrapper.instance() as ProtocolFormField).getValue()).to.equal(
+        value
+      );
+    };
+
+    beforeEach(() => {
+      wrapper = mount(<ProtocolFormField setting={setting} disabled={false} />);
+    });
+
+    it("renders hidden text setting", () => {
+      const textFieldSetting = { ...setting, type: "text" };
+      wrapper.setProps({ setting: textFieldSetting, value: "test" });
+
+      expectHiddenValue("test");
+    });
+
+    it("renders hidden date-picker setting", () => {
+      const datePickerSetting = { ...setting, type: "date-picker" };
+      wrapper.setProps({ setting: datePickerSetting, value: "2020-10-13" });
+
+      expectHiddenValue("2020-10-13");
+    });
+
+    it("renders hidden randomizable setting", () => {
+      const randomizableSetting = { ...setting, randomizable: true };
+      wrapper.setProps({ setting: randomizableSetting, value: "test" });
+
+      expectHiddenValue("test");
+    });
+
+    it("renders hidden setting with default", () => {
+      const defaultSetting = { ...setting, default: "default" };
+      wrapper.setProps({ setting: defaultSetting });
+
+      expectHiddenValue("default");
+    });
+
+    it("renders hidden number setting", () => {
+      const numberSetting = { ...setting, type: "number" };
+      wrapper.setProps({ setting: numberSetting, value: "42" });
+
+      expectHiddenValue("42");
+    });
+
+    it("renders hidden select setting", () => {
+      const selectSetting = {
+        ...setting,
         type: "select",
         options: [
           { key: "option1", label: "option 1" },
           { key: "option2", label: "option 2" },
         ],
-      },
-    };
-    wrapper.setProps({ setting: selectSetting });
-
-    const input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("label")).to.equal("label");
-    expect(input.prop("value")).to.be.undefined;
-    const children = input.find("option");
-    expect(children.length).to.equal(2);
-    expect(children.at(0).prop("value")).to.equal("option1");
-    expect(children.at(0).text()).to.contain("option 1");
-    expect(children.at(1).prop("value")).to.equal("option2");
-    expect(children.at(1).text()).to.contain("option 2");
-  });
+      };
+      wrapper.setProps({ setting: selectSetting });
 
-  it("renders textarea setting", () => {
-    const textareaSetting = {
-      ...setting,
-      ...{ type: "textarea", description: "<p>Textarea</p>" },
-    };
-    wrapper.setProps({ setting: textareaSetting });
-
-    let input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    const inputElement = input.find("textarea").at(0) as any;
-    expect(inputElement.length).to.equal(1);
-    expect(inputElement.text()).to.equal("");
-    expect(input.prop("type")).to.equal("text");
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("label")).to.equal("label");
-    expect(input.prop("description")).to.equal("<p>Textarea</p>");
-    expect(input.prop("value")).to.be.undefined;
-
-    wrapper.setProps({ value: "test" });
-    input = wrapper.find(EditableInput);
-    expect(input.prop("value")).to.equal("test");
-    expect(inputElement.text()).to.equal("test");
-
-    (wrapper.instance() as ProtocolFormField).clear();
-    expect(inputElement.text()).to.equal("");
-  });
+      // With default value.
+      expectHiddenValue("");
 
-  it("renders menu setting", () => {
-    let inputList = wrapper.find(InputList);
-    expect(inputList.length).to.equal(0);
-    const menuSetting = {
-      ...setting,
-      ...{
+      // With provided value.
+      wrapper.setProps({ value: "indigo" });
+      expectHiddenValue("indigo");
+    });
+
+    it("renders hidden textarea setting", () => {
+      const textareaSetting = {
+        ...setting,
+        type: "textarea",
+        description: "<p>Textarea</p>",
+      };
+      wrapper.setProps({ setting: textareaSetting, value: "test" });
+
+      expectHiddenValue("test");
+    });
+
+    it.skip("renders hidden menu setting", () => {
+      const menuSetting = {
+        ...setting,
         type: "menu",
         menuOptions: ["A", "B", "C"].map((x) => (
           <option key={x} aria-selected={false}>
             {x}
           </option>
         )),
-      },
-    };
-    wrapper.setProps({
-      setting: menuSetting,
-      value: [],
-      altValue: "Alternate",
-      readOnly: true,
-      disableButton: true,
+      };
+      wrapper.setProps({
+        setting: menuSetting,
+        value: [],
+        altValue: "Alternate",
+        readOnly: true,
+        disableButton: true,
+      });
+
+      expectHiddenValue([]);
     });
-    inputList = wrapper.find(InputList);
-    expect(inputList.length).to.equal(1);
-    expect(inputList.prop("setting")).to.equal(menuSetting);
-    expect(inputList.prop("altValue")).to.equal("Alternate");
-    expect(inputList.find("select").length).to.equal(1);
-    expect(inputList.prop("readOnly")).to.be.true;
-    expect(inputList.prop("disableButton")).to.be.true;
-  });
-
-  it("renders image setting", () => {
-    const imageSetting = { ...setting, ...{ type: "image" } };
-    wrapper.setProps({ setting: imageSetting });
-
-    let input = wrapper.find(EditableInput);
-    expect(input.length).to.equal(1);
-    expect(input.prop("type")).to.equal("file");
-    expect(input.prop("disabled")).to.equal(false);
-    expect(input.prop("name")).to.equal("setting");
-    expect(input.prop("label")).to.equal("label");
-    expect(input.prop("description")).to.equal("<p>description</p>");
-    expect(input.prop("value")).to.be.undefined;
-    expect(input.prop("accept")).to.equal("image/*");
-    let label = wrapper.find("label");
-    expect(label.text()).to.equal("label");
-
-    wrapper.setProps({ value: "image data" });
-    input = wrapper.find(EditableInput);
-    expect(input.prop("value")).to.be.undefined;
-    label = wrapper.find("label");
-    expect(label.text()).to.equal("label");
-    const img = wrapper.find("img");
-    expect(img.prop("src")).to.equal("image data");
-  });
 
-  it("renders color picker setting", () => {
-    const colorPickerSetting = {
-      ...setting,
-      ...{ type: "color-picker", default: "#aaaaaa" },
-    };
-    wrapper.setProps({ setting: colorPickerSetting });
-
-    let picker = wrapper.find(ColorPicker);
-    expect(picker.length).to.equal(1);
-    expect(picker.prop("setting")).to.equal(colorPickerSetting);
-    expect(picker.prop("value")).to.equal("#aaaaaa");
-    const label = wrapper.find("label").at(0);
-    expect(label.text()).to.equal("label");
-
-    wrapper.setProps({ value: "#222222" });
-    picker = wrapper.find(ColorPicker);
-    expect(picker.prop("value")).to.equal("#222222");
-  });
+    it("renders hidden image setting", () => {
+      const imageSetting = { ...setting, type: "image" };
+      wrapper.setProps({
+        setting: imageSetting,
+        value: "data:image/png;base64,...",
+      });
 
-  it("gets value of list setting without options", () => {
-    wrapper.setProps({
-      setting: { ...setting, ...{ type: "list" } },
-      value: ["item 1", "item 2"],
+      expectHiddenValue("data:image/png;base64,...");
     });
-    expect((wrapper.instance() as ProtocolFormField).getValue()).to.deep.equal([
-      "item 1",
-      "item 2",
-    ]);
-  });
 
-  it("optionally renders instructions", () => {
-    const instructionsSetting = {
-      ...setting,
-      ...{ instructions: "<ul><li>Step 1</li></ul>", type: "list" },
-    };
-    wrapper.setProps({ setting: instructionsSetting });
+    it("renders hidden color picker setting", () => {
+      const colorPickerSetting = {
+        ...setting,
+        type: "color-picker",
+        default: "#aaaaaa",
+      };
+      wrapper.setProps({ setting: colorPickerSetting });
 
-    const instructions = wrapper.find(".well");
-    expect(instructions.length).to.equal(1);
-    expect(instructions.hasClass("description")).to.be.true;
-    expect(instructions.text()).to.equal("Step 1");
-  });
+      // Use the default value.
+      expectHiddenValue("#aaaaaa");
 
-  it("optionally accepts an onChange prop", () => {
-    const onChange = stub();
-    wrapper.setProps({ onChange });
-    const element = wrapper.find(EditableInput);
-    expect(element.prop("onChange")).to.equal(onChange);
-    const setting = { ...wrapper.prop("setting"), ...{ type: "list" } };
-    wrapper.setProps({ setting });
-    const inputList = wrapper.find(InputList);
-    expect(inputList.prop("onChange")).to.equal(onChange);
-  });
+      // Explicitly set the value.
+      wrapper.setProps({ value: "#222222" });
+      expectHiddenValue("#222222");
+    });
 
-  it("optionally accepts a readOnly prop", () => {
-    const setting = { ...wrapper.prop("setting"), ...{ type: "list" } };
-    wrapper.setProps({ setting: setting, readOnly: true });
-    const inputList = wrapper.find(InputList);
-    expect(inputList.prop("readOnly")).to.be.true;
-  });
+    it.skip("gets value of hidden list setting without options", () => {
+      wrapper.setProps({
+        setting: { ...setting, ...{ type: "list" } },
+        value: ["item 1", "item 2"],
+      });
+      expectHiddenValue(["item 1", "item 2"]);
+      expect(
+        (wrapper.instance() as ProtocolFormField).getValue()
+      ).to.deep.equal(["item 1", "item 2"]);
+    });
 
-  it("gets value of text setting", () => {
-    wrapper.setProps({ value: "test" });
-    expect((wrapper.instance() as ProtocolFormField).getValue()).to.equal(
-      "test"
-    );
+    it("accepts instructions, but ignores them when hidden", () => {
+      const instructionsSetting = {
+        ...setting,
+        ...{ instructions: "<ul><li>Step 1</li></ul>", type: "list" },
+      };
+      wrapper.setProps({ setting: instructionsSetting });
+
+      const instructions = wrapper.find(".well");
+      expect(instructions.length).to.equal(0);
+    });
   });
 });
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 3783e1389..66a623575 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -284,6 +284,17 @@ export interface LibraryWithSettingsData {
   [key: string]: string;
 }
 
+export type SpecificSettingType =
+  | "color-picker"
+  | "date"
+  | "date-picker"
+  | "image"
+  | "list"
+  | "menu"
+  | "select"
+  | "text"
+  | "textarea";
+
 export interface SettingData {
   key: string;
   label: string;
@@ -291,7 +302,10 @@ export interface SettingData {
   default?: string | string[] | Object[];
   required?: boolean;
   randomizable?: boolean;
-  type?: string;
+  hidden?: boolean;
+  // TODO: Remove the `string` type once we've migrated all the settings
+  //  types to the new `SpecificSettingType` type.
+  type?: SpecificSettingType | string;
   options?: SettingData[];
   instructions?: string;
   format?: string;