Bootstrap 5 체크박스와 라디오 버튼

과목 추천:

체크박스

예제

<div class="form-check">
  사용자가 사전 설정된 옵션 목록에서 필요한 수의 옵션을 선택할 수 있도록 하려면 체크박스를 사용하십시오.
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
</div>

직접 시험해보세요

<label class="form-check-label">선택 사항 1</label>

예제 설명 체크박스 스타일을 설정하려면, class="form-check"

그런 다음, 태그와 체크박스가 적절한 마argins를 가지도록 포장 요소를 설정합니다. .form-check-label 클래스를 태그 요소에 추가하고, .form-check-input 추가할 .form-check 컨테이너 내에서 체크박스 스타일을 올바르게 설정하도록 합니다.

체크박스를 기본적으로 선택하려면, checked 속성.

단일 선택 버튼

사용자가 사전에 설정된 옵션 목록에서 하나만 선택할 수 있도록 제한하려면, 단일 선택 버튼을 사용하세요.

예제

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>옵션 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">옵션 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>옵션 3
  <label class="form-check-label"></label>
</div>

직접 시험해보세요

스위치를 토글하세요

체크박스를 스위치 스타일로 설정하려면, .form-switch 클래스와 .form-check 컨테이너와 함께 사용하면:

예제

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">다크 모드</label>
</div>

직접 시험해보세요