``orientation="horizontal"`` does not work on ``RadioGroup``

[msimoni18]

Adding orientation: "horizontal" to the RadioGroup example in the docs does not work.

This code

<RadioGroup defaultValue="option-one" orientation="horizontal">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

produces this image

[themuralimanohar]

Try adding className="grid-flow-col" to the RadioGroup

[Angelfire]

@themuralimanohar Yes, that works, but I strongly believe that this should work perfectly just by indicating the orientation, without modifying the CSS.

Something like:

const ORIENTATION_VERTICAL = "vertical";
const ORIENTATION_HORIZONTAL = "horizontal";

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  {
    orientation?: ORIENTATION_VERTICAL | ORIENTATION_HORIZONTAL;
  } & React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, orientation = ORIENTATION_HORIZONTAL, ...props }, ref) => {
  const orientationClass = orientation === ORIENTATION_VERTICAL ? "flex flex-col" : "flex";

  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", orientationClass, className)}
      {...props}
      ref={ref}
    />
  );
});

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[sevensinjai]

is it somehow related to this issue? https://github.com/radix-ui/website/issues/463

[gerardsiles]

because of Radix functionality, passing the orientation prop will only change the functional orientation, not the visual horientation.

The visual part can be fixed by modifying the radio group like follows:

`const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => { return ( <RadioGroupPrimitive.Root className={cn( "grid gap-2", props.orientation === "horizontal" ? "grid-flow-col" : ", className, )} {...props} ref={ref} /> ); });`

If you want to add some styling, like limiting the amount of columns that you display the data depending on the size of the screen, can be achieved with the following example: `const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => { return ( <RadioGroupPrimitive.Root className={cn( "grid gap-2", props.orientation === "horizontal" ? "grid-flow-row grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" : "", className, )} {...props} ref={ref} /> ); });`

I hope this helps