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

Textarea

For a value of unknown length — a request, a reason, a note written in sentences.

Inputs

Live preview

Source

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

How to use it

  • The visible row count sets the expectation: two rows say "brief", six say "go ahead"
  • If there is a limit, show the count from the start — a hard maxlength silently truncates what people paste
  • Leave vertical resize on; people writing long answers will stretch it themselves

Watch out for

  • Do not just turn the counter red — say how much to cut
  • resize: horizontal pushes neighbouring columns and breaks the layout

Next