diff --git a/lib/www/client/source/src/components/fields/field-content-dialog.vue b/lib/www/client/source/src/components/fields/field-content-dialog.vue
new file mode 100644
index 0000000..70e94e0
--- /dev/null
+++ b/lib/www/client/source/src/components/fields/field-content-dialog.vue
@@ -0,0 +1,109 @@
+<template>
+  <v-dialog
+    max-width="600"
+    :close-on-content-click="false"
+    offset-y
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-chip
+        class="ml-3"
+        small
+        :light="$vuetify.theme.isDark"
+        :dark="!$vuetify.theme.isDark"
+        :title="getFriendlyTypeName(value.type)"
+        :color="getHSLColourFor(value.type||'str', .4, .5)"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <v-icon small>{{ getTypeIcon(value.type||'str') }}</v-icon>
+        <v-icon small v-if="value.enum"
+          :title="'Values: '+Object.entries(value.enum).map(i => `${i[0]}=${i[1]}`).join('; ')+'\nDefault: '+value.default"
+        >mdi-format-list-group</v-icon>
+      </v-chip>
+    </template>
+
+    <dougal-field-content
+      :readonly="readonly"
+      :value="value"
+      @input="$emit('input', $event)"
+    ></dougal-field-content>
+
+  </v-dialog>
+</template>
+
+<script>
+import DougalFieldContent from './field-content'
+
+export default {
+
+  name: "DougalFieldContentDialog",
+
+  components: {
+    DougalFieldContent
+  },
+
+  props: {
+    value: Object,
+    readonly: Boolean
+  },
+
+  data () {
+    return {
+    };
+  },
+
+  computed: {
+  },
+
+  methods: {
+
+    getFriendlyTypeName (type) {
+      switch (type) {
+        case "str":
+          return "Text";
+        case "int":
+          return "Integer";
+        case "float":
+          return "Float";
+        case "bool":
+          return "Boolean";
+        default:
+          return type ?? "Text (default)";
+      }
+    },
+
+    getTypeIcon (type) {
+      switch (type) {
+        case "str":
+          return "mdi-format-text-variant";
+        case "int":
+          return "mdi-numeric";
+        case "float":
+          return "mdi-decimal";
+        case "bool":
+          return "mdi-format-list-checks";
+        default:
+          return "mdi-format-text";
+      }
+    },
+
+    getHSLColourFor (str, saturation = 1, lightness = 0.25, offset = 0) {
+
+      function getHash (v) {
+        return [...v].reduce( (acc, cur) => String(cur).charCodeAt(0) + ((acc << 5) - acc), 0 );
+      }
+
+      const h = (getHash(str) + offset) % 360;
+      const s = saturation * 100;
+      const l = this.$vuetify.theme.isDark
+        ? (1-lightness) * 100
+        : lightness * 100;
+
+      return `hsl(${h},${s}%,${l}%)`;
+    }
+
+  }
+
+}
+
+</script>
diff --git a/lib/www/client/source/src/components/fields/field-content.vue b/lib/www/client/source/src/components/fields/field-content.vue
new file mode 100644
index 0000000..682c9d7
--- /dev/null
+++ b/lib/www/client/source/src/components/fields/field-content.vue
@@ -0,0 +1,242 @@
+<template>
+  <v-card flat elevation="0">
+    <v-card-subtitle>Item options</v-card-subtitle>
+    <v-card-text>
+      <v-select
+        label="Value type"
+        v-model="type"
+        :items="types"
+        value="int"
+        :readonly="readonly"
+      ></v-select>
+
+      <v-checkbox
+        label="Enumerated values"
+        v-model="enumerated"
+        :readonly="readonly"
+      ></v-checkbox>
+    </v-card-text>
+
+    <template v-if="enumerated">
+      <v-card-subtitle>Valid options</v-card-subtitle>
+      <v-card-text>
+        <v-list dense>
+          <v-list-item v-for="(out, key) in value.enum" :key=key
+          >
+            <v-list-item-content class="mr-1">
+              <v-text-field
+                dense
+                hide-details="auto"
+                v-model="key"
+                :readonly="readonly"
+              ></v-text-field>
+            </v-list-item-content>
+            <v-list-item-content class="ml-1">
+              <v-select v-if="type == 'bool'"
+                dense
+                hide-details="auto"
+                :items="[ true, false ]"
+                v-model="value.enum[key]"
+                :readonly="readonly"
+              ></v-select>
+              <v-text-field v-else
+                dense
+                hide-details="auto"
+                v-model="value.enum[key]"
+                :readonly="readonly"
+              ></v-text-field>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-icon
+                small
+                color="error"
+                :disabled="readonly"
+                @click="removeEnum(key)"
+              >mdi-minus-circle</v-icon>
+            </v-list-item-action>
+          </v-list-item>
+
+          <v-list-item v-if="!readonly"
+          >
+            <v-list-item-content class="mr-1">
+              <v-text-field
+                dense
+                hide-details="auto"
+                label="New input value"
+                v-model="newEnumKey"
+              ></v-text-field>
+            </v-list-item-content>
+            <v-list-item-content class="ml-1">
+              <v-select v-if="type == 'bool'"
+                dense
+                hide-details="auto"
+                label="New output value"
+                :items="[ true, false ]"
+                v-model="newEnumValue"
+              ></v-select>
+              <v-text-field v-else
+                dense
+                hide-details="auto"
+                label="New output value"
+                v-model="newEnumValue"
+              ></v-text-field>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-icon
+                small
+                color="primary"
+                :disabled="!isNewEnumValid"
+                @click="addEnum"
+                >mdi-plus-circle</v-icon>
+            </v-list-item-action>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-content>
+              <v-select v-if="type == 'bool'"
+                dense
+                hide-details="auto"
+                label="Default value"
+                hint="Value to use if none matches"
+                :items="[ true, false ]"
+                v-model="defaultValue"
+                :readonly="readonly"
+              ></v-select>
+              <v-text-field v-else
+                label="Default value"
+                hint="Value to use if none matches"
+                persistent-hint
+                v-model="defaultValue"
+                :readonly="readonly"
+              ></v-text-field>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-icon
+                small
+                color="secondary"
+                :disabled="readonly"
+                @click="defaultValue = null"
+              >mdi-backspace</v-icon>
+            </v-list-item-action>
+          </v-list-item>
+
+        </v-list>
+
+      </v-card-text>
+    </template>
+  </v-card>
+</template>
+
+<script>
+
+export default {
+  name: "DougalFieldContent",
+
+  props: {
+    value: Object,
+    readonly: Boolean
+  },
+
+  data () {
+    return {
+      newEnumKey: null,
+      newEnumValue: null,
+      types: [
+        { text: "Text", value: "str" },
+        { text: "Integer", value: "int" },
+        { text: "Float", value: "float" },
+        { text: "Boolean", value: "bool" },
+      ]
+    }
+  },
+
+  computed: {
+
+    type: {
+      get () {
+        return this.value?.type ?? "str";
+      },
+
+      set (v) {
+          this.$emit("input", {
+            ...this.value,
+            type: v
+          })
+      }
+    },
+
+    enumerated: {
+      get () {
+        return typeof this.value?.enum === "object";
+      },
+
+      set (v) {
+        if (v) {
+          this.$emit("input", {
+            enum: {},
+            ...this.value
+          })
+        } else {
+          const obj = {...this.value};
+          delete obj.enum;
+          this.$emit("input", obj)
+        }
+      }
+    },
+
+    defaultValue: {
+
+      get () {
+        return this.value?.default;
+      },
+
+      set (v) {
+        this.$emit("input", {
+          ...this.value,
+          "default": v
+        });
+      }
+
+    },
+
+    isNewEnumValid () {
+      return !!(this.newEnumKey &&
+        !Object.keys(this.value.enum).includes(this.newEnumKey) &&
+        (typeof this.newEnumValue == "boolean" || this.newEnumValue));
+    }
+
+  },
+
+  watch: {
+  },
+
+  methods: {
+
+    addEnum () {
+      this.$emit("input", {
+        ...this.value,
+        enum: {
+          ...this.value.enum,
+          [this.newEnumKey]: this.newEnumValue
+        }
+      });
+      this.newEnumKey = null;
+      this.newEnumValue = null;
+    },
+
+    removeEnum (key) {
+      const obj = {...this.value.enum};
+      delete obj[key];
+      this.$emit("input", {
+        ...this.value,
+        enum: obj
+      });
+    }
+
+  },
+
+  mounted () {
+  }
+
+}
+</script>