Dynamic Text System

Template Strings & Dynamic Text

Create personalized form experiences with dynamic text that updates in real-time based on user input using simple template syntax.

Real-time Updates

Simple Syntax

Performance Optimized

Template String Syntax

Use double curly brace syntax to reference form values in any text field.

Basic Usage

const personalizedForm = useFormedible({
  fields: [
    // Collect user information
    { name: "firstName", type: "text", label: "First Name", page: 1 },
    { name: "lastName", type: "text", label: "Last Name", page: 1 },
    { name: "company", type: "text", label: "Company Name", page: 1 },
    
    // Use dynamic text for personalization
    { 
      name: "email", 
      type: "email", 
      label: "Email Address",
      description: "We'll send updates to this address, {{firstName}}",
      placeholder: "{{firstName}}.{{lastName}}@{{company}}.com",
      page: 2 
    },
  ],
  
  // Dynamic page titles and descriptions
  pages: [
    { page: 1, title: "Personal Information", description: "Tell us about yourself" },
    { page: 2, title: "Contact Details", description: "How can we reach you {{firstName}}?" }
  ]
});

✨ What happens:

• When user types "John" in firstName, all firstName references update to "John"
• Description becomes: "We'll send updates to this address, John"
• Page 2 description becomes: "How can we reach you John?"
• Updates happen instantly as the user types

Where Dynamic Text Works

Dynamic text can be used in all user-facing text throughout your forms.

Field Properties

Labels

label: "Welcome {{firstName}}"

Descriptions

description: "We'll contact {{firstName}} at {{email}}"

Placeholders

placeholder: "{{company}} department"

Layout Elements

Page Titles

title: "Settings for {{firstName}}"

Section Titles

section: { title: "{{company}} Details" }

Object Field Titles

objectConfig: { title: "{{firstName}}'s Address" }

// All of these support dynamic text:
const comprehensiveForm = useFormedible({
  fields: [
    { name: "name", type: "text", label: "Full Name" },
    { 
      name: "preferences", 
      type: "checkbox", 
      label: "Marketing Preferences",
      description: "Customize your experience, {{name}}",
      section: {
        title: "Preferences for {{name}}",
        description: "These settings will be applied to {{name}}'s account"
      }
    },
    {
      name: "address",
      type: "object",
      objectConfig: {
        title: "{{name}}'s Address",
        description: "Where should we send {{name}}'s orders?",
        collapseLabel: "Hide {{name}}'s address",
        expandLabel: "Show {{name}}'s address"
      }
    }
  ],
  pages: [
    { 
      page: 1, 
      title: "Welcome {{name}}", 
      description: "Let's get {{name}} set up" 
    }
  ]
});

Function-Based Dynamic Text

For complex logic, use functions instead of template strings.

const advancedDynamicForm = useFormedible({
  fields: [
    { name: "userType", type: "select", options: ["individual", "business"] },
    { name: "firstName", type: "text", label: "First Name" },
    { name: "lastName", type: "text", label: "Last Name" },
    { name: "companyName", type: "text", label: "Company Name" },
    {
      name: "contactMethod",
      type: "select",
      
      // Function-based label with conditional logic
      label: (values) => {
        if (values.userType === "business") {
          const company = values.companyName || "your company";
          return `How should we contact ${company}?`;
        } else {
          const name = values.firstName || "you";
          return `How should we contact ${name}?`;
        }
      },
      
      // Function-based description
      description: (values) => {
        const entity = values.userType === "business" 
          ? (values.companyName || "your company")
          : (values.firstName || "you");
        
        return `Choose the best way to reach ${entity}.`;
      },
      
      options: ["email", "phone", "mail"]
    }
  ]
});

🎯 When to use functions:

• Complex conditional logic based on multiple fields
• String formatting or transformations
• Pluralization or language variations
• When template strings aren't flexible enough

Performance & Best Practices

Understanding how dynamic text works under the hood and optimization tips.

✅ Optimized Performance

• Uses TanStack Form subscriptions
• Only updates when referenced fields change
• Minimal re-renders with targeted subscriptions
• Efficient template parsing and caching

🛡️ Fallback Behavior

• Shows literal text when values are empty
• Gracefully handles missing field references
• Never breaks form functionality
• Works with conditional fields

Best Practices

✅ Do:

• Keep template references simple: double curly braces with field name
• Use meaningful fallback text
• Test with empty and populated forms
• Consider mobile screen space with dynamic text

❌ Avoid:

• Referencing fields that might not exist
• Very long dynamic text that breaks layouts
• Complex nested object references
• Sensitive information in template strings

Real-World Examples

Common use cases and patterns for dynamic text in forms.

Multi-Step Registration

const registrationForm = useFormedible({
  fields: [
    // Step 1: Basic Info
    { name: "firstName", type: "text", label: "First Name", page: 1 },
    { name: "email", type: "email", label: "Email Address", page: 1 },
    
    // Step 2: Personalized Experience
    { 
      name: "preferences", 
      type: "multiSelect", 
      label: "Preferences",
      description: "What would {{firstName}} like to receive?",
      page: 2 
    },
    { 
      name: "notifications", 
      type: "switch", 
      label: "Email Notifications",
      description: "Send updates to {{email}}?",
      page: 2 
    }
  ],
  
  pages: [
    { page: 1, title: "Join Us", description: "Create your account" },
    { 
      page: 2, 
      title: "Welcome {{firstName}}!", 
      description: "Let's personalize your experience" 
    }
  ]
});

E-commerce Checkout

const checkoutForm = useFormedible({
  fields: [
    { name: "customerName", type: "text", label: "Full Name" },
    { name: "shippingAddress", type: "textarea", label: "Shipping Address" },
    { 
      name: "billingAddress", 
      type: "textarea", 
      label: "Billing Address",
      description: "Where should we send {{customerName}}'s invoice?"
    },
    {
      name: "deliveryInstructions",
      type: "textarea",
      label: "Delivery Instructions",
      placeholder: "Special instructions for delivering to {{customerName}}...",
      section: {
        title: "Delivery Details for {{customerName}}",
        description: "Help us deliver {{customerName}}'s order successfully"
      }
    }
  ]
});

Customer Support Form

const supportForm = useFormedible({
  fields: [
    { name: "customerName", type: "text", label: "Your Name" },
    { name: "issueType", type: "select", 
      options: ["Technical", "Billing", "General"] },
    {
      name: "description",
      type: "textarea",
      label: (values) => {
        const type = values.issueType || "issue";
        return `Describe your ${type.toLowerCase()} concern`;
      },
      description: (values) => {
        const name = values.customerName || "you";
        const type = values.issueType || "issue";
        return `Help us understand ${name}'s ${type.toLowerCase()} so we can assist better.`;
      }
    }
  ]
});