Display Values

Display the value of a Form Element

Overview

The Display Values attribute allows you to dynamically display form input values in other elements on your page. When users interact with form fields, the values are automatically synced and displayed in designated target elements in real-time.

Attribute Syntax

Elements

fs-displayvalues-element · string · required

Defines the role of the element:

• source - The form field whose value will be displayed elsewhere
• target - The element where the form field value will be displayed

Settings

fs-displayvalues-placeholder · string

Defines placeholder text to display in the target element when the source field has no value.

Usage Examples

Basic Text Display

<!-- Display input value in real-time -->
<input 
  type="text" 
  fs-displayvalues-element="source" 
  placeholder="Enter your name">

<p>Hello, <span fs-displayvalues-element="target">Guest</span>!</p>

Common Use Cases

Form Previews

Create live previews of form submissions, allowing users to see how their input will appear before submitting.

Personalized Greetings

Display personalized messages that update as users type their name or other information.

Character Counters

While primarily for displaying values, combine with other attributes to show form field content elsewhere on the page.

Multi-Step Forms

Show previously entered information in later steps of a multi-step form for confirmation.

Dynamic Labels

Update labels or headings based on user input to create a more interactive experience.

How It Works

The attribute establishes a connection between source and target elements:

1. When a user types in a source field, the value is captured
2. All target elements with the same attribute instance are updated
3. Updates happen in real-time as the user types
4. Works with text inputs, textareas, selects, and other form fields

Target elements will display the form field’s current value. For empty fields, the placeholder text (if specified) will be shown.