diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index c0f323d9..67cb34d7 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -61,6 +61,8 @@
     horizontal?: boolean;
     /** The selected value */
     value?: StateDefinition["value"];
+    /** The name used when using this component inside a form. */
+    name?: string;
   };
 </script>
 
@@ -80,6 +82,8 @@
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render from "$lib/utils/Render.svelte";
   import type { TPassThroughProps } from "$lib/types";
+  import Hidden, { Features as HiddenFeatures } from "$lib/internal/Hidden.svelte";
+  import { objectToFormEntries } from "$lib/utils/form";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;
@@ -90,6 +94,7 @@
   export let disabled = false;
   export let horizontal = false;
   export let value: StateDefinition["value"];
+  export let name: string | null = null;
 
   /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
@@ -276,6 +281,21 @@
 </script>
 
 <svelte:window on:mousedown={handleMousedown} />
+
+{#if name != null && value != null}
+  {@const options = objectToFormEntries({ [name]: value })}
+  {#each options as [optionName, optionValue], index (index)}      
+    <Hidden
+      features={HiddenFeatures.Hidden}
+      as="input"
+      type="hidden"
+      hidden
+      readonly
+      name={optionName}
+      value={optionValue}
+    />
+  {/each}
+{/if}  
 <Render
   {...$$restProps}
   {as}
@@ -284,4 +304,4 @@
   name={"Listbox"}
 >
   <slot {...slotProps} />
-</Render>
+</Render>
\ No newline at end of file
diff --git a/src/lib/components/listbox/listbox.test.ts b/src/lib/components/listbox/listbox.test.ts
index ad4a0018..bf603ff2 100644
--- a/src/lib/components/listbox/listbox.test.ts
+++ b/src/lib/components/listbox/listbox.test.ts
@@ -3692,3 +3692,157 @@ describe('Mouse interactions', () => {
     })
   )
 })
