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., "[email protected]")
3. Label follows page direction

 // In an RTL context (Arabic)
<TextField>
  <Label>البريد الإلكتروني</Label>  {/* Right-aligned */}
  <Input
    type="email"
    placeholder="أدخل البريد الإلكتروني"  {/* Right-aligned */}
    value="[email protected]"  {/* 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/react-aria-components-4clgcv?file=%2Fsrc%2FApp.js%3A12%2C27

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!