merisia-toggle

<merisia-toggle>

Interrupteur bascule accessible avec role="switch" pour les actions immédiates (ex. activer/désactiver une préférence).

Démos

Désactivé par défaut

<merisia-toggle label="Activer les notifications" name="notifs"></merisia-toggle>

Activé par défaut

<merisia-toggle label="Mode sombre" name="dark" checked></merisia-toggle>

Avec aide contextuelle

<merisia-toggle
  label="Partager ma localisation"
  name="loc"
  hint="Utilisé pour améliorer les suggestions d'itinéraires."
></merisia-toggle>

Désactivé (disabled)

<merisia-toggle
  label="Fonctionnalité bêta"
  name="beta"
  disabled
  hint="Non disponible dans votre région."
></merisia-toggle>

Lecture seule

<merisia-toggle
  label="Recevoir les notifications par courriel"
  name="notif"
  checked
></merisia-toggle>
<script>
  document.querySelector('merisia-toggle').readonly = true;
</script>

Propriétés

Propriété	Attribut	Type	Défaut	Description
MerisiaToggle (propres)
label	label	string	''	Texte du libellé du toggle
hint	hint	string	''	Aide contextuelle affichée sous le libellé
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é)
checked	checked	boolean	false	État activé du toggle
MerisiaFormElement (hérités)
name	name	string	''	Nom du champ dans le formulaire
value	value	string	''	Valeur soumise quand le toggle est activé (défaut : 'on')
required	required	boolean	false	Rend le toggle obligatoire
disabled	disabled	boolean	false	Désactive le toggle
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/toggle';