Sélecteur

Liste déroulante de sélection, avec support du mode contrôlé / non contrôlé, de la navigation clavier et de l'effacement.

Utilisation de base

Sélection contrôlée

Sélectionnez un style de peinture⌄

Valeur actuelle : (non sélectionné)

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

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

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

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

Select Props

Prop	Description	Type	Options	Valeur par défaut
value	Valeur contrôlée	unknown	—	—
defaultValue	Valeur par défaut (non contrôlée)	unknown	—	—
options	Liste des options	LhSelectOption[]	—	[]
placeholder	Espace réservé	string	—	Repli du pack de langue
disabled	Désactivé	boolean	—	false
clearable	Effaçable	boolean	—	false
size	Taille	'large' | 'middle' | 'small'	—	Selon ConfigProvider
name	Attribut natif name	string	—	—
ariaLabel	Étiquette d'accessibilité	string	—	—
placement	Position de la liste déroulante	LhPlacement	—	'bottom-start'
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page	SxProps	—	—

LhSelectOption

Prop	Description	Type
label	Texte affiché de l'option	string
value	Valeur de l'option	unknown
disabled	Désactive cette option	boolean

Événements de Select

Événement	Description	Signature du callback	Équivalent Vue
onChange	Déclenché à la sélection (deux paramètres : la valeur et l'objet option)	(value: unknown, option: LhSelectOption | undefined) => void	@change
onClear	Déclenché à l'effacement	() => void	@clear

Interaction clavier

Panneau ouvert : ArrowUp / ArrowDown surligne les options (en sautant les options désactivées), Enter sélectionne, Échap referme. Le déclencheur est role="combobox", le panneau role="listbox", les options role="option", et le surlignage est synchronisé via aria-activedescendant.

ref

forwardRef<HTMLDivElement> — l'élément racine du déclencheur. LhSelectInstance expose open() / close() / focus().

Styles

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