diff --git a/client/src/components/NiceForm.vue b/client/src/components/NiceForm.vue
index f2aa438..fac22d0 100644
--- a/client/src/components/NiceForm.vue
+++ b/client/src/components/NiceForm.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { loadConfigFromFile } from 'vite';
+
 
 const props = defineModel<{
   title: string
@@ -7,18 +9,45 @@ const props = defineModel<{
     label: string,
     component: () => Component,
     props: any,
+    default: any,
+    if?: () => boolean,
   }[]
+  modelValue: any,
 }>();
-let { title, fields } = $(props);
 
+let { title, fields, modelValue } = $(props);
+
+let enabled = $ref({name: true} as any);
+
+const emit = defineEmits<{
+  (event: 'update:modelValue'): void,
+  (event: 'update:enabled'): void
+}>();
+
+onMounted(async() => {
+  for (const field of fields) {
+    if (modelValue[field.key] == undefined) {
+      if (!field.default) {
+        modelValue[field.key] = {};
+      } else {
+        modelValue[field.key] = field.default;
+      }
+      enabled[field.key] = true;
+    }
+  }
+  
+  console.log("modelValue", modelValue, enabled);
+});
 </script>
 
 <template>
   <div class="form">
     <h2>{{ title }}</h2>
     <template v-for="(field, index) in fields" :key="index">
-      <label :for="field.key" v-text="field.label"/>
-      <component :name="field.key" :is="field.component()" v-bind="field.props"/>
+      <template v-if="enabled[field.key]">
+        <label :for="field.key" v-text="field.label"/>
+        <component :name="field.key" :is="field.component()" v-bind="field.props" v-model="modelValue[field.key]"/>
+      </template>
     </template>
   </div>
 </template>
diff --git a/client/src/definitions.ts b/client/src/definitions.ts
index 290e02b..d486a78 100644
--- a/client/src/definitions.ts
+++ b/client/src/definitions.ts
@@ -20,11 +20,11 @@ export const editTypes: { [key: string]: {[key: string]: any} } = {
       "interfaces": {
         title: "Interfaces",
         fields: [
-          {key: "name", label: "Name", component: () => TextBox },
+          {key: "name", label: "Name", component: () => TextBox, default: "placeholder"},
           {key: "type", label: "Type", component: () => PillBar, props: {options: [{name: 'Hardware', selected: true}, {name: 'VLAN'}, {name: 'Bond'}, {name: 'Brdige'}]}},
           {key: "hardware_interface", label: "Hardware Interface", component: () => TextBox },
           {key: "vlan_id", label: "VLAN ID", component: () => NumberBox, props: {min: 1, max: 4094} },
-          {key: "bond_members", label: "Nond Members", component: () => TextBox },
+          {key: "bond_members", label: "Bond Members", component: () => TextBox, if: () => true },
           {key: "bridge_members", label: "Bridge Memebers", component: () => TextBox },
           {key: "addressing_mode", label: "Addressing Mode", component: () => PillBar, props: {options: [{name: 'None', selected: true}, {name: 'Static'}, {name: 'DHCP'}]}},
           {key: "address", label: "Address", component: () => TextBox },
diff --git a/client/src/pages/edit/[subsystem]/[entity]/[id].vue b/client/src/pages/edit/[subsystem]/[entity]/[id].vue
index 01b8f28..49d531d 100644
--- a/client/src/pages/edit/[subsystem]/[entity]/[id].vue
+++ b/client/src/pages/edit/[subsystem]/[entity]/[id].vue
@@ -5,6 +5,8 @@ import { editTypes } from "../../../../definitions";
 const props = $defineProps<{subsystem: string, entity: string, id: string}>();
 const { subsystem, entity, id } = $(props);
 
+let data = $ref({} as {});
+
 async function update() {
   
 }
@@ -16,7 +18,7 @@ async function update() {
       <button @click="update">Update</button>
       <button @click="$router.go(-1)">Discard</button>
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/>
+    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields" v-model="data"/>
   </div>
   <div v-else>
     <PageHeader title="Error"/>
diff --git a/client/src/pages/edit/[subsystem]/[entity]/index.vue b/client/src/pages/edit/[subsystem]/[entity]/index.vue
index 4d4bba8..32e74fd 100644
--- a/client/src/pages/edit/[subsystem]/[entity]/index.vue
+++ b/client/src/pages/edit/[subsystem]/[entity]/index.vue
@@ -4,6 +4,8 @@ import { editTypes } from "../../../../definitions";
 const props = $defineProps<{subsystem: string, entity: string}>();
 const { subsystem, entity } = $(props);
 
+let data = $ref({});
+
 async function create() {
   
 }
@@ -15,7 +17,7 @@ async function create() {
       <button @click="create">Create</button>
       <button @click="$router.go(-1)">Discard</button>
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/>
+    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields" v-model="data"/>
   </div>
   <div v-else>
     <PageHeader title="Error"/>