Selector

Selección desplegable. Por defecto, el panel desplegable se monta en body (con posicionamiento fixed que sigue al activador); se puede indicar el contenedor con popperContainer o pasar un valor vacío para renderizarlo en su lugar; navegación completa por teclado (flechas / Enter / ESC).

Selector

<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="Selecciona un tema" 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="Sin datos">
        <template #empty>
          <span class="demo-note">Slot empty: no hay temas coincidentes</span>
        </template>
      </LhSelect>
    </div>
    <p class="demo-note">Valor actual: {{ value || '(sin selección)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 'ink',
    empty: undefined,
    options: [
      { value: 'ink', label: 'Tinta china' },
      { value: 'paper', label: 'Papel de arroz' },
      { value: 'seal', label: 'Sello' },
      { value: 'blank', label: 'Espacio en blanco' },
    ],
  }),
}
</script>

Props

Propiedad	Descripción	Tipo	Predeterminado
v-model	Valor seleccionado (coincide con option.value; prop modelValue controlado)	unknown	—
options	Lista de opciones { value, label, disabled? }	LhSelectOption[]	[]
placeholder	Texto de marcador de posición; si se omite, se usa el paquete de idioma	string	t('select.placeholder')
clearable	Mostrar el botón de borrado	boolean	false
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
disabled	Deshabilitar	boolean	false
popperContainer	Destino de montaje del desplegable	'body' \| HTMLElement \| string	'body'
name / ariaLabel	Etiquetado de accesibilidad	string	—
sx	Propiedad de diseño rápido sx	—	—

Eventos

Evento	Descripción	Parámetro de callback
input	Evento de v-model	—
change	Se dispara al cambiar el valor seleccionado	(value, option)
clear	Se dispara al borrar	—

Slots

Slot	Descripción
empty	Contenido cuando no hay datos («Sin datos» por defecto)

Accesibilidad

El activador usa role="combobox" + aria-expanded/haspopup; el desplegable, role="listbox"; las opciones, role="option"; colocado dentro de LhFormItem, adquiere automáticamente aria-invalid si falla la validación.