Checkbox

Checkbox (체크박스)

checkbox 클래스는 <input type="checkbox"> HTML 요소를 감싸는 간단한 래퍼예요. 의도적으로 스타일을 적용하지 않아서 브라우저 간 호환성과 사용자 경험을 그대로 유지해요.

출처: 문서

본문

checkbox 클래스는 <input type="checkbox"> HTML 요소를 감싸는 간단한 래퍼예요. 크로스 브라우저 호환성과 사용자 경험을 보존하기 위해 의도적으로 스타일을 입히지 않아요.

Remember me (로그인 상태 유지)

<label class="checkbox">
  <input type="checkbox" />
  Remember me
</label>

체크박스에 링크를 넣을 수도 있고, 심지어 비활성화할 수도 있어요.

I agree to the terms and conditions (약관에 동의합니다)

<label class="checkbox">
  <input type="checkbox" />
  I agree to the <a href="#">terms and conditions</a>
</label>

Save my preferences (기본 설정 저장)

<label class="checkbox" disabled>
  <input type="checkbox" disabled />
  Save my preferences
</label>

체크박스 목록 (List of Checkboxes)

여러 개의 체크박스를 나열하고 싶다면 <div class="checkboxes"> 요소로 감싸요:

Monday · Tuesday · Wednesday · Thursday · Friday · Saturday · Sunday

<div class="checkboxes">
  <label class="checkbox">
    <input type="checkbox" />
    Monday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Tuesday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Wednesday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Thursday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Friday
  </label>

  <label class="checkbox">
    <input type="checkbox" checked />
    Saturday
  </label>

  <label class="checkbox">
    <input type="checkbox" checked />
    Sunday
  </label>
</div>

더 알아보기 (Learn more)