merisia-radios

<merisia-radios>

Groupe de boutons radio accessible avec structure fieldset/legend et options avec aide individuelle. Le focus des boutons radio est circulaire.

Démos

Vertical (défaut)

<merisia-radios legend="Mode de transport principal" name="transport" required></merisia-radios>
<script>
  document.querySelector('merisia-radios').options = [
    { value: 'voiture', label: 'Voiture' },
    { value: 'velo', label: 'Vélo', hint: 'Recommandé pour moins de 5 km' },
    { value: 'transport', label: 'Transport en commun' },
    { value: 'marche', label: 'Marche à pied', disabled: true },
  ];
</script>

Avec erreur

const el = document.querySelector('merisia-radios');
el.errors = ["Veuillez sélectionner une option."];

Lecture seule

const el = document.querySelector('merisia-radios');
el.readonly = true;

Propriétés

Propriété Attribut Type Défaut Description
MerisiaRadios (propres)
options – RadioOption[] [] Liste d'options : { value, label, hint?, disabled? } (propriété JS uniquement)
orientation orientation 'vertical' | 'horizontal' 'vertical' Disposition des boutons radio
MerisiaChoiceBase (hérités)
legend legend string '' Texte de la légende du groupe (équivalent du libellé)
hint hint string '' Aide contextuelle affichée sous la légende
errors – string[] [] Liste de messages d'erreur (propriété JS uniquement)
errorPrefix error-prefix string 'Erreur :' Préfixe des messages d'erreur (i18n, visuellement masqué)
invalid invalid boolean false État d'erreur (synchronisé automatiquement avec errors)
MerisiaFormElement (hérités)
name name string '' Nom du groupe dans le formulaire
value value string '' Valeur de l'option sélectionnée
required required boolean false Rend la sélection obligatoire
disabled disabled boolean false Désactive tout le groupe
MerisiaElement (hérités)
id id string auto-généré Identifiant unique du composant
lang lang string 'fr' Langue pour les messages internes (i18n)
width width number – Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)

Ressources externes

Import

import '@merisia-inc/merisia-components/radios';