How do i change the input type inside a custom built textarea component?

[Bycadavr]

hey guys, need your assistance. Already asked local weweb AI, ChatGPT, Grok, checked videos but can’t figure out how to do it.

i’ve made a long way to make this custom component that is aka google material design input. that structure is like this

what i struggle now with is to make the input a different type. so for emails - a text type and for password - a password type. The problem is that if i change the input type inside the main component it is changed for all instances at once and for specific instance i can’t change input type without entering component edit.

More of that, i can’t directly bind the input type to a property. And Ai suggest some weird thing with code which i don’t understand as a designer not a developer

pls advice, appreciate any help. Cheers.

P.S. i suppose the solution would be not to use this custom built textarea as a component, then i will be able to adjust input type directly for each separate input. But that’s way too easy and not very good for scaling a project in future.

[Agustin_Carozo (Agustin M. Carozo)]

Hi there

Indeed you can’t bind the input type dynamically.

the way I see it you have 2 choices:

• You create a class with some common styles and you apply it to any input you will use
• You create one master input component, and inside you show or hide them dynamically/ conditionally depending on your use case

We’ve had some community members discussing this idea in the past:

Bindable input type?

I’m assuming you mean one div per possible input type and using conditional rendering based on a property to only render the div of the corresponding type? That’s the solution I came up with as well but it’s definitely not ideal.

Set input type dynamically

I just want to set the type if it is number, answer, email, decimal. This is not possible dynamically so far. I believe it is not a good option to put them all inside the component and render conditionally. If there was a dynamic option in the type like there are in other options, it would solve the problem.

Hope this helps!

[Bycadavr]

Hi, thanks for your reply. The second version sounds interesting. so i need to place inside the master component all possible input types and then show only 1 at a time binded to the property “select” somehow?

[Bycadavr]

ok i found the best option is to duplicate the component, rename it and change input type inside it separately. The issue now is that all my variables are enclosed inside components and even making them visible outside of component doesn’t help and Supabase auth workflow can’t see the variables anyhow inside the components… i read some info here that i need some workaround functions/workflows to read those variables but that’s too much work for me being a no coder person