diff --git a/docs/.vitepress/components/playground/loaders/react-mui.ts b/docs/.vitepress/components/playground/loaders/react-mui.ts
index facc2cb..94e9dea 100644
--- a/docs/.vitepress/components/playground/loaders/react-mui.ts
+++ b/docs/.vitepress/components/playground/loaders/react-mui.ts
@@ -3,6 +3,7 @@ import componentMapTs from '../../../../../examples/react-mui/src/component-map.
 import mainTsx from '../../../../../examples/react-mui/src/main.tsx?raw';
 import TextFieldTsx from '../../../../../examples/react-mui/src/fields/TextField.tsx?raw';
 import SelectFieldTsx from '../../../../../examples/react-mui/src/fields/SelectField.tsx?raw';
+import AutocompleteFieldTsx from '../../../../../examples/react-mui/src/fields/AutocompleteField.tsx?raw';
 import CheckboxFieldTsx from '../../../../../examples/react-mui/src/fields/CheckboxField.tsx?raw';
 import RadioFieldTsx from '../../../../../examples/react-mui/src/fields/RadioField.tsx?raw';
 import SwitchFieldTsx from '../../../../../examples/react-mui/src/fields/SwitchField.tsx?raw';
@@ -18,6 +19,7 @@ export function buildFiles(definitionJson: string) {
     '/main.tsx': mainTsx,
     '/fields/TextField.tsx': TextFieldTsx,
     '/fields/SelectField.tsx': SelectFieldTsx,
+    '/fields/AutocompleteField.tsx': AutocompleteFieldTsx,
     '/fields/CheckboxField.tsx': CheckboxFieldTsx,
     '/fields/RadioField.tsx': RadioFieldTsx,
     '/fields/SwitchField.tsx': SwitchFieldTsx,
diff --git a/docs/.vitepress/components/playground/loaders/vue-vuetify.ts b/docs/.vitepress/components/playground/loaders/vue-vuetify.ts
index 6f6cdb3..70be1c0 100644
--- a/docs/.vitepress/components/playground/loaders/vue-vuetify.ts
+++ b/docs/.vitepress/components/playground/loaders/vue-vuetify.ts
@@ -3,6 +3,7 @@ import componentMapTs from '../../../../../examples/vue-vuetify/src/component-ma
 import mainTs from '../../../../../examples/vue-vuetify/src/main.ts?raw';
 import TextFieldVue from '../../../../../examples/vue-vuetify/src/fields/TextField.vue?raw';
 import SelectFieldVue from '../../../../../examples/vue-vuetify/src/fields/SelectField.vue?raw';
+import AutocompleteFieldVue from '../../../../../examples/vue-vuetify/src/fields/AutocompleteField.vue?raw';
 import CheckboxFieldVue from '../../../../../examples/vue-vuetify/src/fields/CheckboxField.vue?raw';
 import RadioFieldVue from '../../../../../examples/vue-vuetify/src/fields/RadioField.vue?raw';
 import SwitchFieldVue from '../../../../../examples/vue-vuetify/src/fields/SwitchField.vue?raw';
@@ -18,6 +19,7 @@ export function buildFiles(definitionJson: string) {
     'src/main.ts': mainTs,
     'src/fields/TextField.vue': TextFieldVue,
     'src/fields/SelectField.vue': SelectFieldVue,
+    'src/fields/AutocompleteField.vue': AutocompleteFieldVue,
     'src/fields/CheckboxField.vue': CheckboxFieldVue,
     'src/fields/RadioField.vue': RadioFieldVue,
     'src/fields/SwitchField.vue': SwitchFieldVue,
diff --git a/examples/vanilla-svelte/src/App.svelte b/examples/vanilla-svelte/src/App.svelte
index 2791499..cfb9bdb 100644
--- a/examples/vanilla-svelte/src/App.svelte
+++ b/examples/vanilla-svelte/src/App.svelte
@@ -80,10 +80,25 @@
         <label><input type="checkbox" role="switch" checked={values[field.key] ?? false} on:change={e => handleFieldChange(field.key, e.target.checked)} /> {field.label}</label>
       {:else if field.type === 'textarea'}
         <textarea id={field.key} rows={field.rows ?? 3} placeholder={field.placeholder ?? ''} on:input={e => handleFieldChange(field.key, e.target.value)}>{values[field.key] ?? ''}</textarea>
+      {:else if field.type === 'autocomplete'}
+        <input
+          id={field.key}
+          type="text"
+          list="{field.key}-list"
+          placeholder={field.placeholder ?? ''}
+          value={values[field.key] ?? ''}
+          autocomplete="off"
+          on:input={e => handleFieldChange(field.key, e.target.value)}
+        />
+        <datalist id="{field.key}-list">
+          {#each field.options ?? [] as opt}
+            <option value={opt.value}>{opt.label}</option>
+          {/each}
+        </datalist>
       {:else}
         <input
           id={field.key}
-          type={field.type === 'email' ? 'email' : field.type === 'password' ? 'password' : field.type === 'number' ? 'number' : 'text'}
+          type={field.type === 'email' ? 'email' : field.type === 'password' ? 'password' : field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : field.type === 'datetime' ? 'datetime-local' : 'text'}
           placeholder={field.placeholder ?? ''}
           value={values[field.key] ?? ''}
           on:input={e => handleFieldChange(field.key, e.target.value)}