Phone Input for the Form Component

[B4rt0sz]

I think that it would be a good idea to create pre-defined input for phone validation in form components, such as:


Currently, there are many libraries for such purposes, but none are friendly for integration and customization - you need to do everything separately for it because of style conflicts.

[wulzymart]

This will really be very beneficial, shadcdn is currently gaining popularity, i was hoping this already exists

[PiotrWarzachowski]

You are right I might start the project. Recently I fell in love with shadcn. also I wanted to contribute a bit by making this open source project, where I used shadcn , you can contribute and customize some objects if you want, here is my repo : https://github.com/PiotrWarzachowski/DocMind Feel free to check it out, its public on vercel. You can leave a star ⭐ if you want 💓. Have a good year

[mwolf1989]

Phone Input would be great!

Maybe wrapped around

https://www.npmjs.com/package/react-phone-number-input

[vawogbemi]

Fifth! Yeah I actually really need a cool phone input now so I'm glad this is being talked about.

@shadcn

[omeralpi]

Maybe this could be of use to you.

Shadcn Phone Input is a phone input component built as part of the Shadcn design system.

I have also submitted a pull request (#2694) that includes a phone input component.

[codesfromshad]

@Tsandesh Bro is still cooking, let him cook.

[bqst]

Nice job, thank you !
Btw, onChange should not be required, especially for form action and uncontrolled input.

[Desgue]

Right what i needed thank you!

[omeralpi]

@bqst onchange and value were specified as optional. Can you please check the repository again?

[lash0000]

thank you very much on this happy holidays! 😃

[codesfromshad]

Hey, @omeralpi! I was working on the same problem. Thank you for you contribution. The solution I came up with is a bit janky. I do, however, would like to refine it. Do you want to work on this together?

Recording.2024-02-23.200841.mp4

[lucerowb]

@codesfromshad, could you share how did you make This input box render email input and Phone no. input change based on the value?

[codesfromshad]

Made use of libphonenumber-js, which ships with a helper function named isValidPhoneNumber and used zod to test if the provided string is a valid email. Tied that up to onChange; then it's just a simple problem of managing the state.

[chrisidakwo]

@shadcn is slowly turning into a components library

[codesfromshad]

Far from it. shadcn-ui gives you complete control over the components, unlike other libraries.

[chrisidakwo]

I think I know what shadcn does. I'm just saying with introduction of things like this discussion is asking for, it slowly becomes a component library. Component libraries can also be un-opinionated so the talk of "total control" doesn't really matter.