# Edit component input field instance

**URL:** <https://community.weweb.io/t/edit-component-input-field-instance/8045>\
**Category:** Ask us anything\
**Created:** [April 10, 2024, 3:12pm UTC](https://community.weweb.io/t/edit-component-input-field-instance/8045 "2024-04-10T15:12:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sebastian1](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Sebastian1](https://community.weweb.io/u/Sebastian1)\
**Post date:** [April 10, 2024, 3:12pm UTC](https://community.weweb.io/t/edit-component-input-field-instance/8045/1 "2024-04-10T15:12:19Z")

</div>

I have created a styled input field and converted it to a component. What I cannot seem to do is edit the placeholder or input type for an instance.

I was hoping for simply styling the input and then being able to apply that styling to other inputs. Element templates also do not seem to achieve this.

Is this correct and are inputs not really best use case for components.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [April 12, 2024, 1:45pm UTC](https://community.weweb.io/t/edit-component-input-field-instance/8045/2 "2024-04-12T13:45:13Z")

</div>

Hi @Sebastian1 👋

Does your component have props?

You could have a `placeholder` property for example and bind the placeholder to the prop value. You won’t be able to do that for the input type because that’s not bindable.

Here’s a video explaining what I mean: [https://tella.video/video-for-sebastian-fv73](https://tella.video/video-for-sebastian-fv73)

Does that help?

---

<div class="post-metadata">

**Author:** ![liemooo123](https://avatars.discourse-cdn.com/v4/letter/l/c2a13f/32.png) [@liemooo123](https://community.weweb.io/u/liemooo123)\
**Post date:** [December 2, 2025, 7:24pm UTC](https://community.weweb.io/t/edit-component-input-field-instance/8045/3 "2025-12-02T19:24:35Z")

</div>

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/ea0c683f89126cf18f2171a9cb815bd6b877b4fa.png)  
how i can get the value when use input component ? thanks u !

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [December 3, 2025, 11:27pm UTC](https://community.weweb.io/t/edit-component-input-field-instance/8045/4 "2025-12-03T23:27:36Z")

</div>

Hi Alex 👋

There are several ways to do this 🙂

## Quick and easy

The easiest way is to create a global variable (i.e. not scoped inside the component) and, inside the component, have a workflow on the input that updates that external variable on change.

Something like this:

 ![CleanShot 2025-12-04 at 00.18.17@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d01ec6a351f976b8921a762399ecc6a4d69f5d43.png)

The downside of this method is that the variable is not scoped to the component. If your app is small, it’s not a big deal and more easy to setup but, if your app is big, having lots of global variables can become hard to maintain.

## Best for larger apps

If your app is big and you need to keep things nicely scoped to make things easier to maintain, you’ll need to look into component events. Here are [the docs on the topic](https://docs.weweb.io/components/component-events.html).

If you’re fairly new to this, my advice would be to start with method 1 and, if you see the need to streamline things as your app grows, refactor your (no)code by following method 2 because, when you’re just getting started with programming, it can be a bit tricky to apprehend at first.

In any case, don’t hesitate to reach out again if you get stuck along either way!

---

<div class="post-metadata">

**Author:** ![Antoinemazu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/antoinemazu/32/13392_2.png) [@Antoinemazu](https://community.weweb.io/u/Antoinemazu)\
**Post date:** [December 10, 2025, 8:40am UTC](https://community.weweb.io/t/edit-component-input-field-instance/8045/5 "2025-12-10T08:40:45Z")

</div>

If that can help, it is the same process that I’m explaining at the beginning of this video:

[https://www.youtube.com/watch?v=JFuHPs5PPVs](https://www.youtube.com/watch?v=JFuHPs5PPVs) 🙂