Input OTP: Right to left

Slots fill from the right and the arrow keys follow what you see. Give slots after the first a translated aria-label. Set dir="ltr" on the field to keep a code left to right in a right-to-left page.

رمز التحقق

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"
import { Label } from "@/components/ui/label"

export function InputOTPRtl() {
  return (
    <div
      dir="rtl"
      className="flex max-w-full min-w-0 flex-col items-start gap-2"
    >
      <Label htmlFor="input-otp-rtl">رمز التحقق</Label>
      <InputOTP id="input-otp-rtl" length={6} animated>
        <InputOTPGroup>
          <InputOTPSlot />
          <InputOTPSlot aria-label="الخانة ٢ من ٦" />
          <InputOTPSlot aria-label="الخانة ٣ من ٦" />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot aria-label="الخانة ٤ من ٦" />
          <InputOTPSlot aria-label="الخانة ٥ من ٦" />
          <InputOTPSlot aria-label="الخانة ٦ من ٦" />
        </InputOTPGroup>
      </InputOTP>
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Input OTP installation.

Props in this example

The Input OTP props this example sets, from the API reference.

InputOTP

Prop	Type	Default
`length`Required. The number of slots; render the same number of InputOTPSlot parts.	`number`	`–`
`animated`Animate characters in and out, cascade multi-character input and animate the status.	`boolean`	`false`
`id`Goes on the first slot, so a label's htmlFor points at it.	`string`	`–`

InputOTPSlot

Prop	Type	Default
`aria-label`Ignored on the first slot, which uses the label.	`string`	`"Character N of M"`

Every prop is in the Input OTP API reference.

More Input OTP examples

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