+
+describe('Form compatibility', () => {
+  it('should be possible to submit a form with a value', async () => {
+    let submitFn = jest.fn();
+    
+    render(svelte`
+      <script>
+        let value = null
+      </script>         
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>        
+        <Listbox value={value} on:change={(e) => (value = e.detail)} name="delivery">
+          <ListboxButton>Trigger</ListboxButton>
+          <ListboxOptions>
+            <ListboxOption value="pickup">Pickup</ListboxOption>
+            <ListboxOption value="home-delivery">Home delivery</ListboxOption>
+            <ListboxOption value="dine-in">Dine in</ListboxOption>            
+          </ListboxOptions>
+        </Listbox>
+        <button type="submit">Submit</button>
+      </form>
+    `);    
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([]) // no data
+
+    // Open listbox again
+    await click(getListboxButton())
+
+    // Choose home delivery
+    await click(getByText('Home delivery'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([['delivery', 'home-delivery']])
+
+    // Open listbox again
+    await click(getListboxButton())
+
+    // Choose pickup
+    await click(getByText('Pickup'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([['delivery', 'pickup']])
+  })
+
+  it('should be possible to submit a form with a complex value object', async () => {
+    let submitFn = jest.fn();
+    
+    render(svelte`
+      <script>
+        let options = [
+          {
+            id: 1,
+            value: 'pickup',
+            label: 'Pickup',
+            extra: { info: 'Some extra info' },
+          },
+          {
+            id: 2,
+            value: 'home-delivery',
+            label: 'Home delivery',
+            extra: { info: 'Some extra info' },
+          },
+          {
+            id: 3,
+            value: 'dine-in',
+            label: 'Dine in',
+            extra: { info: 'Some extra info' },
+          },
+        ]
+
+        let value = options[0]
+      </script>         
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>        
+        <Listbox value={value} on:change={(e) => (value = e.detail)} name="delivery">
+          <ListboxButton>Trigger</ListboxButton>
+          <ListboxOptions>
+            {#each options as option}
+              <ListboxOption value={option}>{option.label}</ListboxOption>              
+            {/each}
+          </ListboxOptions>
+        </Listbox>
+        <button type="submit">Submit</button>
+      </form>
+    `);        
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([
+      ['delivery[id]', '1'],
+      ['delivery[value]', 'pickup'],
+      ['delivery[label]', 'Pickup'],
+      ['delivery[extra][info]', 'Some extra info'],
+    ])
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Choose home delivery
+    await click(getByText('Home delivery'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([
+      ['delivery[id]', '2'],
+      ['delivery[value]', 'home-delivery'],
+      ['delivery[label]', 'Home delivery'],
+      ['delivery[extra][info]', 'Some extra info'],
+    ])
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Choose pickup
+    await click(getByText('Pickup'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([
+      ['delivery[id]', '1'],
+      ['delivery[value]', 'pickup'],
+      ['delivery[label]', 'Pickup'],
+      ['delivery[extra][info]', 'Some extra info'],
+    ])
+  })
+})
\ No newline at end of file
diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
index df110103..d7adb541 100644
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -52,6 +52,8 @@
     value: StateDefinition["value"];
     /** Whether the `RadioGroup` and all of its `RadioGroupOption`s are disabled */
     disabled?: boolean;
+    /** The name used when using this component inside a form. */
+    name?: string;
   };
 </script>
 
@@ -63,6 +65,8 @@
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render from "$lib/utils/Render.svelte";
   import type { TPassThroughProps } from "$lib/types";
+  import Hidden, { Features as HiddenFeatures } from "$lib/internal/Hidden.svelte";
+  import { objectToFormEntries } from "$lib/utils/form";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;
@@ -72,6 +76,7 @@
   export let use: HTMLActionArray = [];
   export let value: StateDefinition["value"];
   export let disabled = false;
+  export let name: string | null = null;
 
   /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
@@ -223,6 +228,21 @@
 
 <DescriptionProvider name="RadioGroupDescription" let:describedby>
   <LabelProvider name="RadioGroupLabel" let:labelledby>
+    {#if name != null && value != null}
+      {@const options = objectToFormEntries({ [name]: value })}
+      {#each options as [optionName, optionValue], index (index)}      
+        <Hidden
+          features={HiddenFeatures.Hidden}
+          as="input"
+          type="hidden"
+          hidden
+          readonly
+          name={optionName}
+          value={optionValue}
+        />
+      {/each}
+    {/if}  
+
     <Render
       {...{ ...$$restProps, ...propsWeControl }}
       {as}
diff --git a/src/lib/components/radio-group/radio-group.test.ts b/src/lib/components/radio-group/radio-group.test.ts
index 6d1d9a50..fd1c29e9 100644
--- a/src/lib/components/radio-group/radio-group.test.ts
+++ b/src/lib/components/radio-group/radio-group.test.ts
@@ -771,3 +771,45 @@ describe('Mouse interactions', () => {
     expect(changeFn).toHaveBeenCalledTimes(1)
   })
 })
+
+describe("`Enter`", () => {
+  it("should submit the form on `Enter`", async () => {    
+    let submitFn = jest.fn();
+    
+    render(svelte`   
+      <script>
+        let selected = "home-delivery"
+      </script>
+    
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>
+        <RadioGroup value={selected} name="option" on:change={(e) => selected = e.detail}>
+          <RadioGroupLabel>Pizza Delivery</RadioGroupLabel>
+          <RadioGroupOption value="pickup">Pickup</RadioGroupOption>
+          <RadioGroupOption value="home-delivery">Home delivery</RadioGroupOption>
+          <RadioGroupOption value="dine-in">Dine in</RadioGroupOption>
+        </RadioGroup>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+    // Submit the form
+    await click(getByText('Submit'))   
+
+    // Verify the form was submitted with the home-delivery option
+    expect(submitFn).toHaveBeenCalledTimes(1);
+    expect(submitFn).toHaveBeenCalledWith([["option", "home-delivery"]]);
+
+    // Select the Pickup option
+    await click(getByText("Pickup"));
+
+    // Submit the form
+    await click(getByText('Submit'))   
+
+    // Verify the form was submitted with the pickup option
+    expect(submitFn).toHaveBeenCalledTimes(2);
+    expect(submitFn).toHaveBeenCalledWith([["option", "pickup"]]);
+  });
+});
\ No newline at end of file
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
index c03c9f4c..a2479d66 100644
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -5,6 +5,10 @@
   > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
     /** Whether the switch is checked */
     checked: boolean;
+    /** The name used when using this component inside a form. */
+    name?: string;
+    /** The value used when using this component inside a form, if it is checked. */
+    value?: string;
   };
 </script>
 
@@ -22,6 +26,7 @@
   import Render from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
   import type { TPassThroughProps } from "$lib/types";
+  import Hidden, { Features as HiddenFeatures } from "$lib/internal/Hidden.svelte";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;
@@ -30,6 +35,8 @@
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
   export let checked = false;
+  export let name: string | null = null;
+  export let value: string | null = null;
 
   /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
@@ -81,6 +88,18 @@
   $: slotProps = { checked };
 </script>
 
+{#if name != null && checked}
+  <Hidden
+    features={HiddenFeatures.Hidden}
+    as="input"
+    type="checkbox"
+    hidden
+    readonly
+    {name}
+    bind:checked
+    bind:value
+  />
+{/if}
 <!-- TODO: I'm sure there's a better way of doing this -->
 {#if switchStore}
   <Render
diff --git a/src/lib/components/switch/switch.test.ts b/src/lib/components/switch/switch.test.ts
index 93a68e1d..d8ddc5ae 100644
--- a/src/lib/components/switch/switch.test.ts
+++ b/src/lib/components/switch/switch.test.ts
@@ -3,6 +3,7 @@ import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from ".";
 import {
   assertActiveElement,
   assertSwitch,
+  getByText,
   getSwitch,
   getSwitchLabel,
   SwitchState,
@@ -322,3 +323,113 @@ describe("Mouse interactions", () => {
     assertSwitch({ state: SwitchState.Off });
   });
 });
+
+describe("`Enter`", () => {
+  it("should submit the form on `Enter`", async () => {    
+    let submitFn = jest.fn();
+    
+    render(svelte`
+      <script>
+        let enabled = false
+      </script>         
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>        
+        <Switch name="notifications" checked={enabled} on:change={(e) => (enabled = e.detail)}>Enable notifications</Switch>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([]) // no data
+
+    // Toggle
+    await click(getSwitch())
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([['notifications', 'on']])
+  });
+});
+
+describe('Form compatibility', () => {
+  it('should be possible to submit a form with an boolean value', async () => {
+    
+    let submitFn = jest.fn();
+    
+    render(svelte`
+      <script>
+        let enabled = false
+      </script>         
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>        
+        <SwitchGroup>
+          <Switch name="notifications" checked={enabled} on:change={(e) => (enabled = e.detail)} />
+          <SwitchLabel>Enable notifications</SwitchLabel>
+        </SwitchGroup>        
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([]) // no data
+
+    // Toggle
+    await click(getSwitchLabel())
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([['notifications', 'on']])
+  })
+
+  it('should be possible to submit a form with a provided string value', async () => {
+    let submitFn = jest.fn();
+    
+    render(svelte`
+      <script>
+        let enabled = false
+      </script>         
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>        
+        <SwitchGroup>
+          <Switch name="fruit" checked={enabled} value="apple" on:change={(e) => (enabled = e.detail)} />
+          <SwitchLabel>Apple</SwitchLabel>
+        </SwitchGroup>        
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([]) // no data
+
+    // Toggle
+    await click(getSwitchLabel())
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([['fruit', 'apple']])
+  })
+})
\ No newline at end of file
diff --git a/src/lib/internal/Hidden.svelte b/src/lib/internal/Hidden.svelte
new file mode 100644
index 00000000..5d2fe245
--- /dev/null
+++ b/src/lib/internal/Hidden.svelte
@@ -0,0 +1,39 @@
+<script lang="ts" context="module">
+  export enum Features {
+    // The default, no features.
+    None = 1 << 0,
+
+    // Whether the element should be focusable or not.
+    Focusable = 1 << 1,
+
+    // Whether it should be completely hidden, even to assistive technologies.
+    Hidden = 1 << 2,
+  }
+</script>
+
+<script lang="ts">
+  import type { SupportedAs } from "$lib/internal/elements";
+  import Render from "$lib/utils/Render.svelte";
+
+  export let as: SupportedAs = "div";
+  export let features: Features = Features.None;
+
+  $: propsWeControl = {
+    "aria-hidden":(features & Features.Focusable) === Features.Focusable ? true : undefined,
+    style: `position:fixed;top:1px;left:1px;width:1px;height:0px;padding:0px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);whitespace:nowrap;border-width:0px;${(features & Features.Hidden) === Features.Hidden && !((features & Features.Focusable) === Features.Focusable) ? 'display:none': ''}`
+  };
+  
+  $: slotProps = {};
+</script>
+
+<Render
+  elementName={$$restProps.name} 
+  style={propsWeControl.style}
+  aria-hidden={propsWeControl["aria-hidden"]}
+  {...{ ...$$restProps }}
+  {as}
+  name={"Hidden"}
+  {slotProps}
+>
+  <slot />
+</Render>
diff --git a/src/lib/utils/Render.svelte b/src/lib/utils/Render.svelte
index b6326b27..5a8ca4d7 100644
--- a/src/lib/utils/Render.svelte
+++ b/src/lib/utils/Render.svelte
@@ -21,6 +21,9 @@
   export let name: string;
   export let as: TAsProp;
   export let slotProps: TSlotProps;
+  // A workaround for passing name="" to the element since name is already used
+  // Will not be need when <Render> is replaced with <svelte:element>
+  export let elementName:string | null = null;
 
   export let el: HTMLElement | null = null;
   export let use: HTMLActionArray = [];
@@ -64,6 +67,7 @@
     !unmount;
 
   $: propsWeControl = {
+    name:elementName || undefined,
     class: computedClass,
     style:
       `${computedStyle ?? ""}${hidden ? " display: none" : ""}` || undefined,
@@ -71,6 +75,9 @@
   $: if (propsWeControl.style === undefined) {
     delete propsWeControl.style;
   }
+  $: if (propsWeControl.name === undefined) {
+    delete propsWeControl.name;
+  }
 </script>
 
 {#if show}
diff --git a/src/lib/utils/form.ts b/src/lib/utils/form.ts
new file mode 100644
index 00000000..bd323f42
--- /dev/null
+++ b/src/lib/utils/form.ts
@@ -0,0 +1,37 @@
+type Entries = [string, string][];
+
+export function objectToFormEntries(
+  source: Record<string, any> = {},
+  parentKey: string | null = null,
+  entries: Entries = []
+): Entries {
+  for (let [key, value] of Object.entries(source)) {
+    append(entries, composeKey(parentKey, key), value);
+  }
+
+  return entries;
+}
+
+function composeKey(parent: string | null, key: string): string {
+  return parent ? parent + "[" + key + "]" : key;
+}
+
+function append(entries: Entries, key: string, value: any): void {
+  if (Array.isArray(value)) {
+    for (let [subkey, subvalue] of value.entries()) {
+      append(entries, composeKey(key, subkey.toString()), subvalue);
+    }
+  } else if (value instanceof Date) {
+    entries.push([key, value.toISOString()]);
+  } else if (typeof value === "boolean") {
+    entries.push([key, value ? "1" : "0"]);
+  } else if (typeof value === "string") {
+    entries.push([key, value]);
+  } else if (typeof value === "number") {
+    entries.push([key, `${value}`]);
+  } else if (value === null || value === undefined) {
+    entries.push([key, ""]);
+  } else {
+    objectToFormEntries(value, key, entries);
+  }
+}
diff --git a/src/routes/docs/listbox.svx b/src/routes/docs/listbox.svx
index 8167bcc5..31c001d7 100644
--- a/src/routes/docs/listbox.svx
+++ b/src/routes/docs/listbox.svx
@@ -259,6 +259,51 @@ Use the `disabled` prop to disable a `ListboxOption`. This will make it unselect
 </Listbox>
 ```
 
+## Using with HTML forms
+
+If you add the `name` prop to your listbox, hidden `input` elements will be rendered and kept in sync with your selected value.
+
+```svelte
+<script>
+  import {
+    Listbox,
+    ListboxButton,
+    ListboxOptions,
+    ListboxOption,
+  } from "@rgossiaux/svelte-headlessui";
+
+  const people = [
+    { id: 1, name: "Durward Reynolds", unavailable: false },
+    { id: 2, name: "Kenton Towne", unavailable: false },
+    { id: 3, name: "Therese Wunsch", unavailable: false },
+    { id: 4, name: "Benedict Kessler", unavailable: true },
+    { id: 5, name: "Katelyn Rohan", unavailable: false },
+  ];
+
+  let selectedPerson = people[0];
+</script>
+
+<Listbox value={selectedPerson} on:change={(e) => (selectedPerson = e.detail)} name="assignee">
+  <ListboxButton>{selectedPerson.name}</ListboxButton>
+  <ListboxOptions>
+    {#each people as person (person.id)}
+      <ListboxOption value={person} disabled={person.unavailable}>
+        {person.name}
+      </ListboxOption>
+    {/each}
+  </ListboxOptions>
+</Listbox>
+```
+
+This lets you use a listbox inside a native HTML `<form>` and make traditional form submissions as if your listbox was a native HTML form control.
+
+Basic values like strings will be rendered as a single hidden input containing that value, but complex values like objects will be encoded into multiple inputs using a square bracket notation for the names:
+
+```svelte
+<input type="hidden" name="assignee[id]" value="1" />
+<input type="hidden" name="assignee[name]" value="Durward Reynolds" />
+```
+
 ## Transitions
 
 To animate the opening and closing of the listbox, you can use [this library's Transition component](/docs/transition) or Svelte's built-in transition engine. See that page for a comparison.
@@ -490,6 +535,7 @@ The main listbox component.
 | `disabled`   | `false` | `boolean` | Whether the entire `Listbox` and its children should be disabled                   |
 | `horizontal` | `false` | `boolean` | Whether the entire `Listbox` should be oriented horizontally instead of vertically |
 | `value`      | --      | `T`       | The selected value                                                                 |
+| `name`       | --      | `string`  | The name used when using this component inside a form.                             |
 
 | Slot prop  | Type      | Description                            |
 | ---------- | --------- | -------------------------------------- |
diff --git a/src/routes/docs/radio-group.svx b/src/routes/docs/radio-group.svx
index d78b9cd1..27908d18 100644
--- a/src/routes/docs/radio-group.svx
+++ b/src/routes/docs/radio-group.svx
@@ -153,6 +153,42 @@ By default, `RadioGroupLabel` renders a `<label>` element and `RadioGroupDescrip
 </style>
 ```
 
+## Using with HTML forms
+
+If you add the `name` prop to your listbox, hidden `input` elements will be rendered and kept in sync with your selected value.
+
+```svelte
+<script>
+  import {
+    RadioGroup,
+    RadioGroupLabel,
+    RadioGroupOption,
+    RadioGroupDescription,
+  } from "@rgossiaux/svelte-headlessui";
+
+  const plans = ['startup', 'business', 'enterprise']
+
+  let selectedPlan = plans[0];
+</script>
+
+<RadioGroup value={selectedPlan} on:change={(e) => (selectedPlan = e.detail)} name="plan">
+  <RadioGroupLabel>Plan</RadioGroupLabel>
+  {#each plans as plan}
+    <RadioGroupOption value={plan} let:checked>
+      <span>{plan}</span>
+    </RadioGroupOption>
+  {/each}  
+</RadioGroup>
+```
+
+This lets you use a radio group inside a native HTML `<form>` and make traditional form submissions as if your radio group was a native HTML form control.
+
+Basic values like strings will be rendered as a single hidden input containing that value, but complex values like objects will be encoded into multiple inputs using a square bracket notation for the names.
+
+```svelte
+<input type="hidden" name="plan" value="startup" />
+```
+
 ## Accessibility notes
 
 ### Mouse interaction
@@ -184,6 +220,7 @@ The main Radio Group component.
 | `as`       | `div`   | `string`           | The element the `RadioGroup` should render as                            |
 | `disabled` | `false` | `boolean`          | Whether the `RadioGroup` and all of its `RadioGroupOption`s are disabled |
 | `value`    | --      | `T` \| `undefined` | The currently selected value in the `RadioGroup`                         |
+| `name`     | --      | `string`           | The name used when using this component inside a form.                   |
 
 This component also dispatches a custom event, which is listened to using the Svelte `on:` directive:
 
diff --git a/src/routes/docs/switch.svx b/src/routes/docs/switch.svx
index 5c717d56..e932ed2a 100644
--- a/src/routes/docs/switch.svx
+++ b/src/routes/docs/switch.svx
@@ -244,6 +244,58 @@ Because switches are always rendered to the DOM (rather than being mounted/unmou
 </style>
 ```
 
+## Using with HTML forms
+
+If you add the `name` prop to your switch, a hidden `input` element will be rendered and kept in sync with the switch state.
+
+```svelte
+<script>
+  import {
+    Switch,
+    SwitchLabel,
+    SwitchGroup,
+  } from "@rgossiaux/svelte-headlessui";
+
+  let enabled = false;
+</script>
+
+<Switch checked={enabled} on:change={(e) => (enabled = e.detail)} name="notifications">  
+    <!-- ... -->
+</Switch>
+```
+
+This lets you use a radio group inside a native HTML `<form>` and make traditional form submissions as if your radio group was a native HTML form control.
+
+By default, the value will be `'on'` when the switch is checked, and not present when the switch is unchecked.
+
+```svelte
+<input type="hidden" name="notifications" value="on" />
+```
+
+You can customize the value if needed by using the value prop:
+
+```svelte
+<script>
+  import {
+    Switch,
+    SwitchLabel,
+    SwitchGroup,
+  } from "@rgossiaux/svelte-headlessui";
+
+  let enabled = false;
+</script>
+
+<Switch checked={enabled} on:change={(e) => (enabled = e.detail)} name="terms" value="accept">  
+    <!-- ... -->
+</Switch>
+```
+
+The hidden input will then use your custom value when the switch is checked:
+
+```svelte
+<input type="hidden" name="terms" value="accept" />
+```
+
 ## Accessibility notes
 
 ### Labels
@@ -274,10 +326,13 @@ For a full reference on all accessibility features implemented in `Switch`, see
 
 The main switch component.
 
-| Prop      | Default  | Type      | Description                               |
-| --------- | -------- | --------- | ----------------------------------------- |
-| `as`      | `button` | `string`  | The element the `Switch` should render as |
-| `checked` | `false`  | `boolean` | Whether the switch is checked             |
+| Prop      | Default  | Type      | Description                                                               |
+| --------- | -------- | --------- | --------------------------------------------------------------------------|
+| `as`      | `button` | `string`  | The element the `Switch` should render as                                 |
+| `checked` | `false`  | `boolean` | Whether the switch is checked                                             |
+| `name`    | --       | `string`  | The name used when using this component inside a form.                    |
+| `value`   | --       | `string`  | The value used when using this component inside a form, if it is checked. |
+
 
 | Slot prop | Type      | Description                   |
 | --------- | --------- | ----------------------------- |