Form with Validation
Input form with client-side or server-side validation, displaying error messages and success states
What is it?
A form with validation guides users through data entry while providing feedback on correctness. Validation can occur in real-time (as the user types) or on form submission. When validation fails, error messages appear near the affected field to explain what went wrong and how to fix it. Success states confirm that data was accepted.
Forms with validation improve user experience by preventing submission errors and reducing frustration. They're essential for sign-ups, logins, checkouts, settings updates, and any scenario requiring structured user input.
Mockdown
``` ┌──────────────────────────────────┐ │ Sign Up Form │ ├──────────────────────────────────┤ │ │ │ Email │ │ ┌──────────────────────────────┐ │ │ │ user@example.com │ │ │ └──────────────────────────────┘ │ │ ✓ Valid email format │ │ │ │ Password │ │ ┌──────────────────────────────┐ │ │ │ ••••••••••• │ │ │ └──────────────────────────────┘ │ │ ⚠ Must be at least 8 characters │ │ │ │ Confirm Password │ │ ┌──────────────────────────────┐ │ │ │ │ │ │ └──────────────────────────────┘ │ │ ✗ Passwords don't match │ │ │ │ [ Sign Up ] │ │ │ └──────────────────────────────────┘ ``` Form validation elements: - **Field labels**: Clear, associated with inputs for accessibility - **Input fields**: Text, email, password, number, select, etc. - **Validation feedback**: Icons (✓, ⚠, ✗) and messages near fields - **Error styling**: Borders, backgrounds, or text color to highlight problems - **Submit button state**: Disabled until all required fields are valid - **Success message**: Confirmation once form is submitted and processed - **Help text**: Hints for password requirements, field format, etc.
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ ← Settings 👤 User │
├───────────────────────────────────────────────┤
│ │
│ ┌─ Profile ─────────────────────────────┐ │
│ │ Avatar: [ 👤 ] [ Upload ] │ │
│ │ Name: [___________________] │ │
│ │ Email: [___________________] │ │
│ │ Bio: [___________________] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌─ Preferences ─────────────────────────┐ │
│ │ Theme: ○ Light ● Dark │ │
│ │ Language: [ English ▾ ] │ │
│ │ Timezone: [ UTC-5 ▾ ] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌─ Notifications ──────────────────────┐ │
│ │ Email alerts: [■] On │ │
│ │ Push: [□] Off │ │
│ └──────────────────────────────────────┘ │
│ [ Save Changes ] │
└───────────────────────────────────────────────┘Settings
Account Settings Panel
A tabbed account settings page with sections for profile, password, notifications, billing, and danger zone — clean and accessible for SaaS apps.
--settings--profile--account
Medium
┌───────────────────────────────────────────────┐
│ │
│ Welcome! Let's get started. │
│ │
│ Step: ●────●────●────○────○ │
│ 1 2 3 4 5 │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ │ │
│ │ What best describes your role? │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ 💻 Developer│ │ 🎨 Designer │ │ │
│ │ └─────────────┘ └─────────────┘ │ │
│ │ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ 📊 Manager │ │ 🏢 Founder │ │ │
│ │ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────┘ │
│ │
│ [ ← Back ] [ Next → ] │
│ │
└───────────────────────────────────────────────┘Onboarding
SaaS Multi-Step Onboarding Wizard
A guided 4-step onboarding flow for a SaaS product — covering profile setup, team invite, workspace configuration, and a success screen with next steps.
--onboarding--wizard--multi-step
Medium
┌───────────────────────────────────────────────┐
│ │
│ ◉ LayoutPrompts │
│ │
│ ┌──────────────────────────┐ │
│ │ │ │
│ │ Sign In │ │
│ │ │ │
│ │ Email │ │
│ │ [____________________] │ │
│ │ │ │
│ │ Password │ │
│ │ [____________________] │ │
│ │ │ │
│ │ [□] Remember me │ │
│ │ │ │
│ │ [■■■■ Sign In ■■■■■■] │ │
│ │ │ │
│ │ ── or continue with ── │ │
│ │ [ G ] [ 🍎 ] [ GH ] │ │
│ │ │ │
│ │ Don't have an account? │ │
│ │ Sign up → │ │
│ └──────────────────────────┘ │
│ │
└───────────────────────────────────────────────┘Auth
Sign In & Sign Up Auth Screens
A polished two-panel authentication layout with sign in and sign up forms, social OAuth buttons, and a branded illustration panel — suitable for any web app.
--login--sign-up--oauth
Simple
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.