is there a way to make a component with dynamics inputs ?

[muhamedRadwan]

I am working on a form where I want to add a select option with two choices: Redirect to Page and Redirect to Route. Depending on the selected option:

If the user selects Redirect to Route, I want to display inputs for Action and Action Type.
If the user selects Redirect to Page, I want to show a dropdown for Pages.
I have implemented the necessary changes for this functionality, but I am encountering an issue: the Pages dropdown is visible by default, and I need it to remain hidden until the user selects the Redirect to Page option.

Please guide me on how to ensure the pages dropdown is hidden by default.

[givanz]

You can use the input group attribute that will set a data-group attribute on the input container

VvvebJs/libs/builder/components-elements.js

Line 519 in 409ede1

group:"masonry",

In the gallery component groups is used to show/hide inputs for masonry layout switch like images per rows

VvvebJs/libs/builder/components-elements.js

Lines 470 to 484 in 409ede1

	setGroup: group => {
	document.querySelectorAll(".mb-3[data-group]").forEach(el => el.style.display = "none");
	document.querySelector('.mb-3[data-group="'+ group + '"]').style.display = "";
	},
	onChange : function(node, value, input) {
	this.setGroup(value);
	return node;
	},
	init: function (node) {
	if (node.classList.contains("masonry")) {
	return "masonry";
	} else {
	return "flex";
	}
	},

Also every input has a data-key attribute that you can use to toggle it.

This method is used in embed video component to hide/show poster image for html source, you can view the code here

https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-widgets.js#L220-L222

[muhamedRadwan]

Very thanks Bro <3