merisia-checkboxes

<merisia-checkboxes>

Groupe de cases a cocher accessible avec legende, aide contextuelle, erreurs et comportement exclusif (ex. Aucune de ces reponses).

Demos

Groupe basique

<merisia-checkboxes
  legend="Modes de transport"
  name="transport"
  hint="Choisissez tout ce qui s'applique."
></merisia-checkboxes>
<script>
  el.options = [
    { value: 'velo', label: 'Velo' },
    { value: 'marche', label: 'Marche' },
    { value: 'voiture', label: 'Voiture', hint: 'Inclut les covoiturages' },
  ];
</script>

Option exclusive (GOV.UK)

L'option marquee exclusive: true decoche automatiquement toutes les autres quand elle est selectionnee, et inversement.

el.options = [
  { value: 'vision', label: 'Problemes de vision' },
  { value: 'aucun', label: 'Aucun probleme de sante', exclusive: true },
];

Avec erreur

el.errors = ['Selectionnez au moins un mode de transport.'];

Petite taille (small)

<merisia-checkboxes legend="Options" name="opts" small></merisia-checkboxes>

Desactive

<merisia-checkboxes legend="Options" name="opts" disabled></merisia-checkboxes>

Lecture seule

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

Proprietes

Propriete	Attribut	Type	Defaut	Description
MerisiaCheckboxes (propres)
options	-	CheckboxOption[]	[]	Liste des options disponibles (propriete JS uniquement)
values	-	string[]	[]	Valeurs actuellement cochees (propriete JS uniquement)
small	small	boolean	false	Variante petite taille
exclusiveDivider	exclusive-divider	string	'ou'	Texte du separateur entre options regulieres et exclusives
MerisiaChoiceBase (herites)
legend	legend	string	''	Texte de la legende du groupe
hint	hint	string	''	Aide contextuelle du groupe
errors	-	string[]	[]	Messages d'erreur du groupe (propriete JS uniquement)
errorPrefix	error-prefix	string	'Erreur :'	Prefixe des messages d'erreur (i18n)
MerisiaFormElement (herites)
name	name	string	''	Nom du champ dans le formulaire (multi-valeur)
required	required	boolean	false	Rend la selection obligatoire
disabled	disabled	boolean	false	Desactive toutes les cases
MerisiaElement (herites)
id	id	string	auto-genere	Identifiant unique
lang	lang	string	'fr'	Langue pour les messages internes
autofocus	autofocus	boolean	false	Donne le focus au premier element au rendu

Interface CheckboxOption

interface CheckboxOption {
  value: string;       // Valeur soumise avec le formulaire
  label: string;       // Texte du libelle
  hint?: string;       // Aide contextuelle (optionnel)
  disabled?: boolean;  // Desactive cette option seulement (optionnel)
  exclusive?: boolean; // Option exclusive : decoche les autres (optionnel)
}

Accessibilite

Structure semantique fieldset + legend pour les lecteurs d'ecran
Chaque case a un label associe via for
aria-invalid="true" sur toutes les cases quand errors est defini
Comportement exclusif implemente en JS

Ressources externes

Import

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