HextaUI

Label: Right to left

Gaps and the indicator follow the reading direction.

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

export function LabelRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label
          htmlFor="label-rtl-name"
          indicator="optional"
          optionalText="اختياري"
        >
          الاسم
        </Label>
        <Input id="label-rtl-name" />
      </div>
      <Label>
        <Checkbox defaultChecked />
        تذكرني
      </Label>
    </div>
  )
}

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

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

To add only the component, follow the Label installation.

Props in this example

The Label props this example sets, from the API reference.

PropTypeDefault
htmlForThe id of the control. Leave it out when the label wraps the control.
string–
indicatorMark the label from the control's required state. Off by default.
"required" | "optional"–
optionalText
ReactNode"Optional"

Every prop is in the Label API reference.

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