Skip to Content

Unified Field Builder Demo

This demonstrates the new unified field builder that takes field type as the first argument!

Method 1: Direct createField Function

Direct createField Function

Using createField with type as first argument

Communication Preference
0
Birth Date
mm
dd
yyyy

Method 2: Advanced Builder Pattern

Advanced Builder Pattern

Using createAdvancedBuilder with .field() method

Communication Preference
0
Birth Date
mm
dd
yyyy

Method 3: Mixed Approach

Unified Builder Pattern

Using createUnifiedBuilder with .field() method

Communication Preference
0
Birth Date
mm
dd
yyyy

Method 4: Mixed Approaches

Mixed Approaches

Combining different unified field methods

Communication Preference
0
Birth Date
mm
dd
yyyy

🎯 Unified Field Builder Benefits

  • ✅ Single API - One function for all field types
  • ✅ Type as first argument - Clear and intuitive
  • ✅ Type safety - Full TypeScript support with overloads
  • ✅ Consistent interface - Same pattern for all field types
  • ✅ Flexible usage - Direct function, helper object, or builder pattern
  • ✅ No "as const" - Clean, readable syntax
  • ✅ Easy to remember - One function to learn for all field types

📝 Usage Examples

Direct Function:

createField("input", "email" as any, "Email", { type: "email" })

Helper Object:

Field.field("input", "email", "Email", { type: "email" })

Builder Pattern:

createUnifiedBuilder().field("input", "email", "Email", { type: "email" }).build()