HextaUI

Checkbox: Right to left

The box sits on the inline start side and the label follows the reading direction.

import { Checkbox } from "@/components/ui/checkbox"

export function CheckboxRtl() {
  return (
    <div dir="rtl" className="flex flex-col gap-3 text-sm">
      <label className="flex items-center gap-3">
        <Checkbox defaultChecked />
        تذكر هذا الجهاز
      </label>
      <label className="flex max-w-sm items-start gap-3">
        <span className="flex h-5 items-center">
          <Checkbox />
        </span>
        <span className="flex flex-col gap-0.5">
          <span className="leading-5 font-medium">الإشارات والردود</span>
          <span className="text-muted-foreground">
            سنرسل لك إشعارات فقط حول نشاط منشوراتك.
          </span>
        </span>
      </label>
    </div>
  )
}

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

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

To add only the component, follow the Checkbox installation.

Props in this example

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

PropTypeDefault
defaultChecked
booleanfalse

Every prop is in the Checkbox API reference.

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