Render hidden form input fields for Checkbox, Switch and RadioGroup components (#3095)

* add `overrides` prop to internal `FormFields`

By default, the hidden form fields render an `<input type="hidden" />`.
However, we have some components where we explicitly want to change the
type for example `checkbox` or `radio` types.

I first tried to encode this information in the data itself. That
requires us to use symbols so that we don't accidentally choose a key
that actually exists in the data.

An overrides key solves this for our use cases. The component is also
internal, so nothing is exposed to the user.

* always render hidden form elements

In case of checkboxes and radio elements, we will only render the hidden
inputs if:
1. You pass a `name` prop to make it form-aware
2. When the checkbox / radio is "checked"

This is now changed to always render the hidden input as long as the
`name` prop is passed to make it form-aware.

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix cursor position when re-focusing the `ComboboxInput` component ([#3065](https://github.com/tailwindlabs/headlessui/pull/3065))
 - Keep focus inside of the `<ComboboxInput />` component ([#3073](https://github.com/tailwindlabs/headlessui/pull/3073))
 - Fix enter transitions for the `Transition` component ([#3074](https://github.com/tailwindlabs/headlessui/pull/3074))
+- Render hidden form input fields for `Checkbox`, `Switch` and `RadioGroup` components ([#3095](https://github.com/tailwindlabs/headlessui/pull/3095))
 
 ### Changed
 

packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx

@@ -135,8 +135,10 @@ describe('Form submissions', () => {
       </form>
     )
 
+    let checkbox = document.querySelector('[id^="headlessui-checkbox-"]') as HTMLInputElement
+
     // Focus the checkbox
-    await focus(getCheckbox())
+    await focus(checkbox)
 
     // Submit
     await press(Keys.Enter)
@@ -145,7 +147,7 @@ describe('Form submissions', () => {
     expect(handleSubmission).toHaveBeenLastCalledWith({})
 
     // Toggle
-    await click(getCheckbox())
+    await click(checkbox)
 
     // Submit
     await press(Keys.Enter)
@@ -154,7 +156,7 @@ describe('Form submissions', () => {
     expect(handleSubmission).toHaveBeenLastCalledWith({ notifications: 'on' })
 
     // Toggle
-    await click(getCheckbox())
+    await click(checkbox)
 
     // Submit
     await press(Keys.Enter)

packages/@headlessui-react/src/components/checkbox/checkbox.tsx

@@ -174,7 +174,8 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
       {name != null && (
         <FormFields
           disabled={disabled}
-          data={checked ? { [name]: value || 'on' } : {}}
+          data={{ [name]: value || 'on' }}
+          overrides={{ type: 'checkbox', checked }}
           form={form}
           onReset={reset}
         />

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -315,7 +315,8 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
             {name != null && (
               <FormFields
                 disabled={disabled}
-                data={value != null ? { [name]: value || 'on' } : {}}
+                data={{ [name]: value || 'on' }}
+                overrides={{ type: 'radio', checked: value != null }}
                 form={form}
                 onReset={reset}
               />

packages/@headlessui-react/src/components/switch/switch.tsx

@@ -240,7 +240,8 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
       {name != null && (
         <FormFields
           disabled={disabled}
-          data={checked ? { [name]: value || 'on' } : {}}
+          data={{ [name]: value || 'on' }}
+          overrides={{ type: 'checkbox', checked }}
           form={form}
           onReset={reset}
         />

packages/@headlessui-react/src/internal/form-fields.tsx

@@ -33,8 +33,10 @@ export function FormFields({
   form: formId,
   disabled,
   onReset,
+  overrides,
 }: {
   data: Record<string, any>
+  overrides?: Record<string, any>
   form?: string
   disabled?: boolean
   onReset?: (e: Event) => void
@@ -66,6 +68,7 @@ export function FormFields({
               disabled,
               name,
               value,
+              ...overrides,
             })}
           />
         )