토글 스위치 Toggle switch

토글은 상호 배타적인 두 가지 상태를 전환하는 데 사용되는 요소이다.

KRDS 가이드

기본

v-model로 켜짐 상태(boolean)를 연결하고, label로 스위치 이름을 표시합니다.

switch : default

현재 상태: 꺼짐

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsToggleSwitch } from '@krds.ui/vue'

  const checked = ref(false)
</script>

<template>
  <div>
    <KrdsToggleSwitch v-model="checked" label="switch : default" />
    <p style="margin-top: 1rem">현재 상태: {{ checked ? '켜짐' : '꺼짐' }}</p>
  </div>
</template>

크기

Medium 크기 스위치 (기본)

Large 크기 스위치

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsToggleSwitch } from '@krds.ui/vue'

  const mediumChecked = ref(false)
  const largeChecked = ref(false)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 1.5rem">
    <KrdsToggleSwitch v-model="mediumChecked" size="medium" label="Medium 크기 스위치 (기본)" />
    <KrdsToggleSwitch v-model="largeChecked" size="large" label="Large 크기 스위치" />
  </div>
</template>

KrdsToggleSwitch

Props

이름	타입	기본값	설명
class	KrdsClassValue	-	CSS 클래스
name	string	-	폼 필드 이름
label	string	-	스위치 라벨
id	string	-	HTML ID
required	boolean	false	필수 입력 여부
disabled	boolean	false	비활성화 여부
size	"medium" | "large"	'medium'	크기
modelValue	boolean	false	모델 값
readonly	boolean	false	읽기 전용 여부

Events

이름	인자	설명
change	[value: boolean]	켜거나 껐을 때
update:modelValue	[value: boolean]	켜짐 상태가 바뀔 때 (v-model)