Radio Group Misalignment

[GuyMcKechnie]

As seen in the image below, the radio group item on the right is misaligned to the center whereas the fixed one is aligned to the left. Intentional?

Fix:

<RadioGroup onValueChange={field.onChange} className="flex flex-col items-start space-y-1" > {[ ["On-Hand", "0"], ["In-Transit", "1"], ["Available", "2"], ["Reserved", "3"], ].map((option, index) => ( <FormItem className="flex items-center space-y-0 space-x-3" key={index} > <FormControl> <RadioGroupItem value={option[1]} /> </FormControl> <FormLabel className="font-normal"> {option[0]} </FormLabel> </FormItem> ))} </RadioGroup>

[GuyMcKechnie]

Additional fix to the text being aligned to the bottom of the radio button:

<FormItem className="flex items-center flex-row space-y-0 space-x-3" key={index} > <FormControl> <RadioGroupItem value={option[1]} /> </FormControl> <FormLabel className="font-normal"> {option[0]} </FormLabel> </FormItem>

[Muhammad-Aman1718]

@GuyMcKechnie
I'd like to solve this issue.