스위치
분류: 폼 요소
On/Off 두 상태를 표현할 때 체크박스 대신 사용하는 토글 스위치입니다. form-check에 form-switch 클래스를 추가하면 사각 체크박스가 둥근 스위치 모양으로 바뀝니다. 마크업 구조 자체는 일반 체크박스와 동일해서, 여러 개를 나열하는 경우와 약관 동의처럼 단일 스위치로 쓰는 경우를 함께 예시로 보여줍니다.
소스
<div class="mb-3">
<div class="form-label">토글 스위치</div>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">옵션 1</span>
</label>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">옵션 2</span>
</label>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">옵션 3</span>
</label>
</div>
<div class="mb-3">
<div class="form-label">단일 스위치</div>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">이용약관에 동의합니다.</span>
</label>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
form-check | 입력과 라벨을 한 줄로 묶는 기본 컨테이너 |
form-switch | form-check와 함께 사용해 체크박스를 둥근 토글 스위치 모양으로 변경 |
form-check-input | 실제 <input type="checkbox">에 적용하는 스타일 |
form-check-label | 스위치 옆 텍스트 라벨 스타일 |
form-label | 스위치 그룹 전체의 제목 라벨 |
mb-3 | 그룹 사이에 아래쪽 여백 추가 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-스위치.html 경로에서 렌더링 결과를 확인할 수 있습니다.