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'