merisia-checkboxes

<merisia-checkboxes>

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

Import

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

Extension

Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles : 

import { customElement } from 'lit/decorators.js';
import { MerisiaCheckboxes } from '@merisia-inc/merisia-components';

@customElement('my-checkboxes')
export class MyCheckboxes extends MerisiaCheckboxes {
  // Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}

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 },
];

Hiérarchie imbriquée

Une option avec children affiche un état indéterminé (tiret) quand seuls certains de ses descendants sont cochés, et sa valeur n'est incluse dans values que lorsque tous ses descendants le sont. 

el.options = [
  {
    value: 'actif',
    label: 'Transport actif',
    children: [
      { value: 'velo', label: 'Velo' },
      { value: 'marche', label: 'Marche' },
    ],
  },
  {
    value: 'motorise',
    label: 'Transport motorise',
    children: [
      { value: 'voiture', label: 'Voiture' },
      {
        value: 'commun',
        label: 'Transport en commun',
        children: [
          { value: 'bus', label: 'Autobus' },
          { value: 'train', label: 'Train' },
        ],
      },
    ],
  },
];

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;

Tri automatique

La propriété autosort trie les options par leur texte affiché, insensible aux accents et à la casse (récursivement à travers les children). 

<merisia-checkboxes
  autosort
  legend="Modes de transport"
  name="transport-autosort"
></merisia-checkboxes>
<script>
  el.options = [
    { value: 'velo', label: 'Vélo' },
    { value: 'marche', label: 'Marche' },
    { value: 'voiture', label: 'Voiture', hint: 'Inclut les covoiturages' },
  ];
</script>

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
autosort autosort boolean false Active le tri automatique des options (récursif sur les children), insensible aux accents/majuscules, selon lang
sortDirection sort-direction 'asc' | 'desc' 'asc' Ordre de tri appliqué quand autosort est actif
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)
  mixed?: boolean;             // Etat mixte/indetermine manuel, pour une option sans enfants (optionnel)
  children?: CheckboxOption[]; // Options enfants pour une hierarchie imbriquee (optionnel)
}

Accessibilite

Ressources externes