How can I set direction for a single component?

[mohammad-reza-rahbar]

Hello. I could change the direction globally to RTL using DirectionProvider. But there are situations where a component or a part of it must be LTR. For example username and password fields and numbers are almost always LTR. Now how can I change a TextInput direction (not its label or errors, although it would be nice to change them too) to LTR when the global direction is RTL?

[atareversei]

Hi. I do it by defining a global CSS class like:

/* you can target label and error text by using the classNames provided at each component's styles API.
For instance, input style props: https://mantine.dev/core/input/?t=styles-api
Here I am just targeting the input field itself */
.ltr-input .mantine-TextInput-input {
  direction: ltr;
  text-align: left;
}

Then, when I need the input to be ltr I just use the className:

<TextInput
  className="ltr-input"
  label={l.dash.cust.createCustomerEmailLabel}
  {...form.getInputProps('email')}
/>

And the result looks like this: