Sélecteur

Sélection déroulante. Par défaut, le calque déroulant est monté sur body (positionnement fixe qui suit le déclencheur) ; popperContainer permet de désigner un conteneur, ou de rendre sur place en passant une valeur vide ; navigation complète au clavier (flèches directionnelles / Enter / ESC).

Sélecteur

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" placeholder="Veuillez choisir un thème" clearable name="theme" />
      <LhSelect v-model="value" :options="options" size="small" />
      <LhSelect v-model="value" :options="options" size="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" disabled />
      <LhSelect v-model="empty" :options="[]" aria-label="Aucune donnée">
        <template #empty>
          <span class="demo-note">Slot empty : aucun thème correspondant</span>
        </template>
      </LhSelect>
    </div>
    <p class="demo-note">Valeur actuelle : {{ value || '(non sélectionné)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 'ink',
    empty: undefined,
    options: [
      { value: 'ink', label: 'Encre de Chine' },
      { value: 'paper', label: 'Papier de riz' },
      { value: 'seal', label: 'Sceau' },
      { value: 'blank', label: 'Vide' },
    ],
  }),
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
v-model	Valeur sélectionnée (correspond à option.value ; prop contrôlée modelValue)	unknown	—
options	Liste des options { value, label, disabled? }	LhSelectOption[]	[]
placeholder	Texte du placeholder, pack de langue par défaut	string	t('select.placeholder')
clearable	Affiche le bouton d'effacement	boolean	false
size	Taille	'small' \| 'medium' \| 'large'	'medium'
disabled	Désactivé	boolean	false
popperContainer	Cible de montage du calque déroulant	'body' \| HTMLElement \| string	'body'
name / ariaLabel	Étiquetage d'accessibilité	string	—
sx	Raccourci de mise en page sx	—	—

Events

Événement	Description	Paramètres de rappel
input	Événement v-model	—
change	Déclenché lorsque la valeur sélectionnée change	(value, option)
clear	Déclenché lors de l'effacement	—

Slots

Slot	Description
empty	Contenu affiché en l'absence de données (par défaut : « Aucune donnée »)

Accessibilité

Le déclencheur porte role="combobox" + aria-expanded/haspopup, le calque déroulant role="listbox" et les options role="option" ; placé dans un LhFormItem, le composant reçoit automatiquement aria-invalid en cas d'échec de validation.