라디오 버튼·체크박스
분류: 폼 요소
라디오 버튼과 체크박스를 .form-check 구조로 감싼 기본 형태를 모아둔 예제입니다. 세로로 쌓이는 기본형, form-check-inline을 붙인 가로 배치형, disabled/checked 상태, 그리고 라벨 아래에 부가 설명(form-check-description)이 붙은 형태까지 실무에서 자주 쓰는 변형을 한 문서에서 확인할 수 있습니다.
소스
<div class="mb-3">
<div class="form-label">라디오 버튼</div>
<div>
<label class="form-check">
<input class="form-check-input" type="radio" name="radios" checked="">
<span class="form-check-label">옵션 1</span>
</label>
<label class="form-check">
<input class="form-check-input" type="radio" name="radios">
<span class="form-check-label">옵션 2</span>
</label>
<label class="form-check">
<input class="form-check-input" type="radio" disabled="">
<span class="form-check-label">옵션 3</span>
</label>
<label class="form-check">
<input class="form-check-input" type="radio" checked="" disabled="">
<span class="form-check-label">옵션 4</span>
</label>
</div>
</div>
<div class="mb-3">
<div class="form-label">인라인 라디오 버튼</div>
<div>
<label class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radios-inline" checked="">
<span class="form-check-label">옵션 1</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radios-inline">
<span class="form-check-label">옵션 2</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radios-inline" disabled="">
<span class="form-check-label">옵션 3</span>
</label>
</div>
</div>
<div class="mb-3">
<div class="form-label">체크박스</div>
<div>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">체크박스 입력</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-label">비활성화된 체크박스 입력</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">체크된 체크박스 입력</span>
</label>
</div>
</div>
<div class="mb-3">
<div class="form-label">인라인 체크박스</div>
<div>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">옵션 1</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-label">옵션 2</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">옵션 3</span>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">설명이 있는 체크박스</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">
기본 체크박스
</span>
<span class="form-check-description">
여기에 체크박스에 대한 설명이 들어갑니다.
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">
두 줄로 줄바꿈되는 긴 체크박스 항목
</span>
<span class="form-check-description">
이 설명은 항목이 길어질 경우 어떻게 표시되는지 보여줍니다.
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">
설명이 없는 기본 체크박스
</span>
</label>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
form-check | 라디오/체크박스와 라벨을 한 줄로 묶는 기본 컨테이너 |
form-check-inline | 여러 항목을 세로가 아닌 가로로 나열 |
form-check-input | 실제 <input type="radio"> / <input type="checkbox">에 적용하는 스타일 |
form-check-label | 입력 옆 텍스트 라벨 스타일 |
form-check-description | 라벨 아래에 표시되는 회색 보조 설명 문구 |
form-label | 라디오/체크박스 그룹 전체의 제목 라벨 |
mb-3 | 그룹 사이에 아래쪽 여백 추가 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-라디오-버튼-체크박스.html 경로에서 렌더링 결과를 확인할 수 있습니다.