Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Daftar pilihan

Baris untuk dipilih — cara kirim, cabang, paket — yang terpilih ditandai centang.

Input

Pratinjau langsung

Sumber

<fieldset class="dc-pick">
  <legend class="dc-pick__legend">받는 방법</legend>
  <ul class="dc-pick__list">
    <li class="dc-pick__item">
      <input class="dc-pick__ctrl" type="radio" name="dc-pick-a" id="dc-pick-a1" checked />
      <label class="dc-pick__row" for="dc-pick-a1">
        <span class="dc-pick__text"><span class="dc-pick__title">택배로 받기</span><span class="dc-pick__sub">모레 도착 · 3,000원</span></span>
        <svg class="dc-pick__check" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 13 4 4 10-10" /></svg>
      </label>
    </li>
    <li class="dc-pick__item">
      <input class="dc-pick__ctrl" type="radio" name="dc-pick-a" id="dc-pick-a2" />
      <label class="dc-pick__row" for="dc-pick-a2">
        <span class="dc-pick__text"><span class="dc-pick__title">편의점에서 받기</span><span class="dc-pick__sub">내일 저녁부터 · 무료</span></span>
        <svg class="dc-pick__check" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 13 4 4 10-10" /></svg>
      </label>
    </li>
    <li class="dc-pick__item">
      <input class="dc-pick__ctrl" type="radio" name="dc-pick-a" id="dc-pick-a3" />
      <label class="dc-pick__row" for="dc-pick-a3">
        <span class="dc-pick__text"><span class="dc-pick__title">매장에서 찾기</span><span class="dc-pick__sub">오늘 6시 이후 · 무료</span></span>
        <svg class="dc-pick__check" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 13 4 4 10-10" /></svg>
      </label>
    </li>
  </ul>
</fieldset>
.dc-pick { min-width:0; margin:0; padding:var(--dc-4) 0; border:0; background:var(--dc-bg); font-family:var(--dc-font); }
.dc-pick__legend { padding:0 var(--dc-4); margin-bottom:var(--dc-2); font-size:15px; font-weight:600; color:var(--dc-text); }
.dc-pick__list { margin:0; padding:0; list-style:none; border-top:1px solid var(--dc-line); }
.dc-pick__item { position:relative; border-bottom:1px solid var(--dc-line); }
.dc-pick__ctrl { position:absolute; left:var(--dc-4); top:50%; width:1px; height:1px; margin:0; opacity:0; }
.dc-pick__row { display:flex; align-items:center; gap:var(--dc-3); min-height:64px; padding:var(--dc-3) var(--dc-4); background:var(--dc-surface); color:var(--dc-text); cursor:pointer; transition:background var(--dc-fast); }
.dc-pick__row:hover { background:var(--dc-sunken); }
.dc-pick__text { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.dc-pick__title { font-size:15px; font-weight:600; }
.dc-pick__sub { font-size:13px; color:var(--dc-text-mute); }
.dc-pick__badge { flex:none; padding:2px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-warn-soft); color:var(--dc-warn); font-size:11px; font-weight:700; }
.dc-pick__check { flex:none; width:24px; height:24px; fill:none; stroke:var(--dc-brand); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity var(--dc-fast); }
.dc-pick__box { flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:2px solid var(--dc-line-field); border-radius:var(--dc-r-xs); color:transparent; }
.dc-pick__boxico { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.dc-pick__count { margin:0; padding:var(--dc-3) var(--dc-4) 0; font-size:13px; color:var(--dc-text-sub); }
.dc-pick__ctrl:checked + .dc-pick__row { background:var(--dc-brand-soft); }
.dc-pick__ctrl:checked + .dc-pick__row .dc-pick__title { color:var(--dc-brand-text); }
.dc-pick__ctrl:checked + .dc-pick__row .dc-pick__check { opacity:1; }
.dc-pick__ctrl:checked + .dc-pick__row .dc-pick__box { border-color:var(--dc-brand); background:var(--dc-brand); color:var(--dc-text-on); }
.dc-pick__ctrl:focus-visible + .dc-pick__row { outline:2px solid var(--dc-brand); outline-offset:-2px; }
.dc-pick__ctrl[disabled] + .dc-pick__row { background:var(--dc-sunken); cursor:not-allowed; }
.dc-pick__ctrl[disabled] + .dc-pick__row .dc-pick__title { color:var(--dc-text-mute); }

Cara memakainya

  • Bungkus seluruh baris dengan label agar disentuh di mana pun tetap terpilih, bukan bulatannya saja
  • Pilih satu pakai radio, pilih banyak pakai checkbox — jangan bedakan hanya dari bentuk
  • Baris yang tidak bisa dipilih, tulis alasannya di baris itu

Hal yang perlu diwaspadai

  • Kalau kontrol aslinya disembunyikan, biarkan :focus-visible memberi garis pada baris — pengguna papan tuts kehilangan posisi
  • Jaga tinggi baris minimal 56px

Berikutnya