Field: Right to left

Text, checkbox placement and error lists follow the reading direction.

تذكرني

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <FieldGroup>
        <Field invalid>
          <FieldLabel>البريد الإلكتروني</FieldLabel>
          <Input type="email" defaultValue="ada@" />
          <FieldDescription>
            سنرسل رابط التأكيد إلى هذا العنوان.
          </FieldDescription>
          <FieldError errors={[{ message: "أدخل عنوان بريد صالحًا." }]} />
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked />
          <FieldLabel>تذكرني</FieldLabel>
        </Field>
      </FieldGroup>
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Field installation.

Props in this example

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

Field

Prop	Type	Default
`orientation`	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`
`invalid`Set it from a form library or server response.	`boolean`	`–`

FieldError

Prop	Type	Default
`errors`Errors from a form library or server. Shown when the list has a message.	`Array<{ message?: string } \| undefined>`	`–`

Every prop is in the Field API reference.

More Field examples

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