चेकबक्स

एक-आपसमा स्वतन्त्र विकल्प खोल्न-बन्द गर्न — कुनै पनि नछान्नु र सबै छान्नु दुवै ठीक जवाफ हुने ठाउँमा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

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 ले बाँध्नुपर्छ, नत्र स्क्रिन रिडरले प्रश्न सुनाउँदैन

अर्को

एप इनपुट बाकस इनपुट एप

प्रमाणीकरण कोडका ६ बाकस इनपुट एप

तल्लो खोज बार इनपुट एप

रकम इनपुट इनपुट एप