# Field: Right to left

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

Example: https://hextaui.com/docs/field/examples/rtl
Component docs: https://hextaui.com/docs/field.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/field-rtl.json
```

This adds `components/examples/field/rtl.tsx` with the Field component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/field/rtl.tsx"
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>
  )
}
```

## Props in this example

### Field

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

### FieldError

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

## More Field examples

- [Input](https://hextaui.com/docs/field/examples/input.md)
- [Validation](https://hextaui.com/docs/field/examples/validation.md)
- [Custom validation](https://hextaui.com/docs/field/examples/custom-validation.md)
- [Required and optional](https://hextaui.com/docs/field/examples/indicator.md)
- [Status](https://hextaui.com/docs/field/examples/status.md)
- [Character count](https://hextaui.com/docs/field/examples/counter.md)
- [Errors from a form library or server](https://hextaui.com/docs/field/examples/errors.md)
- [Checkboxes](https://hextaui.com/docs/field/examples/checkbox.md)
- [Choice cards](https://hextaui.com/docs/field/examples/choice-card.md)
- [Fieldset](https://hextaui.com/docs/field/examples/fieldset.md)
- [Responsive](https://hextaui.com/docs/field/examples/responsive.md)
- [Disabled](https://hextaui.com/docs/field/examples/disabled.md)
- [Long content](https://hextaui.com/docs/field/examples/long-content.md)