# Label: Right to left

> Gaps and the indicator follow the reading direction.

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

## Add this example

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

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

## Source

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

## Props in this example

### Label

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `htmlFor` | `string` | – | The id of the control. Leave it out when the label wraps the control. |
| `indicator` | `"required" \| "optional"` | – | Mark the label from the control's required state. Off by default. |
| `optionalText` | `ReactNode` | `"Optional"` |  |

## More Label examples

- [Follows its control](https://hextaui.com/docs/label/examples/states.md)
- [Required and optional](https://hextaui.com/docs/label/examples/indicator.md)
- [Checkbox](https://hextaui.com/docs/label/examples/checkbox.md)
- [Icon](https://hextaui.com/docs/label/examples/icon.md)
- [Long content](https://hextaui.com/docs/label/examples/long-content.md)