export default function Example() {
  return (
    <Box css={{ display: "flex", gap: "$050" }}>
      <RadioGroup legend="Select an option" name="vertical" variant="primary">
        <RadioButton label="Option 1" value="opt1" id="opt1" />
        <RadioButton label="Option 2" value="opt2" id="opt2" />
        <RadioButton label="Option 3" value="opt3" id="opt3" />
      </RadioGroup>

      <RadioGroup
        legend="Select an option"
        name="horizontal"
        orientation="horizontal"
        variant="primary"
      >
        <RadioButton label="Option 1" value="opt1" id="opt1" />
        <RadioButton label="Option 2" value="opt2" id="opt2" />
        <RadioButton label="Option 3" value="opt3" id="opt3" />
      </RadioGroup>
    </Box>
  );
}