L'auteur décrit avec humour et frustration l'incroyable complexité des boutons radio dans un projet utilisant Shadcn, un framework UI basé sur Radix. Initialement simple avec une balise HTML native, le bouton radio devient un composant React complexe de 45 lignes, intégrant des dépendances externes pour un simple cercle. L'article explore les couches de complexité ajoutées par Shadcn et Radix, questionnant la nécessité de cette sur-ingénierie pour un élément basique. Il se termine avec ce bout de code qui permet de faire la même chose... en plus simple

input[type="radio"] {
  /* Disable the browser's default radio button styles */
  appearance: none;
  margin: 0;

  /* Recreate the circle container */
  border: 1px solid black;
  background: white;
  border-radius: 50%;

  /* Center our dot in the container */
  display: inline-grid;
  place-content: center;

  /* Use a pseudo-element to display our "dot" */
  &::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
  }

  /* And display it when the radio button is checked */
  &:checked::before {
    background: black;
  }
}