Kotak centang
Untuk pilihan hidup/mati yang saling bebas, ketika tidak memilih apa pun dan memilih semuanya sama-sama jawaban sah.
Pratinjau langsung
Sumber
<label class="dc-cb">
<input class="dc-cb__input" type="checkbox" name="agree" value="terms" checked>
<span class="dc-cb__text">이용약관과 개인정보 처리방침에 동의합니다
<span class="dc-cb__sub">주문 내역은 5년간 보관됩니다.</span>
</span>
</label>.dc-cb {
display: flex; align-items: flex-start; gap: var(--dc-3);
min-height: 44px; padding: var(--dc-2) 0;
font-family: var(--dc-font); cursor: pointer;
}
.dc-cb__input {
appearance: none; -webkit-appearance: none;
flex: none; width: 22px; height: 22px; margin: 0;
position: relative; top: 1px;
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-xs);
background: var(--dc-surface); cursor: inherit;
transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-cb__input::after { content: ""; position: absolute; inset: 0; opacity: 0; }
.dc-cb__input:hover { border-color: var(--dc-line-bold); }
.dc-cb__input:checked,
.dc-cb__input:indeterminate,
.dc-cb__input.is-indeterminate {
background: var(--dc-brand); border-color: var(--dc-brand);
}
.dc-cb__input:checked::after {
opacity: 1; inset: 4px 4px 6px 4px;
border: 2px solid var(--dc-text-on);
border-top: 0; border-left: 0;
transform: rotate(40deg);
}
.dc-cb__input:indeterminate::after,
.dc-cb__input.is-indeterminate::after {
opacity: 1; inset: 9px 4px;
background: var(--dc-text-on); border-radius: var(--dc-r-full);
}
.dc-cb__input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dc-brand-soft); }
.dc-cb__input[aria-invalid="true"] { border-color: var(--dc-danger); }
.dc-cb__input[disabled] {
background: var(--dc-sunken); border-color: var(--dc-line); cursor: not-allowed;
}
.dc-cb__input[disabled]:checked { background: var(--dc-text-mute); border-color: var(--dc-text-mute); }
.dc-cb__text {
display: flex; flex-direction: column; gap: 2px;
font-size: 15px; line-height: 1.5; color: var(--dc-text);
}
.dc-cb__sub { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-cb__input[disabled] ~ .dc-cb__text { color: var(--dc-text-mute); }
.dc-cb__set { border: 0; margin: 0; padding: 0; font-family: var(--dc-font); }
.dc-cb__legend {
padding: 0; margin-bottom: var(--dc-1);
font-size: 14px; font-weight: 600; color: var(--dc-text);
}
.dc-cb__error {
margin: var(--dc-1) 0 0; display: flex; align-items: flex-start; gap: var(--dc-1);
font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--dc-danger);
}Cara memakainya
- Area tekan mencakup tulisannya — bungkus dengan label dan ia melebar sendiri
- Beri nama sesuai keadaan aktif; hindari kalimat negatif seperti "Jangan matikan notifikasi"
- Bila hanya sebagian anak yang aktif, tampilkan induknya sebagai sebagian
Hal yang perlu diwaspadai
- Menyembunyikan input dengan display:none demi menggambar kotak sendiri membuatnya tak terjangkau papan tik
- Beberapa kotak untuk satu pertanyaan butuh fieldset dan legend, jika tidak pembaca layar tak pernah menyebut pertanyaannya