Radio button cards

[holden]

I just started messing with TailwindUI's radio buttons and noticed they didn't seem to be working by default in JSP. Everything else in Tailwind UI seemed to be working by default but Radio group cards do not seem to be working.

https://tailwindui.com/components/application-ui/forms/radio-groups#component-45612766894822db447a2837d79355f5

Is this not a currently supported stimulus component or did I miss it somewhere else?

Thanks,

[excid3]

Don't think we've implemented those yet. PRs welcome!

[MichalSznajder]

Any tips how this could be done?

Radio button card has a very specific layout (icon, outer border) and I am not sure if this should be hardcoded or rather somehow configurable...

[excid3]

For Hatchbox, we use the peer and peer-checked selectors from TailwindCSS to make the radio groups without JavaScript.

<div>
  <input id="hosting-hetzner" class="hidden peer" required="required" type="radio" value="hetzner" name="cluster[provider]">
  <label for="hosting-hetzner" class="p-4 flex flex-col justify-center gap-2 w-full text-gray-500 dark:text-white bg-white dark:bg-gray-700 rounded-lg border border-gray-400 dark:border-gray-800 cursor-pointer peer-checked:ring-2 peer-checked:ring-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-500">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22.24" role="img" aria-labelledby="a36j98spjva6oqcjm04i5b0bvjzi7fj8" class="h-8 fill-current"><title id="a36j98spjva6oqcjm04i5b0bvjzi7fj8">Hosting/mark/hetzner</title><path d="m21.63 0h-3.11c-.7 0-1 .29-1 1v7.87h-12.39v-7.87c0-.7-.29-1-1-1h-3.13c-.71 0-1 .29-1 1v20.25c0 .71.29 1 1 1h3.13c.7 0 1-.28 1-1v-8h12.4v8c0 .7.29 1 1 1h3.11c.7 0 1-.29 1-1v-20.25c-.02-.68-.31-1-1.01-1z"></path></svg>
    <div class="text-center text-lg font-semibold">Hetzner</div>
  </label>
</div>