AI向け説明 AI Description

`F-004` は入力フィールドに成功（緑）、エラー（赤、シェイクアニメーション付き）、警告（黄）の3つのバリデーション状態を表示するパターンです。CSSクラスの切り替えだけで状態を変更でき、アイコンとメッセージが連動します。

`F-004` renders input fields with three validation states: success (green), error (red, with shake animation), and warning (yellow). States are toggled by CSS class names, with icons and messages synced automatically.

調整可能パラメータ Adjustable Parameters

• --success-color — 成功時の色Success color
• --error-color — エラー時の色Error color
• --warning-color — 警告時の色Warning color

実装 Implementation

HTML + CSS + JS

<div class="validate-group"><!-- Add class: success | error | warning -->
  <label>Email</label>
  <div class="input-wrapper">
    <input type="email" class="validate-input" />
    <span class="validate-icon icon-success">✓</span>
    <span class="validate-icon icon-error">✕</span>
  </div>
  <div class="validate-message msg-error">Invalid email</div>
  <div class="validate-message msg-success">Valid email</div>
</div>

<style>
:root {
  --success-color: #22c55e;
  --error-color: #ef4444;
  --input-radius: 12px;
}
</style>

React (JSX + CSS)

// 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;
}