Does React Spectrum/React Aria support LTR-only inputs (email, URL, tel) in RTL contexts?

[David0036]

When building RTL applications (Arabic, etc.), there's a common UX pattern where technical input fields should remain left-to-right even in RTL mode:

• Email inputs (type="email")
• URL inputs (type="url")
• Phone number inputs (type="tel")

According to RTL Styling:

1. Placeholder text can be RTL (e.g., "البريد الإلكتروني")
2. Input content stays LTR (e.g., "user@example.com")
3. Label follows page direction

 // In an RTL context (Arabic)
<TextField>
  <Label>البريد الإلكتروني</Label>  {/* Right-aligned */}
  <Input
    type="email"
    placeholder="أدخل البريد الإلكتروني"  {/* Right-aligned */}
    value="user@example.com"  {/* Should stay left-aligned */}
  />
</TextField>

Does React Spectrum or React Aria Components have built-in support for this pattern?

If not:

• Is this something you'd consider adding?
• What's the recommended approach for handling this?

Currently, we're manually doing:

const { i18n } = useTranslation();
const isRTL = i18n.dir() === 'rtl';

<Input
  type="email"
  dir={isRTL ? 'ltr' : undefined}
  style={isRTL ? { textAlign: 'left' } : undefined}
/>

Would appreciate any guidance on the best practice here!
Related:

• RTL Form Styling Guide: https://rtlstyling.com/posts/rtl-styling/#form-inputs

[snowystinger]

Thanks for the very interesting discussion and link. I'm following up with our globalisation team because I do not know enough about the topic to make a recommendation yet.

[snowystinger]

Verified that this is the correct behaviour to aim for. I think that we (the library) don't have enough information to handle this automatically, unfortunately. We don't know if the provided placeholder is RTL or LTR, that's something that only the implementer knows. It could be mixed as well, so doing detection for that would be difficult.

There are some interesting discussions about this topic in the working groups for the html standards, whatwg/html#4903

Here's an example someone put together for how they would handle it (eventually with dir="auto" and no overrides needed)
https://codesandbox.io/p/sandbox/vigorous-merkle-37yp5v

There's also a way for users to override a particular field should they wish, https://www.w3.org/International/questions/qa-html-dir#userexplicit

I'm curious though, what are some ways you thought it might be supported. I've only thought about this for a little while, so I'm likely missing some things.

[David0036]

Hi @snowystinger, I can workaround with this way before (from your CodeSandbox). Thanks for support!

[lyhoang-web-dev]

Hi @snowystinger maybe your link https://codesandbox.io/p/sandbox/react-aria-components-4clgcv?file=%2Fsrc%2FApp.js%3A12%2C27 is out of date, Can you help me double check again for i can fork your example to see it

[snowystinger]

Very sorry about that, I'm not sure what happened, CSB claims I edited the files 55 years ago, haha. I was able to restore it, this link should work
https://codesandbox.io/p/sandbox/vigorous-merkle-37yp5v

[lyhoang-web-dev]

Thank you very much; your example is helpful!