ប្រអប់ធីក

ប្រើសម្រាប់ជម្រើសបើក/បិទដែលដោយឡែកពីគ្នា ដែលមិនជ្រើសអ្វី និងជ្រើសទាំងអស់ សុទ្ធតែជាចម្លើយបាន។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<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);
}

របៀបប្រើ

ផ្ទៃចុចរួមបញ្ចូលទាំងអក្សរ — ខ្ចប់ក្នុង label នោះវាធំឡើងដោយខ្លួនឯង
ដាក់ឈ្មោះតាមស្ថានភាពបើក កុំប្រើប្រយោគអវិជ្ជមានដូច «មិនបិទការជូនដំណឹង»
ពេលកូនមួយចំនួនតែប៉ុណ្ណោះបើក ត្រូវបង្ហាញធាតុមេជាការជ្រើសមួយផ្នែក

ចំណុចត្រូវប្រុងប្រយ័ត្ន

កុំលាក់ input ដោយ display:none ដើម្បីគូរប្រអប់ខ្លួនឯង — ក្ដារចុចនឹងទៅដល់មិនបាន
ប្រអប់ច្រើនដែលឆ្លើយសំណួរតែមួយត្រូវមាន fieldset និង legend បើមិនដូច្នេះកម្មវិធីអានអេក្រង់មិនអានសំណួរ

បន្ទាប់

ប្រអប់បញ្ចូលលើកម្មវិធី ការបញ្ចូល កម្មវិធី

ប្រអប់លេខកូដ ៦ ការបញ្ចូល កម្មវិធី

របារស្វែងរកខាងក្រោម ការបញ្ចូល កម្មវិធី

ប្រអប់បញ្ចូលចំនួនប្រាក់ ការបញ្ចូល កម្មវិធី