Tutorial: Price Display
Form Preview

What You'll Build

Beautiful, dynamic price displays for calculators, e-commerce forms, and quote builders. Price displays are essential for showing computed totals, discounts, and formatted currency values that update in real-time.

What You'll Learn

  • Adding basic price displays with computed values
  • Using different visual variants (default, highlight, success, large)
  • Showing discounts with strikethrough original prices
  • Configuring currency symbols and positions
  • Adding prefix and suffix text for context
  • Controlling alignment for different layouts
  • Building a complete service quote calculator
⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our price display form step by step.

Step 2: Basic Price Display

Let's add a simple price display showing a static value. Price displays are read-only components that show formatted currency values.

💡 Tip:
Use addPriceDisplay() with a computedValue function that returns the price. The value is automatically formatted with currency symbol and decimals.

Step 3: Dynamic Price with Slider

Now let's make the price dynamic by connecting it to a slider. As the quantity changes, the total price updates automatically.

💡 Tip:
The computedValue function is called reactively whenever dependent values change. Access slider values with form.slider('id')?.value().

Step 4: Visual Variants

Price displays come in four visual variants to match different use cases. Each variant has its own styling to convey meaning.

💡 Tip:
default - Clean, subtle style for secondary prices
highlight - Primary color accent for important values
success - Green accent, perfect for discounts and savings
large - Hero-style for final totals and featured prices

Step 5: Showing Discounts

Show original prices with strikethrough when displaying discounts. This creates a compelling visual comparison that highlights savings.

💡 Tip:
Use originalPrice to show the pre-discount value with strikethrough. Return null when there's no discount to hide it. The savings badge appears automatically!

Step 6: Currency Options

Customize the currency symbol and its position. Support for international currencies and different formatting conventions.

💡 Tip:
currency sets the symbol (e.g., "$", "€", "£", "zł")
currencyPosition controls placement: "before" ($100) or "after" (100$)
decimals sets decimal places (0-3)

Step 7: Prefix & Suffix Text

Add contextual text before or after the price for additional meaning. Perfect for subscription pricing, per-unit costs, or totals.

💡 Tip:
prefix adds text before the price (e.g., "Starting at", "Only", "From")
suffix adds text after (e.g., "/month", "/person", "USD")

Step 8: Alignment Options

Control how prices are aligned within their container. Different alignments work better in different layouts.

💡 Tip:
Use alignment with "left", "center", or "right". Center alignment works great for hero prices, while right alignment is perfect for invoice totals.

Step 9: Complete Quote Calculator

Let's build a complete service quote calculator combining everything we've learned. Multiple inputs affect the final price with premium options.

💡 Tip:
This example combines sliders, checkboxes, and price displays with subforms. Notice how originalPrice shows the base price when premium options are selected!

Try It Yourself

  • Challenge 1: Create a price display in Euros (€) with the symbol after the amount
  • Challenge 2: Add a "Buy 2, Get 10% Off" discount that shows when quantity >= 2
  • Challenge 3: Create a subscription pricing card with prefix "Only" and suffix "/month"
  • Challenge 4: Build a cart total that shows savings when a promo code checkbox is checked

Next Steps

Excellent! You've mastered price displays and learned how to build interactive calculators with beautiful pricing UI. Ready to explore more?

Explore Slider Tutorial

Other learning paths: