diff --git a/modules/@apostrophecms/home-page/index.js b/modules/@apostrophecms/home-page/index.js
index 584b8dd6..cd789f2d 100644
--- a/modules/@apostrophecms/home-page/index.js
+++ b/modules/@apostrophecms/home-page/index.js
@@ -4,6 +4,10 @@ module.exports = {
   },
   fields: {
     add: {
+      test: {
+        type: 'test',
+        label: 'Test'
+      },
       main: {
         type: 'area',
         options: {
@@ -50,9 +54,19 @@ module.exports = {
         label: 'Basics',
         fields: [
           'title',
-          'main'
+          'main',
+          'test'
         ]
       }
     }
+  },
+  init(self) {
+    self.apos.schema.addFieldType({
+      name: 'test',
+      convert(req, field, data, object) {
+        object[field.name] = self.apos.launder.string(data[field.name]);
+      },
+      vueComponent: 'TestField'
+    });
   }
 };
diff --git a/modules/@apostrophecms/home-page/ui/apos/components/TestField.vue b/modules/@apostrophecms/home-page/ui/apos/components/TestField.vue
new file mode 100644
index 00000000..4fa1ef61
--- /dev/null
+++ b/modules/@apostrophecms/home-page/ui/apos/components/TestField.vue
@@ -0,0 +1,36 @@
+<template>
+  <AposInputWrapper
+    :modifiers="modifiers" :field="field"
+    :error="effectiveError" :uid="uid"
+    :display-options="displayOptions"
+  >
+    <template #body>
+      <div class="apos-input-wrapper">
+        <input v-model="next" />
+        <button class="clear" @click="clear">Clear</button>
+      </div>
+    </template>
+  </AposInputWrapper>
+</template>
+
+<script>
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+
+export default {
+  name: 'TestField',
+  mixins: [ AposInputMixin ],
+  methods: {
+    validate(value) {
+      if (this.field.required) {
+        if (!value) {
+          return 'required';
+        }
+      }
+      return false;
+    },
+    clear() {
+      this.next = null;
+    }
+  }
+};
+</script>