Bidang teks
Untuk nilai satu baris, ketika label dan teks bantuan harus menjelaskan isinya sebelum orang menulis.
Pratinjau langsung
Sumber
<div class="dc-field">
<label class="dc-field__label" for="dc-field-name">받는 분 이름</label>
<input class="dc-field__input" id="dc-field-name" type="text" name="name" placeholder="홍길동" aria-describedby="dc-field-name-help">
<p class="dc-field__help" id="dc-field-name-help">주문서와 택배 송장에 그대로 인쇄됩니다.</p>
</div>.dc-field {
display: flex; flex-direction: column; gap: var(--dc-2);
max-width: 420px; font-family: var(--dc-font);
}
.dc-field__label {
font-size: 14px; font-weight: 600; color: var(--dc-text); line-height: 1.3;
}
.dc-field__req { color: var(--dc-danger); margin-left: 2px; }
.dc-field__input {
width: 100%; min-height: 44px; padding: 0 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.4;
transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-field__input::placeholder { color: var(--dc-text-mute); }
.dc-field__input:hover { border-color: var(--dc-line-bold); }
.dc-field__input:focus {
outline: none; border-color: var(--dc-brand);
box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
.dc-field__input[aria-invalid="true"] { border-color: var(--dc-danger); }
.dc-field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--dc-danger-soft); }
.dc-field__input[disabled] {
background: var(--dc-sunken); color: var(--dc-text-mute);
border-color: var(--dc-line); cursor: not-allowed;
}
.dc-field__help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-field__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-field__ok {
margin: 0; display: flex; align-items: flex-start; gap: var(--dc-1);
font-size: 13px; line-height: 1.5; color: var(--dc-ok);
}Cara memakainya
- Letakkan label di atas bidang — placeholder hilang begitu orang mulai mengetik
- Teks bantuan dibutuhkan sebelum mengisi, pesan galat dibutuhkan sesudahnya
- Tulis cara memperbaiki, bukan sekadar salahnya: "Gunakan format 010-1234-5678"
Hal yang perlu diwaspadai
- Jangan tandai galat hanya dengan warna — sertakan teks dan ikon
- Garis tepi memakai --dc-line-field; garis yang lebih tipis lenyap di mode gelap