Switch 开关

在两个互斥状态间切换，渲染 role="switch" 自定义控件。

基础用法

受控开关

关

当前状态：关

import { useState } from 'react'
import { LhSwitch } from '@lh-ui/react'

export default function Demo() {
  const [active, setActive] = useState(false)

  return (
    <>
      <LhSwitch checked={active} onChange={(val) => setActive(val)} />
      <LhSwitch
        checked={active}
        activeText="开"
        inactiveText="关"
        onChange={(val) => setActive(val)}
      />
      <LhSwitch disabled />
      <LhSwitch loading />
    </>
  )
}

Switch Props

属性	说明	类型	可选值	默认值
checked	受控开关状态	boolean	—	—
defaultChecked	非受控默认状态	boolean	—	false
disabled	禁用	boolean	—	false
loading	加载中	boolean	—	false
activeText	打开时的文字	string	—	语言包 switch.on
inactiveText	关闭时的文字	string	—	语言包 switch.off
size	尺寸	'large' | 'middle' | 'small'	—	跟随 ConfigProvider
themeVars	组件级主题变量	Record<string, string>	—	—
sx	快速布局属性	SxProps	—	—

Switch 事件

事件	说明	回调签名	Vue 对照
onChange	状态变化（双参数）	(checked: boolean, event: MouseEvent | KeyboardEvent) => void	@change

键盘交互

开关响应 Enter / Space 切换，与原生 checkbox 行为一致；aria-checked 同步当前状态。

样式

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