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。