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.

[gavan1]

@codesfromshad very impressive! let me know if you're ever looking for work.

[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.

[afrinxnahar]

I made this form component with phone input along with country code using these two libraries together:

• React country list
• React country flag

And here is the form component: https://github.com/Afrin127329/AlterYouth-homepage/blob/main/src/components/HeroForm.tsx

   <div className="flex gap-1 justify-center items-center space-y-1.5">
          <Select>
            <SelectTrigger id="phoneInput" className='w-[8rem] h-12 mt-1.5 rounded-md'>
              <SelectValue defaultValue={"+880"} />
              <span className="flex items-center gap-1">
                <ReactCountryFlag className="emojiFlag" countryCode="BD" svg />
                +880
              </span>
            </SelectTrigger>
            <SelectContent position="popper" className='w-[250px]'>
              {countryList.splice(0, 100).map((country) => (
                <SelectItem key={country.dial_code} value={country.dial_code}>
                  <span className="flex items-center gap-3">
                    <ReactCountryFlag
                      className="emojiFlag"
                      countryCode={country.code}
                      svg
                    />
                    {country.name}{country.dial_code}
                  </span>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Input placeholder='Your Number' className='h-12 rounded-md' />
        </div>

[devzakir]

looks okay, needs more improvements