Tips: Dynamic Labels & Reactive Values
Form Preview

What Are Reactive Values?

Most form properties accept either a static value or a function that returns a value. When you pass a function, FormTs automatically re-evaluates it whenever dependencies change.

⚡

The Power of Functions

Instead of label: 'Your Email', you can write label: () => ... and the label will automatically update whenever referenced fields change. No manual refresh needed!

Practical Examples

Static vs Dynamic Labels

The simplest example: a label that changes based on another field's value.

💡 Tip:
Type your name in the first field and watch the second label change from "Your Email" to "[Name]'s Email".

Selection Counter in Label

Show users how many items they've selected - great for checkbox lists with limits.

💡 Tip:
The label shows "Skills (3 selected)" and updates in real-time. Combined with min/max constraints, this gives users clear feedback.

Context-Aware Placeholders

Change the placeholder and label based on user's choice - perfect for contact forms.

💡 Tip:
Select different contact methods and watch both the label and placeholder adapt. The field is also read-only until a method is selected.

Dynamic Form Title

Use form.setTitle() with a function to create personalized form headers.

💡 Tip:
The form title at the top changes as you fill in your name and select a plan. Great for making forms feel personalized!

Smart Tooltips & Tiered Pricing

Tooltips that change based on quantity - show discount tiers and encourage bulk orders.

💡 Tip:
Hover over the quantity field at different values. The tooltip guides users toward discount thresholds. Notice the price display also changes style and shows strikethrough when discounts apply!

Cascading Dropdowns

The classic country → city pattern: second dropdown options depend on the first selection.

💡 Tip:
The options property accepts a function! Return different arrays based on parent selection. The city dropdown is disabled until a country is selected.

Complete Example: Smart Order Form

A real-world order form combining all techniques: dynamic title, labels, tooltips, prices, and discount logic.

💡 Tip:
This example shows the full power of reactive values. Try: selecting products, changing quantities (10+ for bulk discount), and switching billing cycles. Watch how everything updates together!

Key Patterns

📊 Counter Pattern

label: () => `Items (${count} selected)`

Show selection count in checkbox lists, file uploads, etc.

🔗 Cascading Pattern

options: () => getOptionsFor(parentValue)

Country → City, Category → Subcategory, etc.

💡 Context Pattern

placeholder: () => getPlaceholderFor(type)

Adapt hints based on user's previous choices.

🎯 Threshold Pattern

tooltip: () => qty >= 10 ? 'Discount!' : 'Order more'

Guide users toward discount tiers or limits.

Best Practices

  • Keep functions pure - Only read values, don't modify state inside label functions
  • Handle null/undefined - Fields may not have values yet, always use ?. and ?? default
  • Be concise - Labels should be short. Move complex logic to form.computedValue() if needed
  • Provide feedback - Use counters, progress indicators, and contextual hints
  • Consider UX - Don't change labels too drastically - users should still recognize the field

Next Steps

Now that you've mastered reactive values, explore these related tutorials: