tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

`RadioGroup` do not render hidden inputs when given a `name` #3377

Closed hasanayan closed 2 months ago

hasanayan commented 2 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.2

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-2b4mjg?file=package.json

Describe your issue

Even when RadioGroup is given a name it does not render an input element. In the repro url, I am using the exact code shown in the example on https://headlessui.com/react/radio-group#using-with-html-forms and yet there is input rendered.

Here is the render output of single radio element:

<div data-headlessui-state="">
     <span id="headlessui-control-:rb:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="" aria-labelledby="headlessui-label-:rf:"></span>

     <label id="headlessui-label-:rf:" for="headlessui-control-:rb:" data-headlessui-state="">
          Business
     </label>

     <span hidden="" style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"></span>
</div>
hasanayan commented 2 months ago

false alarm, there is only one hidden input rendered for the whole radio group and it is obviously outside of the html snipped I shared