La complexité excessive des boutons radio de Shadcn

• Bien que les boutons radio intégrés nativement aux navigateurs web soient de simples éléments HTML, la bibliothèque UI Shadcn les reconstruit en plusieurs couches de composants React
• Les composants <RadioGroup> et <RadioGroupItem> de Shadcn encapsulent à nouveau des composants de Radix UI, tout en utilisant des icônes lucide-react et des dizaines de classes Tailwind
• Radix s’appuie sur des attributs ARIA pour l’accessibilité et la personnalisation, mais réutilise en pratique des éléments bouton au lieu de l’élément natif <input type="radio">
• Alors qu’un style identique peut être obtenu avec du simple CSS, cette structure ajoute des centaines de lignes de code et plusieurs dépendances, créant une complexité inutile
• En ne réutilisant pas les éléments HTML natifs, cette approche accroît la dégradation des performances et la charge de maintenance, tout en nuisant à la simplicité du développement web

---

Analyse de la structure des boutons radio de Shadcn

• Shadcn implémente les boutons radio via deux composants, <RadioGroup> et <RadioGroupItem>
  • Chaque composant encapsule des primitives importées depuis @radix-ui/react-radio-group et utilise CircleIcon de lucide-react
  • L’ensemble comprend plus de 45 lignes de code, 3 imports externes et un style défini avec plus de 30 classes Tailwind
• La structure charge une bibliothèque d’icônes SVG pour afficher un simple indicateur circulaire
  • Une fonction qui pourrait être remplacée par border-radius en CSS ou un élément <circle>

Le rôle de Radix UI

• Radix, utilisé par Shadcn, est une bibliothèque de composants UI bas niveau centrée sur l’accessibilité et la personnalisation
  • Son implémentation du groupe de boutons radio repose sur environ 215 lignes de code React et importe 7 fichiers
• Radix configure un comportement de bouton radio en ajoutant des attributs ARIA à des éléments <button>
  • Pourtant, le premier principe de l’utilisation d’ARIA selon le W3C indique qu’il faut utiliser les éléments HTML natifs quand c’est possible
  • Radix ne suit pas ce principe et réutilise des boutons à la place d’un <input>
• Il n’ajoute un <input type="radio"> masqué qu’à l’intérieur d’un <form>, ce qui manque de cohérence

Une alternative simple possible avec CSS

• Les boutons radio HTML natifs peuvent être facilement stylisés avec appearance: none, ::before, :checked, border-radius, etc.
  • Le code d’exemple montre une personnalisation complète sans dépendances, sans JavaScript et sans attributs ARIA
  • Le même rendu peut aussi être obtenu avec Tailwind
• L’idée selon laquelle « styliser des boutons radio est difficile » est un problème du passé ; aujourd’hui, le CSS pur offre un contrôle suffisant

Le problème de l’accumulation de complexité

• Utiliser Shadcn avec Radix oblige à comprendre deux bibliothèques et des centaines de lignes de code
  • Pour un simple bouton radio, plusieurs kilo-octets de JavaScript sont chargés en plus
  • L’utilisateur doit attendre le parsing et l’exécution du JS pour pouvoir simplement basculer un bouton
• Cette structure entraîne une hausse de la charge cognitive, une augmentation du risque de bugs et une dégradation des performances web

Retour à la simplicité

• Les navigateurs fournissent déjà des boutons radio, et une seule ligne comme <input type="radio" name="beverage" value="coffee" /> suffit
• Les abstractions inutiles et l’empilement de bibliothèques nuisent à la simplicité et à l’efficacité originelles du développement web
• Même pour de petits éléments UI, une conception qui réutilise les fonctionnalités natives est plus avantageuse à la fois pour la maintenance et pour les performances