← ギャラリーへ戻る
INP-01Elements
テキストフィールド
お問い合わせフォームの基本入力欄。通常状態とエラー状態のセット。ラベル・ヘルパーテキスト・エラーメッセージを含む。
- 追加日:
- 2026-07-23
- 依存:
- なし
- tags
- #form #input #accessibility
プレビュー
お返事はこのアドレスに送られます。
法人格(合同会社など)まで入力してください。
return function TextField() {
return (
<div className="grid w-full max-w-md gap-5">
<div>
<label htmlFor="tf-email" className="mb-1.5 block text-sm font-medium text-gray-800">
メールアドレス
</label>
<input
id="tf-email"
type="email"
placeholder="you@example.com"
className="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 shadow-sm outline-none transition placeholder:text-gray-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-200"
/>
<p className="mt-1.5 text-xs text-gray-500">お返事はこのアドレスに送られます。</p>
</div>
<div>
<label htmlFor="tf-name" className="mb-1.5 block text-sm font-medium text-gray-800">
会社名
</label>
<input
id="tf-name"
type="text"
defaultValue="First CH"
aria-invalid="true"
aria-describedby="tf-name-error"
className="block w-full rounded-lg border border-red-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 shadow-sm outline-none transition focus:border-red-400 focus:ring-2 focus:ring-red-100"
/>
<p id="tf-name-error" className="mt-1.5 text-xs text-red-600">
法人格(合同会社など)まで入力してください。
</p>
</div>
</div>
);
}
shadcn CLI でプロジェクトに追加
npx shadcn@latest add https://designs.first-ch.com/r/text-field.json