Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Text field

For a single-line value, where the label and hint must say what to type before anyone types.

Inputs

Live preview

Source

<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);
}

How to use it

  • Keep the label above the field — a placeholder disappears the moment typing starts
  • A hint is what people need before typing; an error message is what they need after
  • Write the fix, not the fault: "Use the 010-1234-5678 format", never "Invalid format"

Watch out for

  • Never signal an error with colour alone — pair it with text and an icon
  • Borders use --dc-line-field; anything lighter vanishes in dark mode

Next