Grup radio
Untuk satu pilihan yang saling menutup, ketika pilihan yang tidak diambil tetap harus terlihat.
Pratinjau langsung
Sumber
<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);
}Cara memakainya
- Selalu pilih satu sejak awal — kalau "tidak memilih" juga jawaban sah, pakai kotak centang
- Sertakan pertanyaannya dengan fieldset dan legend agar pembaca layar menyebut "Metode pengiriman, 1 dari 3"
- Kalau setiap pilihan perlu harga atau durasi, lebarkan menjadi kartu
Hal yang perlu diwaspadai
- Radio dalam satu grup harus memakai name yang sama — name berbeda membuat beberapa aktif sekaligus
- Pilihan yang tak tersedia jangan dihapus; biarkan nonaktif dan tuliskan alasannya