← Back to patterns

Advanced Form Pattern

Comprehensive demo of SvelteKit form features: nested objects, arrays, file uploads, validation, and programmatic control

Profile Form

Personal Information

Note: Password field uses underscore prefix (_password) so it won't repopulate after submission

Address

Skills *

Preferences

Max 500 characters

Features Demonstrated

  • ✓ Nested objects: Address with street, city, ZIP
  • ✓ Array fields: Dynamic skills with add/remove
  • ✓ File uploads: Avatar with preview
  • ✓ Field binding: Using .as() for all input types
  • ✓ Validation: Real-time with .validate() and .issues()
  • ✓ Programmatic control: Using .set() and .value()
  • ✓ Sensitive fields: _password won't repopulate
  • ✓ Complex validation: Email, regex, min/max, custom rules

Key Patterns Used

// Nested field binding
{...form.fields.address.city.as('text')}

// Array field binding
{...form.fields.skills[0].as('text')}

// Validation
form.validate()
form.fields.name.issues()
form.fields.allIssues()

// Value management
form.fields.set({ name: 'John' })
form.fields.name.value()

// Enhanced submission
{...form.enhance(async ({ submit }) => {
  const result = await submit()
  // Handle result
})}