Introduction

Un groupe radio présenté sous forme d'un jeu de cartes sélectionnables, en exclusivité choix qui nécessitent plus de poids visuel que de simples boutons radio – tarification niveaux, vitesses d’expédition et similaires.

Hydratation

Niveau 2 — détection automatique intelligente. Un « RadioCardGroup » s'affiche au format HTML statique et n'expédie aucun client JS à moins qu'un signal comportemental ne soit présent. Passer interactive={true} pour forcer l'hydratation, ou interactive={false} pour forcer un rendu statique.

Il s'hydrate comme une île lorsque l'un des signaux suivants est présent (ou interactive={true} est défini) :

• valeur (sélection contrôlée)- defaultValue (sélection initiale non contrôlée)- onValueChange | interactive prop | Résultat | | --- | --- | | omitted, no signal | Static — no client JS | | omitted, a signal present | Hydrates as an island | | true | Hydrates as an island | | false | Static — no client JS |

Utilisation

import { RadioCardGroup } from "../components/ui";

export default function MyPage() {
  return (
    <RadioCardGroup
      label="Plan"
      defaultValue="pro"
      items={[
        { label: "Hobby", value: "hobby" },
        { label: "Pro", value: "pro" },
        { label: "Enterprise", value: "enterprise" },
      ]}
    />
  );
}

Composition personnalisée

Passez « enfants » pour un contrôle total sur le contenu de chaque carte au lieu du Tableau items :

import { RadioCardGroup } from "../components/ui";

export default function MyPage() {
  return (
    <RadioCardGroup label="Plan" defaultValue="pro">
      <RadioCardGroup.Item value="hobby">
        <RadioCardGroup.ItemText>Hobby — $0/mo</RadioCardGroup.ItemText>
        <RadioCardGroup.ItemControl />
        <RadioCardGroup.ItemHiddenInput />
      </RadioCardGroup.Item>
      <RadioCardGroup.Item value="pro">
        <RadioCardGroup.ItemText>Pro — $20/mo</RadioCardGroup.ItemText>
        <RadioCardGroup.ItemControl />
        <RadioCardGroup.ItemHiddenInput />
      </RadioCardGroup.Item>
      <RadioCardGroup.Indicator />
    </RadioCardGroup>
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc radioCardGroup dans le Page Builder (content/pages/*.json) :

{
  "type": "radioCardGroup",
  "label": "Plan",
  "defaultValue": "pro",
  "variant": "outline",
  "items": [
    { "label": "Hobby", "value": "hobby" },
    { "label": "Pro", "value": "pro" },
    { "label": "Enterprise", "value": "enterprise", "disabled": true }
  ]
}

Il rend toujours « interactif » dans Page Builder.

Propriétés

Racine

Propriété	Type	Description
value	string	La valeur actuellement sélectionnée (contrôlée).
defaultValue	string	La valeur initialement sélectionnée (non contrôlée).
onValueChange	(details: { value: string }) => void	Appelé lorsque la sélection change.
id	string	L'identifiant de l'élément racine.
name	string	Nom des entrées radio sous-jacentes, pour la soumission de formulaire natif.
disabled	boolean	Désactive chaque élément.
readOnly	boolean	Empêche les modifications de sélection tout en permettant la mise au point.
variant	"subtle" | "contour" | "surface" | "solid"	Visual style. Default "outline".
size	"md"	Taille visuelle.
colorPalette	"blue" | "vert" | "red" | "purple" | "orange" | "amber" | "cyan" | "slate" | "gray"	The color theme.
interactive	boolean	Annule la décision d’hydratation (voir ci-dessus).
class	string	Classes CSS personnalisées pour l'élément racine.

Composition par défaut

Propriété	Type	Description
items	(string | RadioCardGroupItem)[]	Cards to render. A plain string is shorthand for { value, label: value }.
label	string | JSX.Élément	Label rendered above the cards.

RadioCardGroupItem

Propriété	Type	Description
value	string	La valeur unique de l'objet.
label	string | JSX.Élément	The card's display content.
disabled	boolean	Désactive cette carte.
invalid	boolean	Marque cette carte comme invalide.

Sous-composants

Partie	Description
RadioCardGroup.Label	Le label du groupe (<span>).
RadioCardGroup.Item	Une carte sélectionnable. role="radio", nécessite un accessoire value.
RadioCardGroup.ItemText	Le texte/contenu affiché de la carte.
RadioCardGroup.ItemControl	L'emballage de l'indicateur radio visuel de la carte.
RadioCardGroup.ItemHiddenInput	Le <input type="radio"> natif visuellement caché qui contient la sélection pour la soumission du formulaire.
RadioCardGroup.Indicator	Un élément indicateur coulissant partagé pour l’état coché.

Accessibilité

• La racine a role="radiogroup" ; chaque élément a role="radio" avec aria-checked reflétant la sélection.
• Les éléments utilisent tabIndex itinérant — seul l'élément coché (ou premier activé) est dans la séquence de tabulations, correspondant au comportement natif du clavier du groupe radio.
• data-state (checked/unchecked) et data-disabled sont mis en miroir sur les éléments et leurs parties de texte/contrôle pour le style.