F-004 Form simple

How to create a input validation states バリデーションステートの作り方

Visual feedback patterns for input success and error states. 入力内容の成功・エラー状態を視覚的にフィードバックするパターン。

ライブデモ Live Demo

メールアドレス Email Address

✓ ✕ ⚠

有効なメールアドレスです Valid email address

無効なメールアドレスです Invalid email address

このメールは既に使用されている可能性があります This email may already be in use

成功色 (Success) Success Color

エラー色 (Error) Error Color

警告色 (Warning) Warning Color

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Visual feedback patterns for input success and error states.

入力内容の成功・エラー状態を視覚的にフィードバックするパターン。

どこで使うかWhere to use

contact form, signup flow, checkout form, search interface

フォームバリデーション、登録フォーム、支払いフォーム、データ入力フィールド

特徴Key features

Visual input validation states (neutral, valid, error, warning) with icon indicators and helper text. CSS class-based state management. Compatible with HTML5 constraint validation API. Animated state transitions.

アイコンインジケーターとヘルパーテキスト付きの視覚的な入力検証状態（ニュートラル・有効・エラー・警告）。CSSクラスベースの状態管理。HTML5制約検証APIと互換性。アニメーションされた状態トランジション。

調整可能パラメータ Adjustable Parameters

Parameter	Default	Description
`--success-color`	—	Success color
`--error-color`	—	Error color
`--warning-color`	—	Warning color

実装コード Implementation Code

// react/F-004.jsx
import './F-004.css';

export default function ValidatedInput({ label, state = 'default', message, ...props }) {
  return (
    <div className={`validate-group ${state !== 'default' ? state : ''}`}>
      <label>{label}</label>
      <div className="input-wrapper">
        <input className="validate-input" {...props} />
        <span className="validate-icon icon-success">✓</span>
        <span className="validate-icon icon-error">✕</span>
        <span className="validate-icon icon-warning">⚠</span>
      </div>
      {message && <div className={`validate-message msg-${state}`}>{message}</div>}
    </div>
  );
}

/* react/F-004.css */
/* F-004: Input Validation States */
.validate-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

.validate-input {
  width: 100%;
  padding: 14px 40px 14px 16px;
  font-size: 16px;
  border: 2px solid #e0e4f0;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: inherit;
}

.validate-input:focus {
  border-color: #5c6ac4;
  box-shadow: 0 0 0 3px rgba(92, 106, 196, 0.15);
}

.validate-group.success .validate-input {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.validate-group.error .validate-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.validate-group.warning .validate-input {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.input-wrapper {
  position: relative;
}

.validate-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.validate-group.success .icon-success,
.validate-group.error .icon-error,
.validate-group.warning .icon-warning {
  opacity: 1;
}

.validate-message {
  font-size: 13px;
  margin-top: 6px;
  display: none;
}

.validate-group.success .msg-success {
  display: block;
  color: #22c55e;
}

.validate-group.error .msg-error {
  display: block;
  color: #ef4444;
}

.validate-group.warning .msg-warning {
  display: block;
  color: #f59e0b;
}

import './F-004.css';

export default function ValidatedInput({ label, state = 'default', message, ...props }) {
  return (
    <div className={`validate-group ${state !== 'default' ? state : ''}`}>
      <label>{label}</label>
      <div className="input-wrapper">
        <input className="validate-input" {...props} />
        <span className="validate-icon icon-success">✓</span>
        <span className="validate-icon icon-error">✕</span>
        <span className="validate-icon icon-warning">⚠</span>
      </div>
      {message && <div className={`validate-message msg-${state}`}>{message}</div>}
    </div>
  );
}

/* F-004: Input Validation States */
.validate-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

.validate-input {
  width: 100%;
  padding: 14px 40px 14px 16px;
  font-size: 16px;
  border: 2px solid #e0e4f0;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: inherit;
}

.validate-input:focus {
  border-color: #5c6ac4;
  box-shadow: 0 0 0 3px rgba(92, 106, 196, 0.15);
}

.validate-group.success .validate-input {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.validate-group.error .validate-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.validate-group.warning .validate-input {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.input-wrapper {
  position: relative;
}

.validate-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.validate-group.success .icon-success,
.validate-group.error .icon-error,
.validate-group.warning .icon-warning {
  opacity: 1;
}

.validate-message {
  font-size: 13px;
  margin-top: 6px;
  display: none;
}

.validate-group.success .msg-success {
  display: block;
  color: #22c55e;
}

.validate-group.error .msg-error {
  display: block;
  color: #ef4444;
}

.validate-group.warning .msg-warning {
  display: block;
  color: #f59e0b;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Each input field is wrapped in a container. JavaScript (or HTML5 constraint validation) adds state classes (is-valid, is-error, is-warning) to the wrapper. CSS selectors style the border color, icon color, and show/hide the helper text based on these classes. A transition on border-color and box-shadow animates the state change.

各入力フィールドはコンテナでラップされます。JavaScript（またはHTML5制約検証）がラッパーに状態クラス（is-valid、is-error、is-warning）を追加。CSS セレクターがこれらのクラスに基づいてボーダーカラー・アイコンカラーをスタイリングしてヘルパーテキストを表示/非表示。border-colorとbox-shadowのトランジションが状態変化をアニメーション。

カスタマイズ方法Customization

Validate on input, blur, or submit depending on the UX strategy. Add a password strength meter as a separate variant. Show validation messages inline (below the field) rather than in a summary at the top of the form for easier user correction.

UX戦略に応じてinput・blur・submit時に検証。別のバリアントとしてパスワード強度メーターを追加。ユーザーの修正を容易にするためにフォーム上部のサマリーではなく（フィールド下の）インラインで検証メッセージを表示。

注意点Caveats

Error messages must be associated with their input via aria-describedby so screen readers announce them when the field is focused. Use aria-invalid="true" on invalid fields. Do not rely on color alone to communicate validation state — always include an icon or text.

エラーメッセージはフィールドがフォーカスされたときにスクリーンリーダーがアナウンスするようaria-describedbyで入力に関連付けられる必要があります。無効なフィールドにaria-invalid="true"を使用してください。検証状態の伝達にカラーだけに頼らないでください — 常にアイコンまたはテキストを含めてください。

よくある質問 Frequently Asked Questions

How to customize the input validation states? Input Validation Statesをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the input validation states in React? ReactでInput Validation Statesを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of input validation states? Input Validation Statesのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.

以下のUIパターンを実装してください。

- パターンID: F-004
- パターン名: バリデーションステート
- 参照URL: https://devsnips.dev/snippets/input-validation-states/
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: F-004
- Pattern Name: Input Validation States
- Reference URL: https://devsnips.dev/snippets/input-validation-states/
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]