Switch スイッチ

オン / オフを切り替えるスイッチです。active/inactive のテキスト、loading と disabled をサポートし、クリックおよび Enter/Space キーで切り替えられます。

スイッチ

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap">
      <LhSwitch v-model="on" active-text="夜モード" inactive-text="昼モード" name="theme" />
      <LhSwitch v-model="loading" loading />
      <LhSwitch v-model="on2" disabled />
    </div>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; align-items: center">
      <LhSwitch v-model="s" size="small" active-text="小" />
      <LhSwitch v-model="m" size="medium" active-text="中" />
      <LhSwitch v-model="l" size="large" active-text="大" />
    </div>
    <p class="demo-note">loading 状態ではクリックが無効になりローディングサークルが表示されます。name はネイティブ input に透過されます。</p>
  </div>
</template>

<script>
export default {
  data: () => ({ on: true, on2: false, loading: true, s: true, m: true, l: false }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	スイッチの状態（model: modelValue/input）	boolean	false
activeText / inactiveText	両側のテキスト	string	''
loading	読み込み中（クリック無効 + サークル）	boolean	false
disabled	無効	boolean	false
size	サイズ	'small' \| 'medium' \| 'large'	'medium'
name	ネイティブ name	string	''

Events

イベント	説明	コールバックパラメータ
input	v-model のイベント	—
change	スイッチの状態が変化したときに発火	(value)

アクセシビリティ

ルート要素は role="switch" + aria-checked/disabled です。LhFormItem 内でバリデーションに失敗した場合、aria-invalid が付与されます。