Radio group: Right to left

Radios and cards follow the reading direction.

بطاقة ائتمانفيزا أو ماستركارد.الدفع عند الاستلامادفع نقدًا عند التوصيل.

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>
  )
}

Add this example

This adds the example as components/examples/radio-group/rtl.tsx, together with the Radio group component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Radio group installation.

Props in this example

The Radio group props this example sets, from the API reference.

RadioGroup

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

RadioGroupCard

Prop	Type	Default
`value`	`Value`	`–`

Every prop is in the Radio group API reference.

More Radio group examples

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