RadioCardGroup Groupe de Cartes Radio - Docs - Artefact

RadioCardGroup Groupe de Cartes Radio

Forms

Détection automatique intelligente

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.