Masukan tag
Untuk menampung beberapa nilai dan mencabutnya satu-satu — keahlian, sertifikat, wilayah yang diinginkan.
Pratinjau langsung
Sumber
<div class="dc-tags">
<label class="dc-tags__label" for="dc-tags-a">할 수 있는 일</label>
<div class="dc-tags__box">
<span class="dc-tags__chip">용접<button class="dc-tags__x" type="button"><span class="dc-sr">용접 지우기</span>✕</button></span>
<span class="dc-tags__chip">도장<button class="dc-tags__x" type="button"><span class="dc-sr">도장 지우기</span>✕</button></span>
<input class="dc-tags__input" id="dc-tags-a" type="text" placeholder="입력하고 엔터" aria-describedby="dc-tags-a-hint" />
</div>
<p class="dc-tags__hint" id="dc-tags-a-hint">엔터를 누르면 담깁니다. 최대 5개.</p>
</div>.dc-tags { max-width:480px; font-family:var(--dc-font); }
.dc-tags__label { display:block; margin-bottom:var(--dc-2); font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-tags__box { display:flex; flex-wrap:wrap; align-items:center; gap:var(--dc-2); min-height:44px; padding:var(--dc-2); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); }
.dc-tags__box:focus-within { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-tags__box.is-error { border-color:var(--dc-danger); }
.dc-tags__chip { display:inline-flex; align-items:center; gap:var(--dc-1); padding:3px 3px 3px var(--dc-3); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:13px; }
.dc-tags__x { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:0; border-radius:var(--dc-r-full); background:transparent; color:inherit; font-size:11px; }
.dc-tags__x:hover { background:var(--dc-brand); color:var(--dc-text-on); }
.dc-tags__input { flex:1 1 120px; min-width:110px; min-height:28px; padding:var(--dc-1); border:0; background:transparent; color:var(--dc-text); font:inherit; font-size:14px; }
.dc-tags__input:focus { outline:none; }
.dc-tags__input::placeholder { color:var(--dc-text-mute); }
.dc-tags__hint { margin:var(--dc-2) 0 0; font-size:12px; color:var(--dc-text-mute); }
.dc-tags__error { margin:var(--dc-2) 0 0; font-size:12px; font-weight:600; color:var(--dc-danger); }
.dc-tags__menu { list-style:none; margin:var(--dc-1) 0 0; padding:var(--dc-1); border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); background:var(--dc-overlay); box-shadow:var(--dc-sh-2); }
.dc-tags__option { display:block; width:100%; min-height:40px; padding:var(--dc-2) var(--dc-3); border:0; border-radius:var(--dc-r-xs); background:transparent; color:var(--dc-text); font:inherit; font-size:13px; text-align:left; }
.dc-tags__option:hover { background:var(--dc-sunken); color:var(--dc-brand-text); }
.dc-tags__option[aria-selected="true"] { background:var(--dc-brand-soft); color:var(--dc-brand-text); font-weight:600; }Cara memakainya
- Beri setiap tag di dalam kotak tombol hapusnya sendiri
- Bila nilainya sudah berupa daftar tetap, tampilkan saran supaya tak ada yang salah tulis
- Kalau ada batas, sebut angkanya sebelum terlampaui, dan katakan apa yang harus dilakukan saat lewat
Hal yang perlu diwaspadai
- Sebutkan apa yang dihapus tiap tombol — tanda ✕ sendiri tidak terbaca pembaca layar
- Hapus yang hanya bisa lewat Backspace membuat pengguna layar sentuh terjebak