テキストフィールド
ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- フォームの基本となるラベル＋補助文付き入力欄
- 通常とエラーの見た目を揃えたいデザインシステム
- フォーカスリングとエラー回復を見せたい見本
- 避ける場面
- ラベルを省きたい省スペース欄（フローティングラベル）
- 複数行の入力（テキストエリア）
- 構成要素
- ラベル
- 入力欄
- 補助テキスト
- エラーアイコン
- エラーメッセージ
- 持っている状態
- 通常
- フォーカス
- エラー
- 成功
- キーボード
Tab で欄を移動。エラー欄は正しい形式を打つとその場で回復する
- 支援技術
label[for] と aria-describedby で補助文・エラー文を結ぶ。aria-invalid を切替、エラー文は aria-live=polite で回復も読み上げる。エラーはアイコン＋色＋文言。reduced-motion で transition 無効
- 動き
枠色・リング 180ms（フォーカス／エラーの切替）。reduced-motion で無効
デザインの要点
- フォーカスは枠色＋3px の半透明リング。枠色だけだと、色の見分けが難しい人には移動が分からない
- 補助文はエラーが出ても同じ場所に出す。位置が変わると、直したあとに何を読めばよいか探させる
- エラーはアイコン・色・文言の3つで示す。赤い枠だけでは何が間違いか分からない
- 正しい形式を打った瞬間に回復させる。送信まで赤いままだと「直したのに」と不安が残る
実装メモ
エラー状態は border-color と aria-invalid="true"、補助テキストの色で表現しています。実装ではフォーカスリングを box-shadow で描き、色だけに依存しないようアイコンとメッセージも添えています。
コード（コピーして使えます）
<form class="tf-form" novalidate>
<div class="tf-field">
<label class="tf-label" for="tf-normal">お名前</label>
<input
id="tf-normal"
class="tf-input"
type="text"
placeholder="山田 太郎"
autocomplete="name"
aria-describedby="tf-help"
/>
<p class="tf-help" id="tf-help">姓と名の間にスペースを入れてください</p>
</div>
<div class="tf-field">
<label class="tf-label" for="tf-error">メールアドレス</label>
<input
id="tf-error"
class="tf-input is-error"
type="text"
value="taro.example.com"
aria-invalid="true"
aria-describedby="tf-err"
/>
<p class="tf-help is-error" id="tf-err" aria-live="polite">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true">
<circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.3"/>
<line x1="6.5" y1="3.5" x2="6.5" y2="7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<circle cx="6.5" cy="9.3" r="0.8" fill="currentColor"/>
</svg>
「@」を含む形式で入力してください
</p>
</div>
</form>