Switch スイッチ

2 つの排他的な状態を切り替えます。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	状態の変化（2 引数）	(checked: boolean, event: MouseEvent | KeyboardEvent) => void	@change

キーボード操作

スイッチは Enter / Space で切り替わり、ネイティブ checkbox の挙動と一致します。aria-checked が現在の状態と同期します。

スタイル

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