フォーム入力
テキストフィールド
ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。
プレビュー
入力
操作実際に入力して試せます。
実装メモ
エラー状態は 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">
<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>