Search code examples
next.jstailwind-cssnext.js13nextui

How to fix Next UI Input component label that is by default not positioning correctly when used with RTL direction?

I have this issue or maybe it's a bug I'm not sure with NEXT JS and Next UI, the problem is when I switch page direction to RTL the input label is not positioning correctly it has some sort of gap right side like the screenshot below, I did no fancy work it is just like this out of the box.

By just creating regular new Next JS project and adding Next UI support to it,

My code in page.tsx just for adding an input is like this:

  <Input 
    type="text"
    name="user" 
    label='My Lable here'
    placeholder="" 
  />

and in my layout.tsx I do direction simply like this:

<html lang="en" dir="rtl">

now the input in the rendered page looks like this:

enter image description here

Note that my Input component is the built in component within Next UI without any customization however I tried to override it like this:

classNames={{label: "rtl: m-0"}}

but it doesn't seem working...

So please how to fix this, is this a bug?

Solution

  • As reported in GitHub here, it is a bug! So, in case someone wants to solve this, the workaround below can fix only the issue mentioned above perfectly for now.

    label: "rtl:origin-top-right" // fix for RTL bug

    I don't know if it can fix other NextUI components with RTL problem too.