vue3 component switch radio checkbox

접근성 체크박스 라디오일경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
  <div>
    <h1>접근성을 고려한 폼</h1>
 
    <!-- 스위치 -->
    <div>
      <label for="switch" class="switch">
        <input
          type="checkbox"
          id="switch"
          v-model="switchChecked"
          @change="handleSwitchChange"
          aria-label="스위치"
        />
        <span class="slider" aria-hidden="true"></span>
        <span class="label-text">스위치</span>
      </label>
    </div>
 
    <!-- 체크박스 -->
    <div>
      <label>
        <input
          type="checkbox"
          v-model="checkboxChecked"
          @change="handleCheckboxChange"
          aria-label="체크박스"
        />
        <span class="label-text">체크박스</span>
      </label>
    </div>
 
    <!-- 라디오 버튼 -->
    <div>
      <label>
        <input
          type="radio"
          id="radio1"
          value="option1"
          v-model="radioSelected"
          @change="handleRadioChange"
          aria-label="옵션 1"
        />
        <span class="label-text">옵션 1</span>
      </label>
      <label>
        <input
          type="radio"
          id="radio2"
          value="option2"
          v-model="radioSelected"
          @change="handleRadioChange"
          aria-label="옵션 2"
        />
        <span class="label-text">옵션 2</span>
      </label>
    </div>
 
    <!-- 결과 표시 -->
    <div>
      <h2>현재 상태</h2>
      <p>스위치: {{ switchChecked ? '켜짐' : '꺼짐' }}</p>
      <p>체크박스: {{ checkboxChecked ? '체크됨' : '체크되지 않음' }}</p>
      <p>선택된 라디오 버튼: {{ radioSelected }}</p>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
// 데이터 바인딩
const switchChecked = ref(false);
const checkboxChecked = ref(false);
const radioSelected = ref('');
 
// 이벤트 핸들러
const handleSwitchChange = () => {
  console.log('스위치 상태:', switchChecked.value ? '켜짐' : '꺼짐');
};
 
const handleCheckboxChange = () => {
  console.log('체크박스 상태:', checkboxChecked.value ? '체크됨' : '체크되지 않음');
};
 
const handleRadioChange = () => {
  console.log('선택된 라디오 버튼:', radioSelected.value);
};
</script>
 
<style>
/* 스위치 스타일 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 50%;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
 
input:checked + .slider {
  background-color: #2196F3;
}
 
input:checked + .slider:before {
  transform: translateX(26px);
}
 
/* 라벨 텍스트 스타일 */
.label-text {
  margin-left: 8px;
}
</style>
Colored by Color Scripter
cs
저작자표시
옛날사람

vue3 component switch radio checkbox

티스토리툴바
