The RTL layout is not implemented correctly

[mabras]

Our website uses an RTL layout, but we need the phone input to remain in LTR format. I mean It is not good UX to put the flag/internationl prefix nubers on the right.

Current UI/UX:

Expected Behavior:

[successbyte]

Hi, I will start working on it please assign it to me

[successbyte]

Hi, as I checked the library, it has the right to left section here but still there is some issues:

• the country code should be +93 but it is 93+
• when writing the number 070 123 4567 but is shows 4567 123 070 as the placeholder

As I work use Farsi/Persian or Arabic languages in our apps the above are real world issues

and I will work on it if you have any comment, please share

by the way I closed above PR (I thought you do not have RTL)

[jackocnr]

Thanks for raising this. I've added dir=LTR to the phone input and the dial codes in the dropdown: https://intl-tel-input.com/examples/right-to-left.html

I think this issue is now fixed, but let me know if you're still having problems.

[farzadaqajani]

Thanks for raising this. I've added dir=LTR to the phone input and the dial codes in the dropdown: https://intl-tel-input.com/examples/right-to-left.html

I think this issue is now fixed, but let me know if you're still having problems.

The problem is still not solved. The flag and separateDialCode should be on the left side of the input field and the mobile number should be written on the left side next to the flag and separateDialCode. This problem is also visible in the demo.

[jackocnr]

Hi @farzadaqajani, thanks for raising this issue again. On reflection, I agree that (1) the phone input should have text-align:left, and (2) when enabling separate-dial-code, it should be positioned to the left as it should be considered part of the number. For this reason, I have done as you asked and moved the selected flag / separate dial code to the left.

I wonder if, in an ideal world, for RTL countries, it would be better to display the selected flag on the right-hand side, but currently it is bound up with the separate dial code element, and it would be too much work to separate them, so they will both be on the left for now.

This change was released with v25.10.12 and you can now see it (without separateDialCode) on the RTL demo page - note you may need to do a cache refresh to see the changes. Let me know if that looks right to you.

[farzadaqajani]

Hi @farzadaqajani, thanks for raising this issue again. On reflection, I agree that (1) the phone input should have text-align:left, and (2) when enabling separate-dial-code, it should be positioned to the left as it should be considered part of the number. For this reason, I have done as you asked and moved the selected flag / separate dial code to the left.

I wonder if, in an ideal world, for RTL countries, it would be better to display the selected flag on the right-hand side, but currently it is bound up with the separate dial code element, and it would be too much work to separate them, so they will both be on the left for now.

This change was released with v25.10.12 and you can now see it (without separateDialCode) on the RTL demo page - note you may need to do a cache refresh to see the changes. Let me know if that looks right to you.

Hi @jackocnr! Thanks so much for fixing it so quickly. From what I've seen, when the language is RTL, the flag appears before the phone number and country code and I don't think users expect anything different. My native language is Persian, which is RTL, and I personally expect the mobile number field to behave that way too.