Area teks
Untuk nilai yang panjangnya tak tentu — permintaan, alasan, catatan yang ditulis dalam kalimat.
Pratinjau langsung
Sumber
<div class="dc-ta">
<label class="dc-ta__label" for="dc-ta-note">배송 요청사항</label>
<textarea class="dc-ta__input" id="dc-ta-note" name="note" rows="4" placeholder="부재 시 경비실에 맡겨 주세요" aria-describedby="dc-ta-note-help dc-ta-note-count"></textarea>
<div class="dc-ta__foot">
<p class="dc-ta__help" id="dc-ta-note-help">기사님께 그대로 전달됩니다.</p>
<span class="dc-ta__count" id="dc-ta-note-count">0 / 200</span>
</div>
</div>.dc-ta {
display: flex; flex-direction: column; gap: var(--dc-2);
max-width: 460px; font-family: var(--dc-font);
}
.dc-ta__label { font-size: 14px; font-weight: 600; color: var(--dc-text); }
.dc-ta__input {
width: 100%; min-height: 112px; padding: var(--dc-3);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-family: inherit; font-size: 15px; line-height: 1.6;
resize: vertical;
transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-ta__input::placeholder { color: var(--dc-text-mute); }
.dc-ta__input:hover { border-color: var(--dc-line-bold); }
.dc-ta__input:focus {
outline: none; border-color: var(--dc-brand);
box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
.dc-ta__input[aria-invalid="true"] { border-color: var(--dc-danger); }
.dc-ta__input[disabled] {
background: var(--dc-sunken); color: var(--dc-text-mute);
border-color: var(--dc-line); resize: none; cursor: not-allowed;
}
.dc-ta__foot {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--dc-3);
}
.dc-ta__help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-ta__error {
margin: 0; display: flex; align-items: flex-start; gap: var(--dc-1);
font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--dc-danger);
}
.dc-ta__count {
flex: none; font-family: var(--dc-mono); font-size: 13px; line-height: 1.5;
color: var(--dc-text-mute); font-variant-numeric: tabular-nums;
}
.dc-ta__count--over { color: var(--dc-danger); font-weight: 700; }
.dc-ta--compact .dc-ta__input { min-height: 64px; font-size: 14px; }Cara memakainya
- Jumlah baris yang terlihat menandakan panjang yang diharapkan: dua baris berarti singkat, enam baris berarti silakan panjang
- Jika ada batas, tampilkan hitungannya sejak awal — maxlength yang keras memotong teks tempelan tanpa memberi tahu
- Biarkan ukuran vertikal bisa ditarik; penulis panjang akan melebarkannya sendiri
Hal yang perlu diwaspadai
- Jangan hanya membuat penghitung jadi merah — sebutkan berapa yang harus dikurangi
- resize: horizontal mendorong kolom di sebelahnya dan merusak tata letak