Textarea

複数行の入力欄betaEnglish →

Input と同じ型でできた、複数行の入力欄です。枠線、選んだときの枠、高さの決め方が同じです。

見本

Release notes Markdown is fine. 62 / 280

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

/* KATA Textarea */
/* border-box: width 100% and min-height include padding and border, so the field fits its container. */
.k-textarea{box-sizing:border-box;width:100%;min-height:92px;padding:var(--k-space-2) var(--k-space-3);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:var(--k-text-base);line-height:var(--k-lh-body);resize:vertical;transition:border-color var(--k-dur-fast),box-shadow var(--k-dur-fast)}
.k-textarea::placeholder{color:var(--k-ink-3)}
.k-textarea:hover:not(:disabled){border-color:var(--k-border-strong)}
.k-textarea:focus-visible{outline:none;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.k-textarea:disabled{opacity:.55;resize:none;cursor:not-allowed}
.k-textarea[readonly]:not(:disabled){background:var(--k-bg-soft)}
/* aria-invalid is the accessible error state; data-invalid="true" stays as the original hook. */
.k-textarea[data-invalid="true"],.k-textarea[aria-invalid="true"]{border-color:var(--k-danger)}
.k-textarea[data-invalid="true"]:focus-visible,.k-textarea[aria-invalid="true"]:focus-visible{border-color:var(--k-danger);box-shadow:var(--k-ring)}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.k-textarea{font-size:var(--k-text-lg)}}

導入

npx @kajisho5/kataui add textarea

手動で入れる場合：

tokens.css をページで一度だけ読み込む
CSS タブの中身を、自分のスタイルシートに貼る
HTML タブの中身を、使いたい場所に貼る。

使いどころ

1行に収まらない文に使います。想定する長さに合わせて rows を決めます。補足の文は短くし、文字数の表示は欄の外に置きます。

アクセシビリティ

見本では textarea を <label> で包んでいます（固定の id がないので、同じページに2回貼っても重なりません）。補足やエラーの文は、ページ内で重ならない id を付けて aria-describedby でつなぐか、Field の中に置いてください（Field のスクリプトがつなぎます）。aria-invalid="true"（と、もとからある data-invalid="true"）で、危険を示す色の枠線になります。キーボードで選ぶと、:focus-visible で --k-ring の枠が出ます。押せない（disabled）欄は薄く表示され、カーソルが禁止の形になり、Tab で飛ばされます。読み取り専用（readonly）の欄は背景が淡くなり、Tab で選べます。文字（入力した文字・読み取り専用・見本の文字）は、ライト・ダークとも 5.74:1 以上です。欄は border-box なので、幅 100% で外枠にちょうど収まり、最小の高さ 92px がそのまま表示の高さになります。幅 640px 未満では文字を 16px 以上にして、iOS の Safari が勝手に拡大しないようにしています。JavaScript は使いません。スクリーンリーダーと本物の日本語入力（変換）を手で確かめるまで Beta のままです。確認したのは Chromium だけです。

キー	動き
`Tab`	次の欄へ移動
`Enter`	改行する
`文字キー`	入力する

英語版にだけある情報

静的チェックの結果・部品の構造（Anatomy）・読むトークン・使い方の例・関連する部品

英語版の Textarea ページで見る →

この訳は、英語版の 2026-11-07 の内容をもとにしています。英語版の文が変わると、テストで知らせます。