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 가 설정됩니다.