Selector

Selector desplegable; admite uso controlado / no controlado, navegación por teclado y borrado.

Uso básico

Selección controlada

Selecciona un estilo de pintura⌄

Valor actual: (no seleccionado)

import { useState } from 'react'
import { LhSelect } from '@lh-ui/react'
import type { LhSelectOption } from '@lh-ui/react'

const options: LhSelectOption[] = [
  { label: 'Tinta', value: 'ink' },
  { label: 'Danqing', value: 'danqing' },
  { label: 'Blanco', value: 'blank' },
  { label: 'Gongbi', value: 'gongbi' },
]

export default function Demo() {
  const [value, setValue] = useState<string>('')

  return (
    <LhSelect
      value={value}
      options={options}
      placeholder="Selecciona un estilo"
      onChange={(val) => setValue(val as string)}
    />
  )
}

Props de Select

Prop	Descripción	Tipo	Opciones	Predeterminado
value	Valor controlado	unknown	—	—
defaultValue	Valor predeterminado no controlado	unknown	—	—
options	Lista de opciones	LhSelectOption[]	—	[]
placeholder	Marcador de posición	string	—	Respaldo del paquete de idioma
disabled	Desactivado	boolean	—	false
clearable	Se puede borrar	boolean	—	false
size	Tamaño	'large' | 'middle' | 'small'	—	Según ConfigProvider
name	Atributo nativo name	string	—	—
ariaLabel	Etiqueta de accesibilidad	string	—	—
placement	Posición del desplegable	LhPlacement	—	'bottom-start'
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Propiedad abreviada de diseño	SxProps	—	—

LhSelectOption

Prop	Descripción	Tipo
label	Texto mostrado de la opción	string
value	Valor de la opción	unknown
disabled	Desactiva esa opción	boolean

Eventos de Select

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Se dispara al seleccionar (dos parámetros: el valor y el objeto de la opción)	(value: unknown, option: LhSelectOption | undefined) => void	@change
onClear	Se dispara al borrar	() => void	@clear

Interacción de teclado

Con el panel desplegado: ArrowUp / ArrowDown resaltan opciones (saltan las desactivadas), Enter selecciona y Escape lo cierra. El activador es role="combobox", el panel es role="listbox", las opciones son role="option", y el resaltado se sincroniza con aria-activedescendant.

ref

forwardRef<HTMLDivElement> — elemento raíz del activador. LhSelectInstance expone open() / close() / focus().

Estilos

import '@lh-ui/react/style/select'