Accordion with visible radio inputs

[bogdan]

I want to make radio buttons visible in Accordion for things like "Payment method" selection in a form with additonal fields expanded for each selected method, but placing radio input inside collapse-title causes Accordion to break.

https://play.tailwindcss.com/MQPpTlUL1J

Please advice.

<div class="join join-vertical w-full border border-base-300">
  <div class="collapse join-item border-b border-base-300">
    <div class="collapse-title flex items-center gap-4 font-semibold">
      <input type="radio" name="my-accordion-1" checked="checked" />
      How do I create an account?
    </div>
    <div class="collapse-content ml-8 text-sm">
      <p>Click the "Sign Up" button in the top right corner and follow the registration process.</p>
    </div>
  </div>

  <div class="collapse join-item border-b border-base-300">
    <div class="collapse-title flex items-center gap-4 font-semibold">
      <input type="radio" name="my-accordion-1" />
      I forgot my password. What should I do?
    </div>
    <div class="collapse-content ml-8 text-sm">
      <p>Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
    </div>
  </div>
</div>

[pdanpdan]

Please update the play.tailwind to match your code and update the url here

[pdanpdan]

https://play.tailwindcss.com/HYm851FUW3?file=css

For the first version

• you need to have tabindex on .collapse - it does not matter the value
• but if you use the radio inside the title it does not play well with mouse clicks and keyboard navigation

You get much better results with some fake radio buttons that match the normal ones used as in the default example for collapse (version 2)