104Get started
HextaUI

Input: Right to left

Text, caret and padding follow the direction. Use dir="auto" on fields that hold left-to-right values, like an email address in an Arabic form.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function InputRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-rtl">البريد الإلكتروني</Label>
      <Input id="input-rtl" placeholder="[email protected]" dir="auto" />
      <Input aria-label="الاسم" placeholder="اكتب اسمك" />
    </div>
  )
}

Add this example

This adds the example as components/examples/input/rtl.tsx, together with the Input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-rtl.json

To add only the component, follow the Input installation.

More Input examples

See them all, with keyboard support and accessibility notes, on the Input page.

Related components