# Phone number input component
**URL:** https://community.weweb.io/t/phone-number-input-component/19419
**Category:** Share your work
**Created:** [July 28, 2025, 3:16pm UTC](https://community.weweb.io/t/phone-number-input-component/19419 "2025-07-28T15:16:25Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [July 28, 2025, 3:16pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/1 "2025-07-28T15:16:25Z")
**Hi everyone,**
As a backend developer, I’m pretty proud of a little UI component I recently built a custom **phone number input**.
I feel like something like this would be a great as a **native component in WeWeb** someday!
Amongst the features there is translation or that it **automatically reformats** the input to ensure a consistent phone number structure no matter how the user types it (with or without spaces, starting with a `0` or not for French numbers, etc.).
It’s based on an npm package, but I had to do a good bit of customization to make it fit seamlessly with my style library.
Here’s a quick showcase if you’re curious:
👉 [Loom video](https://www.loom.com/share/c599c42fb66544b58b2a4c12176cf241?sid=396fcf60-2f18-47aa-bf0d-3e9e36ab8df3)
---
### Author:  [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)
#### Post date: [July 28, 2025, 3:23pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/2 "2025-07-28T15:23:16Z")
Hi Hugo, this looks great! 🚀
Any chance you would like to share your component?
You can submit it to the marketplace:
> **[WeWeb Marketplace](https://marketplace.weweb.io/)**
>
> Build faster with the WeWeb Marketplace!
---
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [July 28, 2025, 6:42pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/4 "2025-07-28T18:42:58Z")
Hi Agustin,
Just submited the component to the marketplace 😉
---
### Author:  [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)
#### Post date: [July 29, 2025, 2:59pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/5 "2025-07-29T14:59:19Z")
Sick!
Thank you hugo 🙂
---
### Author:  [@Serhii](https://community.weweb.io/u/Serhii)
#### Post date: [July 29, 2025, 9:21pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/6 "2025-07-29T21:21:03Z")
> [@Hugo-OC](#):
>
> **Hi everyone,**
>
> As a backend developer, I’m pretty proud of a little UI component I recently built a custom **phone number input**.
>
> I feel like something like this would be a great as a **native component in WeWeb** someday!
>
> Amongst the features there is translation or that it **automatically reformats** the input to ensure a consistent phone number structure no matter how the user types it (with or without spaces, starting with a `0` or not for French numbers, etc.).
>
> It’s based on an npm package, but I had to do a good bit of customization to make it fit seamlessly with my style library.
Hi Hugo, Looks like your component is great!!!
---
### Author:  [@Cee\_Experte](https://community.weweb.io/u/Cee_Experte)
#### Post date: [July 30, 2025, 12:39pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/7 "2025-07-30T12:39:33Z")
Hi, this looks great! nice work. What is the name of this component in the market place? it’s something i need urgently
---
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [July 30, 2025, 12:52pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/8 "2025-07-30T12:52:45Z")
Hi, you can find it here : [Phone input marketplace](https://marketplace.weweb.io/libraries/c25327ab-8a6f-4a0b-828f-0e692f4fd543/)
You have a demo available and if you have any questions feel free to ask them here.
---
### Author:  [@nealzie](https://community.weweb.io/u/nealzie)
#### Post date: [September 19, 2025, 3:58pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/9 "2025-09-19T15:58:49Z")
This is great Hugo, thanks!
2 questions:
1 - did I do it correctly that, in order to use the inputted value in my form, I created a variable inside the component that’s exposed outside, and then a workflow that populates that variable on change? I couldn’t find the values in another way…
2 - I’m trying to make the input width fill the container to 100% but I can’t seem to find the correct classes to do it through some additional css. Any tips?
Thanks again! It’s a great component 🙂
---
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [September 19, 2025, 10:03pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/10 "2025-09-19T22:03:21Z")
Hi Niels,
Glad you are happy with my component,
1. Yes you can use the onChange event or you could use the variable directly available :
2. This feature wasn’t included in the version currently listed in the shop. I’m actively maintaining the component, and I recently added dynamic width.
Please email me at the address shown on the component’s demo page in the marketplace, and I’ll send you the latest version.
Sincerly,
Hugo
---
### Author:  [@nealzie](https://community.weweb.io/u/nealzie)
#### Post date: [September 20, 2025, 5:22pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/11 "2025-09-20T17:22:25Z")
Thanks Hugo, I’ve sent you an email.
btw for me, that variable isn’t directly available, I can only see it in my log when inside the component, not outside. (the workaround with an extra variable that gets filled throug a workflow works though)
Here’s what gets logged when I’m inside the component:
---
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [September 20, 2025, 9:21pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/12 "2025-09-20T21:21:47Z")
Hey,
I didn’t remember at first, but it seems I added this exposed variable after the initial upload of the component to the marketplace. In any case, you should now have it in the updated version.
---
### Author:  [@nealzie](https://community.weweb.io/u/nealzie)
#### Post date: [September 22, 2025, 9:23am UTC](https://community.weweb.io/t/phone-number-input-component/19419/13 "2025-09-22T09:23:58Z")
Super happy with this Hugo, thanks!
---
### Author:  [@Pedro\_Multiagents](https://community.weweb.io/u/Pedro_Multiagents)
#### Post date: [October 31, 2025, 2:13pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/14 "2025-10-31T14:13:05Z")
I need to change the select element’s language to Portuguese so its labels match the user’s browser language.
---
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [October 31, 2025, 2:28pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/15 "2025-10-31T14:28:55Z")
Hi, the component only support french and english for now.
Your best shot would be to fork the component to add the Portuguese translation.
---
### Author:  [@Pedro\_Multiagents](https://community.weweb.io/u/Pedro_Multiagents)
#### Post date: [November 3, 2025, 8:30pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/16 "2025-11-03T20:30:17Z")
When I try to fork within [weweb.io](https://weweb.io/), this issue happens, preventing me from editing the component.
Do you know how to solve this problem?
---
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [November 18, 2025, 2:23pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/17 "2025-11-18T14:23:48Z")
Hi Pedro, I meant that you should fork the GitHub component. Please note that this will require some development skills to implement successfully
---
### Author:  [@Hugo-OC](https://community.weweb.io/u/Hugo-OC)
#### Post date: [April 8, 2026, 11:33pm UTC](https://community.weweb.io/t/phone-number-input-component/19419/18 "2026-04-08T23:33:46Z")
Hello,
Please be aware that the recent update has introduced a dependency issue. If you are affected by this, please reach out to me at [contact@oneclick-dev.fr](mailto:contact@oneclick-dev.fr) to receive the fix.
We sincerely apologize for any inconvenience this may have caused.