diff --git a/docs/guide/components.md b/docs/guide/components.md
index 68f887d..55e70ee 100644
--- a/docs/guide/components.md
+++ b/docs/guide/components.md
@@ -404,6 +404,104 @@ const formOptions = {
 
 ---
 
+## KeyValueField
+
+Renders a dynamic key-value pair editor for record types.
+
+### Handles
+
+- `type: 'object'` with typed `additionalProperties` (e.g., `{ type: 'string' }`) but no defined `properties`
+
+### Example Schema
+
+**Basic record type:**
+```typescript
+{
+  type: 'object',
+  title: 'Additional Parameters',
+  description: 'Dynamic key-value pairs',
+  additionalProperties: {
+    type: 'string'
+  }
+}
+```
+
+**OAuth headers example:**
+```typescript
+{
+  type: 'object',
+  title: 'Custom OAuth Headers',
+  description: 'Add custom headers for OAuth requests',
+  additionalProperties: {
+    type: 'string'
+  }
+}
+```
+
+### Features
+
+- **Dynamic rows**: Add/remove key-value pairs
+- **Type-safe**: Values are typed based on `additionalProperties.type`
+- **Clean UI**: Grid layout with aligned inputs
+- **Theme inheritance**: Inherits from parent Quasar theme (no hardcoded colors)
+- **Validation**: Empty keys are automatically filtered out
+- **Button customization**: Customize add/remove buttons via `x-quickforms-quasar`
+
+### UI Behavior
+
+- **Add button**: Creates a new empty key-value pair
+- **Remove button**: Deletes a specific pair
+- **Auto-cleanup**: Pairs with empty keys are not saved to form data
+
+### Rendering
+
+- **Plain Vue**: Standard HTML inputs with responsive grid layout
+- **Quasar**: `QInput` components with Quasar styling and icons
+
+### Button Customization (Quasar)
+
+**Per-field customization:**
+```typescript
+{
+  type: 'object',
+  title: 'Environment Variables',
+  additionalProperties: { type: 'string' },
+  'x-quickforms-quasar': {
+    addButton: {
+      label: 'Add Variable',
+      icon: 'add_circle',
+      color: 'secondary',
+      outline: false
+    },
+    removeButton: {
+      icon: 'delete',
+      color: 'negative'
+    }
+  }
+}
+```
+
+**Global defaults:**
+```typescript
+const formOptions = {
+  quickformsDefaults: {
+    keyvalue: {
+      addButton: {
+        label: 'Add Item',
+        icon: 'add',
+        color: 'primary'
+      },
+      removeButton: {
+        icon: 'close',
+        color: 'negative'
+      }
+    }
+  }
+}
+```
+
+---
+
 ## ArrayField
 
 Renders dynamic array fields with add/remove buttons.
diff --git a/packages/core/package.json b/packages/core/package.json
index 1a9d4b7..6b2a2db 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Framework-agnostic core for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 9935af3..45107f7 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -20,11 +20,12 @@ export {
   isNumberType,
   isIntegerType,
   isBooleanType,
+  isEnumType,
   isObjectType,
   isArrayType,
-  isNullType,
-  isEnumType,
+  isRecordType,
   isJsonType,
+  isNullType,
   hasConst,
   hasFormat,
   isEmailFormat,
diff --git a/packages/core/src/testers.ts b/packages/core/src/testers.ts
index 96152e0..7af241b 100644
--- a/packages/core/src/testers.ts
+++ b/packages/core/src/testers.ts
@@ -42,9 +42,23 @@ export const isArrayType = (schema: JSONSchema): boolean => {
   return schema.type === 'array';
 };
 
+/**
+ * Record type tester - for dynamic key-value pairs
+ * Matches objects with typed additionalProperties (e.g., Record<string, string>)
+ */
+export const isRecordType = (schema: JSONSchema): boolean => {
+  return (
+    schema.type === 'object' &&
+    schema.additionalProperties !== undefined &&
+    typeof schema.additionalProperties === 'object' &&
+    Object.keys(schema.additionalProperties).length > 0 && // Has typed additionalProperties
+    (!schema.properties || Object.keys(schema.properties).length === 0)
+  );
+};
+
 /**
  * JSON object tester - for freeform JSON editing
- * Matches objects with additionalProperties but no defined properties,
+ * Matches objects with empty additionalProperties (freeform),
  * or any field with x-render: "jsoneditor"
  */
 export const isJsonType = (schema: JSONSchema): boolean => {
@@ -53,10 +67,12 @@ export const isJsonType = (schema: JSONSchema): boolean => {
     return true;
   }
   
-  // Automatic detection: object with additionalProperties but no defined properties
+  // Automatic detection: object with additionalProperties={} (empty, freeform)
   return (
     schema.type === 'object' &&
     schema.additionalProperties !== undefined &&
+    typeof schema.additionalProperties === 'object' &&
+    Object.keys(schema.additionalProperties).length === 0 && // Empty = freeform
     (!schema.properties || Object.keys(schema.properties).length === 0)
   );
 };
diff --git a/packages/quasar/dev/App.vue b/packages/quasar/dev/App.vue
index 6dcc21c..422f258 100644
--- a/packages/quasar/dev/App.vue
+++ b/packages/quasar/dev/App.vue
@@ -379,6 +379,26 @@ const schema: JSONSchema = {
       },
     },
 
+    // === KEY-VALUE EDITOR (RECORD TYPE) ===
+    additionalParams: {
+      type: "object",
+      title: "Additional Parameters",
+      description: "Dynamic key-value pairs (Record<string, string>)",
+      additionalProperties: {
+        type: "string",
+      },
+    },
+
+    // === KEY-VALUE EDITOR (OAUTH EXAMPLE) ===
+    oauthHeaders: {
+      type: "object",
+      title: "Custom OAuth Headers",
+      description: "Add custom headers for OAuth requests",
+      additionalProperties: {
+        type: "string",
+      },
+    },
+
     // === URL FIELD ===
     website: {
       type: "string",
diff --git a/packages/quasar/package.json b/packages/quasar/package.json
index 4661811..6dfa8cc 100644
--- a/packages/quasar/package.json
+++ b/packages/quasar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms-quasar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Quasar UI components for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/quasar/src/components/QuasarKeyValueField.vue b/packages/quasar/src/components/QuasarKeyValueField.vue
new file mode 100644
index 0000000..a5ea3b9
--- /dev/null
+++ b/packages/quasar/src/components/QuasarKeyValueField.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { QInput, QBtn, QIcon } from 'quasar';
+import { useFormField, generateFieldId, useFormContext } from '@quickflo/quickforms-vue';
+import type { FieldProps } from '@quickflo/quickforms-vue';
+
+const props = withDefaults(defineProps<FieldProps>(), {
+  disabled: false,
+  readonly: false,
+});
+
+const { value, setValue, label, hint, errorMessage, required } = useFormField(
+  props.path,
+  props.schema,
+  { label: props.label }
+);
+
+const formContext = useFormContext();
+const fieldId = generateFieldId(props.path);
+
+// Merge QuickForms convenience features for button customization
+const quickformsFeatures = computed(() => {
+  const globalDefaults = (formContext as any)?.quickformsDefaults?.keyvalue || {};
+  const schemaFeatures = (props.schema as any)["x-quickforms-quasar"] || {};
+
+  // Merge QBtn props: defaults -> global -> schema (schema has highest priority)
+  const addButtonDefaults = {
+    outline: true,
+    color: "primary",
+    icon: "add",
+    label: formContext?.labels?.addItem || "Add Parameter",
+    size: "sm",
+  };
+
+  const removeButtonDefaults = {
+    flat: true,
+    round: true,
+    dense: true,
+    size: "sm",
+    icon: "close",
+    color: "negative",
+  };
+
+  const addButton = {
+    ...addButtonDefaults,
+    ...(globalDefaults.addButton || {}),
+    ...(schemaFeatures.addButton || {}),
+  };
+
+  const removeButton = {
+    ...removeButtonDefaults,
+    ...(globalDefaults.removeButton || {}),
+    ...(schemaFeatures.removeButton || {}),
+  };
+
+  return {
+    addButton,
+    removeButton,
+  };
+});
+
+// Convert object to array of key-value pairs for editing
+interface KeyValuePair {
+  key: string;
+  value: string;
+  id: number;
+}
+
+let nextId = 0;
+const pairs = ref<KeyValuePair[]>([]);
+const isInternalUpdate = ref(false);
+
+// Initialize from value
+watch(
+  () => value.value,
+  (newValue) => {
+    if (isInternalUpdate.value) {
+      isInternalUpdate.value = false;
+      return;
+    }
+    
+    if (newValue && typeof newValue === 'object' && !Array.isArray(newValue)) {
+      pairs.value = Object.entries(newValue).map(([key, val]) => ({
+        key,
+        value: String(val),
+        id: nextId++
+      }));
+    } else if (!pairs.value.length) {
+      pairs.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+// Update value when pairs change
+watch(
+  pairs,
+  (newPairs) => {
+    const obj: Record<string, string> = {};
+    newPairs.forEach(pair => {
+      if (pair.key.trim()) {
+        obj[pair.key] = pair.value;
+      }
+    });
+    isInternalUpdate.value = true;
+    setValue(obj);
+  },
+  { deep: true }
+);
+
+function addPair() {
+  pairs.value.push({ key: '', value: '', id: nextId++ });
+}
+
+function removePair(id: number) {
+  pairs.value = pairs.value.filter(p => p.id !== id);
+}
+</script>
+
+<template>
+  <div class="quickform-keyvalue-field">
+    <div v-if="label" class="text-subtitle2 q-mb-xs">
+      {{ label }}
+      <span v-if="required" style="color: red; margin-left: 0.25rem">*</span>
+    </div>
+
+    <div v-if="hint" class="text-caption text-grey-7 q-mb-sm">
+      {{ hint }}
+    </div>
+
+    <div class="q-pa-md rounded-borders">
+      <div v-if="pairs.length" class="row items-center q-gutter-sm q-mb-sm">
+        <div class="col text-weight-medium text-caption">Key</div>
+        <div class="col text-weight-medium text-caption">Value</div>
+        <div style="width: 40px"></div>
+      </div>
+
+      <div
+        v-for="pair in pairs"
+        :key="pair.id"
+        class="row items-center q-gutter-sm q-mb-sm"
+      >
+        <QInput
+          v-model="pair.key"
+          outlined
+          dense
+          placeholder="key"
+          class="col"
+          :disable="disabled"
+          :readonly="readonly"
+        />
+        <QInput
+          v-model="pair.value"
+          outlined
+          dense
+          placeholder="value"
+          class="col"
+          :disable="disabled"
+          :readonly="readonly"
+        />
+        <QBtn
+          v-bind="quickformsFeatures.removeButton"
+          :disable="disabled || readonly"
+          @click="removePair(pair.id)"
+          :title="formContext?.labels?.removeItem || 'Remove'"
+        >
+          <q-tooltip>{{
+            formContext?.labels?.removeItem || "Remove"
+          }}</q-tooltip>
+        </QBtn>
+      </div>
+
+      <QBtn
+        v-bind="quickformsFeatures.addButton"
+        class="full-width"
+        :disable="disabled || readonly"
+        @click="addPair"
+      />
+    </div>
+
+    <div v-if="errorMessage" class="text-negative text-caption q-mt-xs">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
diff --git a/packages/quasar/src/index.ts b/packages/quasar/src/index.ts
index fef949d..cf74c2a 100644
--- a/packages/quasar/src/index.ts
+++ b/packages/quasar/src/index.ts
@@ -11,6 +11,7 @@ export { default as QuasarTimeField } from './components/QuasarTimeField.vue';
 export { default as QuasarDateTimeField } from './components/QuasarDateTimeField.vue';
 export { default as QuasarObjectField } from './components/QuasarObjectField.vue';
 export { default as QuasarArrayField } from './components/QuasarArrayField.vue';
+export { default as QuasarKeyValueField } from './components/QuasarKeyValueField.vue';
 export { default as QuasarJsonField } from './components/QuasarJsonField.vue';
 export { default as QuasarMultiEnumField } from './components/QuasarMultiEnumField.vue';
 export { default as QuasarOneOfField } from './components/QuasarOneOfField.vue';
@@ -52,6 +53,7 @@ export {
   isEnumType,
   isObjectType,
   isArrayType,
+  isRecordType,
   isJsonType,
   isNullType,
   // Format testers
diff --git a/packages/quasar/src/registry.ts b/packages/quasar/src/registry.ts
index f914c7a..6931292 100644
--- a/packages/quasar/src/registry.ts
+++ b/packages/quasar/src/registry.ts
@@ -10,6 +10,7 @@ import {
   isDateTimeFormat,
   isObjectType,
   isArrayType,
+  isRecordType,
   isJsonType,
   hasOneOf,
   hasAnyOf,
@@ -26,6 +27,7 @@ import QuasarTimeField from './components/QuasarTimeField.vue';
 import QuasarDateTimeField from './components/QuasarDateTimeField.vue';
 import QuasarObjectField from './components/QuasarObjectField.vue';
 import QuasarArrayField from './components/QuasarArrayField.vue';
+import QuasarKeyValueField from './components/QuasarKeyValueField.vue';
 import QuasarJsonField from './components/QuasarJsonField.vue';
 import QuasarMultiEnumField from './components/QuasarMultiEnumField.vue';
 import QuasarOneOfField from './components/QuasarOneOfField.vue';
@@ -100,7 +102,12 @@ export function createQuasarRegistry(): ComponentRegistry<Component> {
     rankWith(3, isDateTimeFormat(schema))
   );
 
-  // Register JSON field (priority: 5, higher than object since it's more specific)
+  // Register key-value field (priority: 6, for record types with typed additionalProperties)
+  registry.register('keyvalue', QuasarKeyValueField, (schema) =>
+    rankWith(6, isRecordType(schema))
+  );
+
+  // Register JSON field (priority: 5, for freeform objects)
   registry.register('json', QuasarJsonField, (schema) =>
     rankWith(5, isJsonType(schema))
   );
diff --git a/packages/vue/dev/App.vue b/packages/vue/dev/App.vue
index 75f4f6d..2b7e91c 100644
--- a/packages/vue/dev/App.vue
+++ b/packages/vue/dev/App.vue
@@ -243,6 +243,14 @@ const fullTestSchema: JSONSchema = {
       "x-render": "jsoneditor",
       "x-rows": 6,
     },
+    environmentVars: {
+      type: "object",
+      title: "Environment Variables",
+      description: "Key-value pairs (Record<string, string>)",
+      additionalProperties: {
+        type: "string",
+      },
+    },
     paymentMethod: {
       type: "object",
       title: "Payment Method",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 384cf49..962e240 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms-vue",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Vue 3 bindings for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/vue/src/components/DynamicForm.vue b/packages/vue/src/components/DynamicForm.vue
index 639a8f1..3b73945 100644
--- a/packages/vue/src/components/DynamicForm.vue
+++ b/packages/vue/src/components/DynamicForm.vue
@@ -152,6 +152,11 @@ const onSubmit = handleSubmit((submittedValues) => {
   }
 });
 
+// Check if schema is a single field (not a form with multiple properties)
+const isSingleField = computed(() => {
+  return props.schema.type === "object" && !props.schema.properties;
+});
+
 // Get all top-level properties from schema
 const properties = computed(() => {
   if (props.schema.type !== "object" || !props.schema.properties) {
@@ -168,7 +173,17 @@ const properties = computed(() => {
 
 <template>
   <form class="quickform" @submit="onSubmit">
+    <!-- Single field schema (e.g., JSON editor, single object field) -->
+    <FieldRenderer
+      v-if="isSingleField"
+      :schema="schema"
+      path=""
+      :disabled="options.disabled"
+      :readonly="options.readonly"
+    />
+    <!-- Multiple fields (normal form) -->
     <FieldRenderer
+      v-else
       v-for="field in properties"
       :key="field.key"
       :schema="field.schema"
diff --git a/packages/vue/src/components/KeyValueField.vue b/packages/vue/src/components/KeyValueField.vue
new file mode 100644
index 0000000..3fd0a42
--- /dev/null
+++ b/packages/vue/src/components/KeyValueField.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useFormField } from '../composables/useFormField.js';
+import { generateFieldId } from '../composables/utils.js';
+import type { FieldProps } from '../types/index.js';
+
+const props = withDefaults(defineProps<FieldProps>(), {
+  disabled: false,
+  readonly: false
+});
+
+const { value, setValue, label, hint, errorMessage, required } = useFormField(
+  props.path,
+  props.schema,
+  { label: props.label }
+);
+
+const fieldId = generateFieldId(props.path);
+
+// Convert object to array of key-value pairs for editing
+interface KeyValuePair {
+  key: string;
+  value: string;
+  id: number;
+}
+
+let nextId = 0;
+const pairs = ref<KeyValuePair[]>([]);
+const isInternalUpdate = ref(false);
+
+// Initialize from value
+watch(
+  () => value.value,
+  (newValue) => {
+    if (isInternalUpdate.value) {
+      isInternalUpdate.value = false;
+      return;
+    }
+    
+    if (newValue && typeof newValue === 'object' && !Array.isArray(newValue)) {
+      pairs.value = Object.entries(newValue).map(([key, val]) => ({
+        key,
+        value: String(val),
+        id: nextId++
+      }));
+    } else if (!pairs.value.length) {
+      pairs.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+// Update value when pairs change
+watch(
+  pairs,
+  (newPairs) => {
+    const obj: Record<string, string> = {};
+    newPairs.forEach(pair => {
+      if (pair.key.trim()) {
+        obj[pair.key] = pair.value;
+      }
+    });
+    isInternalUpdate.value = true;
+    setValue(obj);
+  },
+  { deep: true }
+);
+
+function addPair() {
+  pairs.value.push({ key: '', value: '', id: nextId++ });
+}
+
+function removePair(id: number) {
+  pairs.value = pairs.value.filter(p => p.id !== id);
+}
+</script>
+
+<template>
+  <div class="quickform-field quickform-keyvalue-field">
+    <label v-if="label" :for="fieldId" class="quickform-label">
+      {{ label }}
+      <span v-if="required" class="quickform-required">*</span>
+    </label>
+
+    <div v-if="hint" :id="`${fieldId}-hint`" class="quickform-hint">
+      <span v-html="hint"></span>
+    </div>
+
+    <div class="quickform-keyvalue-container">
+      <div v-if="pairs.length" class="quickform-keyvalue-header">
+        <span class="quickform-keyvalue-header-cell">Key</span>
+        <span class="quickform-keyvalue-header-cell">Value</span>
+        <span class="quickform-keyvalue-header-cell"></span>
+      </div>
+
+      <div
+        v-for="pair in pairs"
+        :key="pair.id"
+        class="quickform-keyvalue-row"
+      >
+        <input
+          v-model="pair.key"
+          type="text"
+          placeholder="key"
+          class="quickform-input quickform-keyvalue-key"
+          :disabled="disabled"
+          :readonly="readonly"
+        />
+        <input
+          v-model="pair.value"
+          type="text"
+          placeholder="value"
+          class="quickform-input quickform-keyvalue-value"
+          :disabled="disabled"
+          :readonly="readonly"
+        />
+        <button
+          type="button"
+          class="quickform-button quickform-keyvalue-remove"
+          :disabled="disabled || readonly"
+          @click="removePair(pair.id)"
+        >
+          ×
+        </button>
+      </div>
+
+      <button
+        type="button"
+        class="quickform-button quickform-keyvalue-add"
+        :disabled="disabled || readonly"
+        @click="addPair"
+      >
+        + Add Parameter
+      </button>
+    </div>
+
+    <div v-if="errorMessage" class="quickform-error">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.quickform-field {
+  margin-bottom: var(--quickform-spacing-md, 1rem);
+}
+
+.quickform-label {
+  display: block;
+  font-weight: var(--quickform-label-font-weight, 500);
+  font-size: var(--quickform-label-font-size, 0.875rem);
+  color: var(--quickform-label-color, #374151);
+  margin-bottom: var(--quickform-spacing-xs, 0.5rem);
+}
+
+.quickform-required {
+  color: var(--quickform-required-color, #ef4444);
+  margin-left: var(--quickform-required-margin-left, 0.25rem);
+}
+
+.quickform-hint {
+  font-size: var(--quickform-hint-font-size, 0.875rem);
+  color: var(--quickform-hint-color, #6b7280);
+  margin-bottom: var(--quickform-spacing-xs, 0.5rem);
+}
+
+.quickform-keyvalue-container {
+  border: 1px solid var(--quickform-color-border, #d1d5db);
+  border-radius: var(--quickform-radius-md, 0.375rem);
+  padding: var(--quickform-spacing-md, 1rem);
+  background-color: var(--quickform-input-bg, #ffffff);
+}
+
+.quickform-keyvalue-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr 40px;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  font-size: 0.813rem;
+  color: var(--quickform-label-color, #374151);
+}
+
+.quickform-keyvalue-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 40px;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.quickform-input {
+  padding: var(--quickform-input-padding, 0.5rem 0.75rem);
+  border: 1px solid var(--quickform-color-border, #d1d5db);
+  border-radius: var(--quickform-radius-sm, 0.25rem);
+  font-size: var(--quickform-input-font-size, 0.875rem);
+  color: var(--quickform-input-color, #1f2937);
+  background-color: var(--quickform-input-bg, #ffffff);
+  transition: border-color 0.2s;
+}
+
+.quickform-input:focus {
+  outline: none;
+  border-color: var(--quickform-color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px var(--quickform-color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.quickform-input:disabled {
+  background-color: var(--quickform-input-disabled-bg, #f3f4f6);
+  cursor: not-allowed;
+}
+
+.quickform-button {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--quickform-color-border, #d1d5db);
+  border-radius: var(--quickform-radius-sm, 0.25rem);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  background-color: var(--quickform-input-bg, #ffffff);
+}
+
+.quickform-keyvalue-remove {
+  color: var(--quickform-error-color, #ef4444);
+  font-size: 1.5rem;
+  font-weight: 400;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.quickform-keyvalue-remove:hover:not(:disabled) {
+  background-color: var(--quickform-error-color, #ef4444);
+  color: white;
+  border-color: var(--quickform-error-color, #ef4444);
+}
+
+.quickform-keyvalue-add {
+  color: var(--quickform-color-primary, #3b82f6);
+  border-color: var(--quickform-color-primary, #3b82f6);
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.quickform-keyvalue-add:hover:not(:disabled) {
+  background-color: var(--quickform-color-primary, #3b82f6);
+  color: white;
+}
+
+.quickform-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.quickform-error {
+  margin-top: var(--quickform-spacing-xs, 0.5rem);
+  font-size: var(--quickform-error-font-size, 0.875rem);
+  color: var(--quickform-error-color, #ef4444);
+}
+</style>
diff --git a/packages/vue/src/components/ObjectField.vue b/packages/vue/src/components/ObjectField.vue
index c032c9c..c3029ba 100644
--- a/packages/vue/src/components/ObjectField.vue
+++ b/packages/vue/src/components/ObjectField.vue
@@ -46,6 +46,7 @@ const properties = computed(() => {
           :disabled="disabled"
           :readonly="readonly"
         />
+        
       </div>
 
       <div v-if="errorMessage" class="quickform-error">
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index c700993..64b4f39 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -14,6 +14,7 @@ export { default as EnumField } from './components/EnumField.vue';
 export { default as DateField } from './components/DateField.vue';
 export { default as ObjectField } from './components/ObjectField.vue';
 export { default as ArrayField } from './components/ArrayField.vue';
+export { default as KeyValueField } from './components/KeyValueField.vue';
 export { default as JsonField } from './components/JsonField.vue';
 export { default as OneOfField } from './components/OneOfField.vue';
 export { default as AllOfField } from './components/AllOfField.vue';
@@ -47,6 +48,7 @@ export {
   isEnumType,
   isObjectType,
   isArrayType,
+  isRecordType,
   isJsonType,
   isNullType,
   // Format testers
diff --git a/packages/vue/src/registry.ts b/packages/vue/src/registry.ts
index a56a7da..35a3750 100644
--- a/packages/vue/src/registry.ts
+++ b/packages/vue/src/registry.ts
@@ -1,5 +1,5 @@
 import type { Component } from 'vue';
-import { ComponentRegistry, isStringType, isNumberType, isBooleanType, isEnumType, isDateFormat, isObjectType, isArrayType, isJsonType, hasOneOf, hasAnyOf, hasAllOf, hasConst, rankWith } from '@quickflo/quickforms';
+import { ComponentRegistry, isStringType, isNumberType, isBooleanType, isEnumType, isDateFormat, isObjectType, isArrayType, isRecordType, isJsonType, hasOneOf, hasAnyOf, hasAllOf, hasConst, rankWith } from '@quickflo/quickforms';
 import StringField from './components/StringField.vue';
 import NumberField from './components/NumberField.vue';
 import BooleanField from './components/BooleanField.vue';
@@ -7,6 +7,7 @@ import EnumField from './components/EnumField.vue';
 import DateField from './components/DateField.vue';
 import ObjectField from './components/ObjectField.vue';
 import ArrayField from './components/ArrayField.vue';
+import KeyValueField from './components/KeyValueField.vue';
 import JsonField from './components/JsonField.vue';
 import OneOfField from './components/OneOfField.vue';
 import AllOfField from './components/AllOfField.vue';
@@ -69,7 +70,12 @@ export function createDefaultRegistry(): ComponentRegistry<Component> {
     rankWith(2, isDateFormat(schema))
   );
 
-  // Register JSON field (priority: 5, higher than object since it's more specific)
+  // Register key-value field (priority: 6, for record types with typed additionalProperties)
+  registry.register('keyvalue', KeyValueField, (schema) =>
+    rankWith(6, isRecordType(schema))
+  );
+
+  // Register JSON field (priority: 5, for freeform objects)
   registry.register('json', JsonField, (schema) =>
     rankWith(5, isJsonType(schema))
   );