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.

Import

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

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 { MerisiaRadios } from '@merisia-inc/merisia-components';

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

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;

Tri automatique

La propriété autosort trie les options par leur texte affiché, insensible aux accents et à la casse. 

<merisia-radios autosort legend="Mode de transport principal" name="transport-autosort"></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>

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
autosort autosort boolean false Active le tri automatique des options par leur texte affiché, insensible aux accents/majuscules, selon lang
sortDirection sort-direction 'asc' | 'desc' 'asc' Ordre de tri appliqué quand autosort est actif
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