Style a link as a radio button

[tkrotoff]

Amazon.com has a widget to switch the language of the website:

Each radio is a link:

<a
  href="#switch-lang=en_CA"
  class="nav-link nav-item"
  lang="en-CA"
  aria-current="true"
>
  <span class="nav-text">
    <i class="icp-radio icp-radio-active"></i>
    <span style="unicode-bidi: isolate; direction: ltr" dir="ltr">English</span>
    -
    <span style="unicode-bidi: isolate; direction: ltr" dir="ltr">EN</span>
  </span>
</a>

Which can be simplified to something like this:

<a href="url" class="radio-btn">
  <svg id="radio-circle" />
  English - EN
</a>

• Why not use JS (onClick="window.location = 'url'")?
  • Having a link in the DOM is nice: user can see the URL, open it in a new tab...
• Why not wrap the radio input with a link (<a href="url"><input type="radio /></a>)?
  • It's not valid HTML

Would be nice for DaisyUI to allow this (a link can already be styled as a button but not as a radio button).

I couldn't find any other UI frameworks allowing this so I guess it's kind of a niche feature and I understand if it's out of scope.

How to style a link as a radio button as already been asked multiple times on Stack Overflow:

• https://stackoverflow.com/questions/22568679/make-radio-button-clickable-link
• https://stackoverflow.com/questions/69057706/is-it-possible-to-make-anchors-look-like-radio-buttons-or-checkboxes
• https://stackoverflow.com/questions/23879031/styling-content-switching-links-as-radio-buttons

[pdanpdan]

you can:

1. use 2 icons that look like radio buttons
2. use real radio buttons: https://play.tailwindcss.com/oQUXr4nFi9

[tkrotoff]

Nice! I didn't know about inert

But the W3C HTML validator still gives "Error: The element input must not appear as a descendant of the a element"

I believe the HTML validator is wrong here because of the inert attribute so I've opened an issue in their repo: validator/validator#1904

[pdanpdan]

It doesn't matter to much. In my opinion 2 icons are better anyway.

[saadeghi]

You can also do this

https://play.tailwindcss.com/sSdjNc2PCy

<div class="radio" aria-checked="true"></div> Checked

<div class="radio" aria-checked="false"></div> Unchecked

[tkrotoff]

You can also do this

<div class="radio" aria-checked="true"></div> Checked

<div class="radio" aria-checked="false"></div> Unchecked

The beauty of simplicity \o/