# Radio group: Right to left

> Radios and cards follow the reading direction.

Example: https://hextaui.com/docs/radio-group/examples/rtl
Component docs: https://hextaui.com/docs/radio-group.md

## Add this example

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

This adds `components/examples/radio-group/rtl.tsx` with the Radio group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/radio-group/rtl.tsx"
import {
  RadioGroup,
  RadioGroupCard,
  RadioGroupCardDescription,
  RadioGroupCardTitle,
} from "@/components/ui/radio-group"

export function RadioGroupRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <RadioGroup variant="card" aria-label="طريقة الدفع" defaultValue="card">
        <RadioGroupCard value="card">
          <RadioGroupCardTitle>بطاقة ائتمان</RadioGroupCardTitle>
          <RadioGroupCardDescription>
            فيزا أو ماستركارد.
          </RadioGroupCardDescription>
        </RadioGroupCard>
        <RadioGroupCard value="cash">
          <RadioGroupCardTitle>الدفع عند الاستلام</RadioGroupCardTitle>
          <RadioGroupCardDescription>
            ادفع نقدًا عند التوصيل.
          </RadioGroupCardDescription>
        </RadioGroupCard>
      </RadioGroup>
    </div>
  )
}
```

## Props in this example

### RadioGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "card"` | `"default"` | card adds the sliding selection ring. |
| `defaultValue` | `Value` | – |  |

### RadioGroupCard

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |

## More Radio group examples

- [Cards](https://hextaui.com/docs/radio-group/examples/cards.md)
- [Horizontal](https://hextaui.com/docs/radio-group/examples/horizontal.md)
- [Form](https://hextaui.com/docs/radio-group/examples/form.md)
- [Disabled and read-only](https://hextaui.com/docs/radio-group/examples/states.md)
- [Controlled](https://hextaui.com/docs/radio-group/examples/controlled.md)