Input

ラベル、補足の文、エラーの状態、検索用の形が入った1行の入力欄です。キーボードで選ぶと、欄の周りに枠が出ます。

見本

EmailUsed for invoice delivery

Full namePlease enter your full name

<div class="field"><label>Email<input class="input" placeholder="[email protected]"></label><span class="hint">Used for invoice delivery</span></div>
<div class="field"><label>Full name<input aria-invalid="true" class="input errb" value="tanaka"></label><span class="err">Please enter your full name</span></div>
<div class="field"><label>Search<span class="searchwrap"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="color:var(--k-ink-3)" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg><input class="input" placeholder="Search components…"></span></label></div>

.field{display:flex;flex-direction:column;gap:var(--k-space-1);min-width:230px;flex:1;max-width:300px;font-family:var(--k-font)}
.field label{font-size:var(--k-text-sm);font-weight:500;color:var(--k-ink)}
.field .hint{font-size:var(--k-text-sm);color:var(--k-ink-3)}
.field .err{font-size:var(--k-text-sm);color:var(--k-danger-ink)}
/* A label that wraps its input needs no id/for, so a pasted sample can appear twice. */
.field label:has(> .input,> .searchwrap){display:grid;gap:var(--k-space-1)}
.input{-webkit-appearance:none;appearance:none;height:38px;border:1px solid var(--k-line);border-radius:var(--k-radius);padding:0 var(--k-space-3);font-family:var(--k-font);font-size:var(--k-text-base);background:var(--k-bg);color:var(--k-ink);box-shadow:var(--k-shadow-xs);width:100%;box-sizing:border-box}
.input::placeholder{color:var(--k-ink-3)}
.input:focus-visible{outline:0;border-color:var(--k-ink);box-shadow:var(--k-ring)}
/* aria-invalid is the accessible error state; .errb stays as the visual class. */
.input.errb,.input[aria-invalid="true"]{border-color:var(--k-danger)}
.input.errb:focus-visible,.input[aria-invalid="true"]:focus-visible{border-color:var(--k-danger);box-shadow:var(--k-ring)}
.input:disabled{background:var(--k-bg-soft);color:var(--k-ink-3);box-shadow:none;cursor:not-allowed}
.input[readonly]:not(:disabled){background:var(--k-bg-soft)}
.searchwrap{position:relative;display:block}
.searchwrap svg{position:absolute;inset-inline-start:var(--k-space-3);top:50%;transform:translateY(-50%);pointer-events:none}
.searchwrap .input{padding-inline-start:var(--k-space-8)}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.input{font-size:var(--k-text-lg)}}

導入

npx @kajisho5/kataui add input

手動で入れる場合：

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

使いどころ

必ず目に見えるラベルと組み合わせます。補足の文は欄の下に置き、入力内容に誤りがあったときは、その文をエラーの文に置き換えます。

アクセシビリティ

入力欄は、外側を包む <label> で名前が付きます。そのため見本には id と for がなく、同じページに2回貼っても重なりません。見えるラベルは欄の上に置きます。エラーのときは aria-invalid="true" を付け（見た目は .errb と同じ）、色だけでなく文字でも伝えます。補足の文とエラーの文は、スクリーンリーダー向けには入力欄とつながっていません。ページの中で重ならない id を付けて、aria-describedby でつないでください。キーボードで選ぶと --k-ring の枠が出ます（ライト・ダークとも 3:1 を測って確認済み）。押せない（disabled）欄はブラウザ標準の属性を使い、背景を淡く、文字を薄くして、Tab でも飛ばされます。読み取り専用（readonly）の欄は Tab で選べます。入力できる状態の文字は、両方のテーマで 4.83:1 以上です（docs/review/input）。検索の印は aria-hidden で読み上げから外し、行の始まり側に置くので、右から左の表示（RTL）では右に移ります。幅 640px 未満では文字を 16px 以上にして、iOS の Safari が勝手に拡大しないようにしています。JavaScript は使いません。スクリーンリーダー（VoiceOver か NVDA）と、本物の日本語入力（かな漢字変換）での確認を記録するまで Beta のままです。確認したのは Chromium だけです。

キー	動き
`Tab`	次の欄へ移動
`Shift + Tab`	前の欄へ戻る
`文字キー`	入力する

英語版にだけある情報

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

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

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