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.

Import

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

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

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

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;

Tri automatique

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

<merisia-select autosort id="province" label="Province" name="province"></merisia-select>
<script>
  document.getElementById('province').options = [
    { value: 'qc', label: 'Québec' },
    { value: 'on', label: 'Ontario' },
    { value: 'bc', label: 'Colombie-Britannique' },
    { value: 'ab', label: 'Alberta' },
  ];
</script>

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
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
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)`