Field 入力欄 · `kf-field`

入力欄とフォーム。項目名を上に、入力欄、その下に補足か誤りの文。

クラスkf-btnkf-btn-primarykf-btn-quietkf-choicekf-choiceskf-fieldkf-fieldsetkf-formkf-form-actionskf-form-rowkf-helpkf-inputkf-input-groupkf-labelkf-numkf-selectkf-textarea

HTML

<form class="kf-form" onsubmit="return false">
  <div class="kf-form-row">
    <label class="kf-field"><span class="kf-label">名前<span class="req">*</span></span><input class="kf-input" value="入力の見本"><span class="kf-help">補足はここに書く</span></label>
    <label class="kf-field"><span class="kf-label">金額(税込)</span><span class="kf-input-group"><span class="add">¥</span><input class="kf-input kf-num" value="12,300" inputmode="numeric"><span class="add">円</span></span></label>
  </div>
  <div class="kf-form-row">
    <label class="kf-field is-error"><span class="kf-label">期日<span class="req">*</span></span><input class="kf-input" value="10/31"><span class="kf-help">2026-10-31 の形で</span></label>
    <label class="kf-field"><span class="kf-label">選択</span><select class="kf-select"><option>項目 A</option><option>項目 B</option><option>項目 C</option></select></label>
  </div>
  <div class="kf-form-row">
    <label class="kf-field"><span class="kf-label">読むだけ</span><input class="kf-input" value="ABC-123" readonly></label>
    <label class="kf-field"><span class="kf-label">変えられない</span><input class="kf-input" value="固定の値" disabled></label>
  </div>
  <label class="kf-field"><span class="kf-label">メモ</span><textarea class="kf-textarea" placeholder="例: 補足を書く"></textarea></label>
  <fieldset class="kf-fieldset"><legend>知らせ方</legend><div class="kf-choices"><label class="kf-choice"><input type="checkbox" checked> メール</label><label class="kf-choice"><input type="checkbox"> 画面の上</label></div></fieldset>
  <div class="kf-form-actions"><button class="kf-btn kf-btn-quiet" type="button">やめる</button><button class="kf-btn" type="button">下書きにする</button><button class="kf-btn kf-btn-primary" type="submit">保存する</button></div>
</form>

項目名は kf-label(small の 500、ink-muted)。必須は項目名の右に <span class="req">*</span>。任意に「(任意)」とは書かない。
入力欄は kf-input / kf-select / kf-textarea。高さ 36px、枠 line-strong、角 radius-sm。hover で枠が ink-muted に。
フォーカスは枠が focus 色になり、外に薄い輪(3px、24%)が出る。太い実線の輪はボタン用で、入力欄には使わない。誤りの欄は danger-ink の枠と輪。
金額・件数は kf-input kf-num(等幅数字、左寄せのまま。右寄せにするのは表の中だけ)。単位や記号は kf-input-group の add で入力欄にくっつける(¥ と 円)。inputmode="numeric" を付ける。
補足は kf-help(ink-faint)。誤りは is-error を付けて kf-help に理由を書く(「数字だけ」「2026-10-24 の形で」)。赤くするだけで済ませない。
読むだけの値は readonly(地が surface-sunken)、変えられないものは disabled(文字も薄く)。入力欄を消して文字だけにするより、欄の形を保つ。
kf-select は矢印を自前で描く(OS の見た目に依らない)。選択肢が 7 つを超えるなら検索つきの入力に。
placeholder は例を示すときだけ。項目名の代わりにしない。
フォームは kf-form(縦に space-4)。横に並べるのは kf-form-row で 2 つまで、狭い画面では縦に落ちる。関連する選択肢は kf-fieldset と legend でまとめる。
ボタンは最後に kf-form-actions。右端が主ボタン(動詞)、その左に副、取り消しは kf-btn-quiet で左端。保存は Enter でも効くように type="submit"。

Field 入力欄 · kf-field

Field 入力欄 · `kf-field`