merisia-select

<merisia-select>

Menu déroulant accessible basé sur un <select> natif. Quand une seule option est disponible, la flèche est masquée et le champ se comporte comme un champ texte.

Démos

Basique (plusieurs options)

<merisia-select id="province" label="Province" name="province"
  hint="Choisissez votre province de résidence."></merisia-select>
<script>
  document.getElementById('province').options = [
    { value: 'qc', label: 'Québec' },
    { value: 'on', label: 'Ontario' },
  ];
</script>

Option unique (sans flèche)

Quand une seule option est disponible, le composant se comporte comme un champ de texte — la flèche de sélection est masquée.

<merisia-select id="country" label="Pays" name="country"></merisia-select>
<script>
  // Avec 1 seule option, la flèche disparaît automatiquement
  document.getElementById('country').options = [
    { value: 'ca', label: 'Canada' },
  ];
</script>

Avec erreur

const el = document.querySelector('merisia-select');
el.errors = ["Veuillez choisir une province."];

Lecture seule

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

Propriétés

Propriété	Attribut	Type	Défaut	Description
MerisiaSelect (propres)
options	–	SelectOption[] \| SelectOptGroup[]	[]	Liste d'options plates ou groupées (propriété JS uniquement)
placeholder	placeholder	string	'Sélectionner…'	Texte de l'option vide (non sélectionnable)
hideEmpty	hide-empty	boolean	false	Masque l'option vide
MerisiaTextFieldBase (hérités)
label	label	string	''	Texte du libellé
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é)
readonly	readonly	boolean	false	Rend le champ non modifiable
invalid	invalid	boolean	false	État d'erreur (synchronisé automatiquement avec `errors`)
MerisiaFormElement (hérités)
name	name	string	''	Nom du champ dans le formulaire
value	value	string	''	Valeur sélectionnée
required	required	boolean	false	Rend la sélection obligatoire
disabled	disabled	boolean	false	Désactive le menu
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/select';