Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Nhóm nút radio

Dùng cho một lựa chọn loại trừ nhau, khi những lựa chọn không được chọn vẫn phải nhìn thấy.

Nhập liệu

Xem trước trực tiếp

Nguồn

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

Cách dùng

  • Luôn chọn sẵn một mục — nếu "không chọn gì" cũng là câu trả lời thì nên dùng hộp kiểm
  • Gắn câu hỏi bằng fieldset và legend để trình đọc màn hình đọc "Phương thức giao hàng, 1 trong 3"
  • Khi mỗi lựa chọn cần kèm giá hoặc thời gian thì mở rộng thành dạng thẻ

Điểm cần lưu ý

  • Các nút radio cùng nhóm phải dùng chung name — khác name thì nhiều nút bật cùng lúc
  • Lựa chọn không khả dụng thì giữ lại ở trạng thái vô hiệu và ghi rõ lý do

Tiếp theo