Mirror Input Values
Built for

How to use multiple instances

To apply more instances of the solution on the same page, wrap the component inside a parent element with the instance attribute.

Check more examples
How to use multiple instances
example 01
required

Filter Required Minimum setup

example 02

Filter complete setup with all form elements and dynamic content

example 03

Filter complete setup with all form elements and static content

example 04

Filter using checkboxes and active class

example 05

Filter using radio buttons and filter "All"

example 06

Filter Advanced setup with conditional fields

The elements outlined in blue have the necessary attributes for this solution. Toggle X-ray by pressing ? on your keyboard and hover the outlined elements to reveal their attributes.

Instance #1

This is the Instance #1.
Please ensure that your trigger and target elements have the same instance attribute fs-mirrorinput-instance="1".
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
The elements outlined in blue have the necessary attributes for this solution. Toggle X-ray by pressing ? on your keyboard and hover the outlined elements to reveal their attributes.

Instance #2

This is the Instance #2.
Please ensure that your trigger and target elements have the same instance attribute fs-mirrorinput-instance="2".
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.