Designing forms and inputs for RTL
Fields that stay left to right
Some values are always typed and read left to right, even on an Arabic page. Set <code>dir="ltr"</code> on these inputs:
- Email addresses and URLs.
- Phone numbers.
- Codes, such as verification codes, promo codes and IDs.
The reason is practical. An email address such as <code>name@example.com</code> typed in a right-to-left field can show the at sign and dots in confusing positions, and a verification code can appear reversed. Left-to-right fields keep these values readable and easy to compare with the source.
The input box can still sit on the right side of the layout. Only the text inside it runs left to right. Many designers also align the value to the start edge so it matches the label.
Names and free text
A name field can receive Arabic or Latin text. Use <code>dir="auto"</code> so the direction follows what the user types. The same goes for comments, addresses and search fields.
With auto direction, the text starts on the correct side as soon as the first strong character is typed. Do not set a fixed direction on these fields, because it forces Arabic names into a left-aligned box or Latin names into a right-aligned one.
Labels, placeholders and messages
- Align labels to the start edge, which is the right edge in Arabic.
- Write placeholders and validation messages in natural Arabic, not a translation of the English wording.
- Keep an example such as <code>name@example.com</code> in Latin script, since the value itself is Latin.
- Do not use a placeholder as a replacement for a label.
- Place helper text and required markers at the start edge, near the label, where the eye lands first.
Input types, formats and widgets
Use the right <code>type</code> and <code>inputmode</code> attributes, such as <code>type="email"</code>, <code>type="tel"</code> and <code>inputmode="numeric"</code>, so mobile devices show a suitable keyboard.
Format currency and dates for the locale instead of writing them by hand. Date pickers and steppers should mirror: the previous month goes on the right and the next on the left, and a stepper fills from right to left.
Currency and dates need locale formatting. A price may place the symbol before or after the amount, and a date may use another order of day, month and year. Use the Intl APIs and avoid hard-coded patterns.
Validation text deserves care. Say what is wrong and how to fix it, and place the message under the field, aligned to the start edge. Keep error icons on the start side too, so the message and icon read as one unit.
Test every form with Arabic, Latin and mixed input before release.
Sources
- W3C. Right-to-left text in HTML forms. https://www.w3.org/International/questions/qa-html-dir
- MDN Web Docs. inputmode. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.