Groupe de boutons radio

Les radios servent à choisir exactement une option dans un petit ensemble visible. radio() en rend un ; choiceGroup() construit l’ensemble à partir d’un tableau et lui donne la légende et le role="radiogroup" qui en font un groupe plutôt qu’un tas d’inputs.

Ils partagent un name, donc le navigateur gère l’exclusivité mutuelle et la navigation aux flèches entre eux. Rien ici n’embarque de script.

Groupe de base

Formule
choiceGroup({
  legend: 'Formule',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Gratuite' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Équipe' },
  ],
})

En ligne

Les libellés courts se lisent mieux sur une seule ligne. Les longs devraient rester empilés, ce qui est le défaut.

Format
choiceGroup({
  legend: 'Format',
  name: 'form-factor',
  direction: 'row',
  value: 'desktop',
  options: ['desktop', 'mobile'],
})

Chaînes simples

Quand la valeur et le libellé sont identiques, passez des chaînes.

Niveau de journalisation
choiceGroup({
  legend: 'Niveau de journalisation',
  name: 'log-level',
  direction: 'row',
  value: 'warn',
  options: ['info', 'warn', 'error', 'silent'],
})

Options désactivées

Rendu
Le SSR complet demande un hébergement Node, que ce projet n’a pas.
choiceGroup({
  legend: 'Rendu',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Statique' },
    { value: 'islands', label: 'Îlots serveur' },
    { value: 'ssr', label: 'SSR complet', disabled: true },
  ],
  help: 'Le SSR complet demande un hébergement Node, que ce projet n’a pas.',
})

Un à la fois

Utilisez radio() directement quand les options ne sont pas assez uniformes pour venir d’un tableau — par exemple quand chacune porte sa propre description.

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'À chaque push', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Seulement sur les versions taguées' }),
  radio({ name: 'deploy', value: 'manual', label: 'Manuellement' }),
)

Couleurs

stack({ direction: 'row', gap: 'lg', wrap: true },
  radio({ label: 'Primary', name: 'c1', checked: true, color: 'primary' }),
  radio({ label: 'Neutral', name: 'c2', checked: true, color: 'neutral' }),
  radio({ label: 'Success', name: 'c3', checked: true, color: 'success' }),
  radio({ label: 'Warning', name: 'c4', checked: true, color: 'warning' }),
  radio({ label: 'Danger', name: 'c5', checked: true, color: 'danger' }),
)

Dans une carte

Réglages de build

Appliqués au prochain déploiement

URL propres
Images
card(
  cardHeader({ title: 'Réglages de build', subtitle: 'Appliqués au prochain déploiement' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'URL propres',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Activées' },
          { value: 'off', label: 'Désactivées' },
        ],
      }),
      choiceGroup({
        legend: 'Images',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Redimensionner et convertir' },
          { value: 'copy', label: 'Copier telles quelles' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Enregistrer'),
  ),
)

Props

choiceGroup() :

PropTypeDéfautDescription
legendChild—Libellé du groupe entier.
namestring—Nom de formulaire partagé — ce qui rend les radios exclusifs.
optionsArray[]Des chaînes, ou des objets { value, label, disabled }.
valuestring | number | Array—L’option cochée. Un tableau pour des cases à cocher.
type'radio' | 'checkbox''radio'Quel contrôle construire. Choisit aussi le rôle du groupe.
direction'row' | 'column''column'Comment les options sont disposées.
helpChild—Indication sous le groupe.

radio() prend les mêmes props que checkbox() : label, color, checked, name, value et disabled.