diff --git a/.changeset/long-gifts-unite.md b/.changeset/long-gifts-unite.md
new file mode 100644
index 000000000..ffc772d6b
--- /dev/null
+++ b/.changeset/long-gifts-unite.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[DateField] Fix usage within <form>
diff --git a/.changeset/tricky-ducks-whisper.md b/.changeset/tricky-ducks-whisper.md
new file mode 100644
index 000000000..f2165fb07
--- /dev/null
+++ b/.changeset/tricky-ducks-whisper.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[DatePickerField] Add hidden input for use within <form>
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 936f6b032..7654c647f 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -13,6 +13,7 @@
   const { format: format_ux } = getSettings();
   const { classes: settingsClasses, defaults } = getComponentSettings('DateField');
 
+  export let name = '';
   export let value: Date | null = null;
   export let format: string | undefined = undefined;
   export let mask: string | undefined = undefined;
@@ -86,6 +87,7 @@
 >
   <Input
     {required}
+    {name}
     value={value ? formatDate(value, actualFormat) : inputValue}
     mask={actualMask}
     {replace}
diff --git a/packages/svelte-ux/src/lib/components/DatePickerField.svelte b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
index 03147e4c8..e5ddeb19b 100644
--- a/packages/svelte-ux/src/lib/components/DatePickerField.svelte
+++ b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
@@ -18,6 +18,7 @@
   const dispatch = createEventDispatcher();
   const { classes: settingsClasses, defaults } = getComponentSettings('DatePickerField');
 
+  export let name = '';
   export let value: Date | null = null;
   export let periodType: PeriodType = PeriodType.Day;
   export let iconOnly: boolean = false;
@@ -88,6 +89,8 @@
     let:id
   >
     <span slot="prepend">
+      <input type="hidden" {name} {value} />
+
       {#if stepper}
         <Button
           icon={mdiChevronLeft}
diff --git a/packages/svelte-ux/src/lib/components/Input.svelte b/packages/svelte-ux/src/lib/components/Input.svelte
index ec94fad9c..628a92bd1 100644
--- a/packages/svelte-ux/src/lib/components/Input.svelte
+++ b/packages/svelte-ux/src/lib/components/Input.svelte
@@ -13,6 +13,7 @@
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
+  export let name = '';
   export let value = '';
   export let type: HTMLInputTypeAttribute = 'text';
   export let inputmode: HTMLInputAttributes['inputmode'] | undefined = undefined;
@@ -117,6 +118,7 @@
 <input
   {id}
   {type}
+  {name}
   {value}
   {min}
   {max}
diff --git a/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte
index fd27dd4d4..5d8f2d936 100644
--- a/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte
@@ -102,3 +102,19 @@
   />
   value: {value}
 </Preview>
+
+<h2>within form</h2>
+
+<Preview>
+  <form
+    on:submit={(e) => {
+      e.preventDefault();
+      // @ts-expect-error
+      const formData = new FormData(e.target);
+      alert(formData.get('birth_date'));
+    }}
+  >
+    <DateField label="Birth date" name="birth_date" />
+    <Button type="submit">Submit</Button>
+  </form>
+</Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/DatePickerField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/DatePickerField/+page.svelte
index 746f42977..d6a97c99a 100644
--- a/packages/svelte-ux/src/routes/docs/components/DatePickerField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/DatePickerField/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { mdiCalendar } from '@mdi/js';
 
-  import { DatePickerField, PeriodType } from 'svelte-ux';
+  import { Button, DatePickerField, PeriodType } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 
   let value = new Date();
@@ -74,3 +74,19 @@
 <Preview>
   <DatePickerField label="Start Date" clearable />
 </Preview>
+
+<h2>within form</h2>
+
+<Preview>
+  <form
+    on:submit={(e) => {
+      e.preventDefault();
+      // @ts-expect-error
+      const formData = new FormData(e.target);
+      alert(formData.get('start_date'));
+    }}
+  >
+    <DatePickerField label="Start Date" name="start_date" clearable />
+    <Button type="submit">Submit</Button>
+  </form>
+</Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
index d35964c95..a1de51edd 100644
--- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -527,7 +527,7 @@
   <SelectField {options} icon={mdiMagnify} bind:value inlineOptions={true} />
 </Preview>
 
-<h2>with form</h2>
+<h2>within form</h2>
 
 <Preview>
   <form