SmartFormField

smartformfield-1779388706076.tsx

'use client';
import { useState, useEffect } from 'react';

export default function SmartFormField() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPass, setShowPass] = useState(false);
  const [aiHint, setAiHint] = useState('');
  const [emailState, setEmailState] = useState('idle');

  useEffect(() => {
    const t = setTimeout(() => {
      if (!email) { setEmailState('idle'); setAiHint(''); return; }
      if (!email.includes('@')) { setEmailState('error'); setAiHint('Missing @ symbol'); return; }
      if (email.includes('+')) { setEmailState('warn'); setAiHint('Plus-sign aliases may be blocked'); return; }
      setEmailState('success'); setAiHint('Looks good!');
    }, 500);
    return () => clearTimeout(t);
  }, [email]);

  const strength = !password ? 0 : password.length < 6 ? 1 : password.length < 10 ? 2 : /[A-Z]/.test(password) && /[0-9]/.test(password) ? 4 : 3;
  const strengthColors = ['', '#ef4444', '#f59e0b', '#C9A84C', '#4ade80'];
  const strengthLabels = ['', 'Weak', 'Fair', 'Good', 'Strong'];

  const inputStyle = (state) => ({
    width: '100%', boxSizing: 'border-box',
    background: 'rgba(255,255,255,0.04)',
    border: `1px solid ${state === 'error' ? 'rgba(239,68,68,0.4)' : state === 'success' ? 'rgba(74,222,128,0.3)' : state === 'warn' ? 'rgba(245,158,11,0.4)' : 'rgba(255,255,255,0.1)'}`,
    borderRadius: '10px', padding: '12px 16px',
    color: '#F5F5F0', fontSize: '14px', outline: 'none',
    fontFamily: 'system-ui, sans-serif',
    transition: 'border-color 0.3s',
  });

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '360px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div>
        <label style={{ color: 'rgba(245,245,240,0.7)', fontSize: '13px', fontWeight: 600, display: 'block', marginBottom: '8px' }}>
          Email <span style={{ color: '#6366f1', fontSize: '11px', fontWeight: 400, background: 'rgba(99,102,241,0.1)', borderRadius: '4px', padding: '1px 6px', marginLeft: '6px' }}>AI-validated</span>
        </label>
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} style={inputStyle(emailState)} placeholder="you@company.com" />
        {aiHint && (
          <p style={{ margin: '6px 0 0 0', fontSize: '12px', color: emailState === 'error' ? '#ef4444' : emailState === 'warn' ? '#f59e0b' : '#4ade80' }}>
            {emailState === 'error' ? '✕' : emailState === 'warn' ? '⚠' : '✓'} {aiHint}
          </p>
        )}
      </div>
      <div>
        <label style={{ color: 'rgba(245,245,240,0.7)', fontSize: '13px', fontWeight: 600, display: 'block', marginBottom: '8px' }}>Password</label>
        <div style={{ position: 'relative' }}>
          <input type={showPass ? 'text' : 'password'} value={password} onChange={e => setPassword(e.target.value)} style={{ ...inputStyle('idle'), paddingRight: '44px' }} placeholder="min. 8 characters" />
          <button onClick={() => setShowPass(s => !s)} style={{
            position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)',
            background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(245,245,240,0.4)', fontSize: '16px',
          }}>{showPass ? '🙈' : '👁️'}</button>
        </div>
        {password && (
          <div style={{ marginTop: '8px' }}>
            <div style={{ display: 'flex', gap: '4px', marginBottom: '4px' }}>
              {[1, 2, 3, 4].map(i => (
                <div key={i} style={{ flex: 1, height: '3px', borderRadius: '2px', background: i <= strength ? strengthColors[strength] : 'rgba(255,255,255,0.08)', transition: 'background 0.3s' }} />
              ))}
            </div>
            <p style={{ margin: 0, fontSize: '12px', color: strengthColors[strength] }}>{strengthLabels[strength]} password</p>
          </div>
        )}
      </div>
      <button style={{
        background: 'linear-gradient(135deg, #C9A84C, #e8c96d)',
        border: 'none', borderRadius: '10px', padding: '13px',
        color: '#0A0A0A', fontWeight: 700, fontSize: '14px', cursor: 'pointer',
      }}>Create Account</button>
    </div>
  );
}

Component info

CategoryForms

Frameworkreact

TierFREE

Copies0

About

Form field with inline AI validation and hints

More from Forms

'use client'
import { useState } from 'react'

const STEPS = [
  { title: 'Account', fields: ['name', 'email'] },
  { title: 'Profile', fields: ['role', 'company'] },
  { title: 'Confirm', fields: [] },
]

export default function MultiStepForm() {

MultiStepForm

Forms

'use client'
import { useState } from 'react'

interface FloatingLabelInputProps {
  label?: string
  type?: string
  maxLength?: number
  required?: boolean
  pattern?: string
  helperText?: string
}

export default function FloatingLabelInput({ lab

FloatingLabelInput

Forms