ក្រុមប៊ូតុងរ៉ាដ្យូ

ប្រើសម្រាប់ជម្រើសតែមួយដែលផ្ដាច់គ្នា ហើយជម្រើសដែលមិនបានជ្រើសត្រូវបន្តមើលឃើញ។

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

ប្រភព

HTML CSS

<fieldset class="dc-rd">
  <legend class="dc-rd__legend">배송 방법</legend>
  <div class="dc-rd__list">
    <label class="dc-rd__item">
      <input class="dc-rd__input" type="radio" name="ship-method" value="normal" checked>
      <span class="dc-rd__text">일반 배송
        <span class="dc-rd__sub">2~3일 안에 도착, 무료</span>
      </span>
    </label>
    <label class="dc-rd__item">
      <input class="dc-rd__input" type="radio" name="ship-method" value="fast">
      <span class="dc-rd__text">빠른 배송
        <span class="dc-rd__sub">다음 날 도착, 3,000원</span>
      </span>
    </label>
    <label class="dc-rd__item">
      <input class="dc-rd__input" type="radio" name="ship-method" value="pickup" disabled>
      <span class="dc-rd__text">매장 수령
        <span class="dc-rd__sub">가까운 매장에 재고가 없습니다</span>
      </span>
    </label>
  </div>
</fieldset>

.dc-rd {
  border: 0; margin: 0; padding: 0;
  max-width: 420px; font-family: var(--dc-font);
}
.dc-rd__legend {
  padding: 0; margin-bottom: var(--dc-2);
  font-size: 14px; font-weight: 600; color: var(--dc-text);
}
.dc-rd__list { display: flex; flex-direction: column; gap: var(--dc-1); }
.dc-rd__item {
  display: flex; align-items: flex-start; gap: var(--dc-3);
  min-height: 44px; padding: var(--dc-2) 0; cursor: pointer;
}
.dc-rd__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-full);
  background: var(--dc-surface); cursor: inherit;
  transition: border-color var(--dc-fast), border-width var(--dc-fast);
}
.dc-rd__input:hover { border-color: var(--dc-line-bold); }
.dc-rd__input:checked { border: 7px solid var(--dc-brand); }
.dc-rd__input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dc-brand-soft); }
.dc-rd__input[disabled] { background: var(--dc-sunken); border-color: var(--dc-line); cursor: not-allowed; }
.dc-rd__input[disabled]:checked { border-color: var(--dc-text-mute); }
.dc-rd__text {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 15px; line-height: 1.5; color: var(--dc-text);
}
.dc-rd__sub { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-rd__input[disabled] ~ .dc-rd__text { color: var(--dc-text-mute); }
.dc-rd--inline .dc-rd__list { flex-direction: row; flex-wrap: wrap; gap: var(--dc-5); }
.dc-rd--card .dc-rd__item {
  padding: var(--dc-3); align-items: center;
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-md);
  background: var(--dc-surface);
  transition: border-color var(--dc-fast), background var(--dc-fast);
}
.dc-rd--card .dc-rd__item:hover { border-color: var(--dc-line-bold); }
.dc-rd--card .dc-rd__item:has(.dc-rd__input:checked) {
  border-color: var(--dc-brand); background: var(--dc-brand-soft);
}

របៀបប្រើ

ត្រូវជ្រើសមួយជាមុនជានិច្ច — បើ «មិនជ្រើសអ្វី» ក៏ជាចម្លើយ នោះគួរប្រើប្រអប់ធីក
ភ្ជាប់សំណួរដោយ fieldset និង legend ដើម្បីកម្មវិធីអានអេក្រង់អានថា «វិធីដឹកជញ្ជូន ១ ក្នុង ៣»
ពេលជម្រើសនីមួយៗត្រូវមានតម្លៃ ឬរយៈពេល ត្រូវពន្លាតជាបែបកាត

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

ប៊ូតុងរ៉ាដ្យូក្នុងក្រុមតែមួយត្រូវមាន name ដូចគ្នា — បើខុសគ្នា នឹងបើកបានច្រើនក្នុងពេលតែមួយ
ជម្រើសដែលប្រើមិនបាន ត្រូវទុកឱ្យឃើញតែបិទការប្រើ ហើយសរសេរមូលហេតុ

បន្ទាប់

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

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

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

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