Components / Form & Input / Textarea

Textarea beta

Multi-line input on the same mold as Input: same border, same ring, same heights logic.

Preview

Release notes Markdown is fine. 62 / 280

<div style="display:grid;gap:6px;max-width:420px">
  <label for="ta-bio" style="font-size:12.5px;font-weight:550">Release notes</label>
  <textarea class="k-textarea" id="ta-bio" rows="3" placeholder="What changed in this version?">Fixed the export dialog. Copy buttons now confirm with a check.</textarea>
  <span style="font-size:12px;color:var(--k-ink-3)">Markdown is fine. 62 / 280</span>
</div>

/* KATA Textarea */
.k-textarea{width:100%;min-height:92px;padding:10px 12px;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);font-size:13.5px;line-height:1.7;resize:vertical;transition:border-color .15s,box-shadow .15s}
.k-textarea::placeholder{color:var(--k-ink-3)}
.k-textarea:hover{border-color:var(--k-border-strong)}
.k-textarea:focus{outline:none;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.k-textarea:disabled{opacity:.55;resize:none}
.k-textarea[data-invalid="true"]{border-color:var(--k-danger)}
.k-textarea[data-invalid="true"]:focus{box-shadow:var(--k-ring-danger)}

Usage

For text longer than a line. Set rows for the expected length; keep the hint short and put character counts outside the field.

Accessibility

Pair with a <label>. Use aria-describedby for hints and errors, aria-invalid for the error state.

Tag Input

Accordion