Radio

import { RadioGroup, Radio } from "@sparrowengg/twigs-react";

const RadioExample = () => {
  const [selectedValue, setSelectedValue] = useState("option1");

  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$6", alignItems: "center" }}>
      <Box css={{ display: "flex", flexDirection: "column", gap: "$4", alignItems: "flex-start" }}>
        <Text css={{ fontSize: "$md", fontWeight: "$6" }}>Choose your preference:</Text>
        
        <RadioGroup
          value={selectedValue}
          onChange={setSelectedValue}
          css={{ display: "flex", flexDirection: "column", gap: "$3" }}
        >
          <Radio value="option1" size="sm">
            Small radio option
          </Radio>
          <Radio value="option2" size="md">
            Medium radio option
          </Radio>
          <Radio value="option3" size="sm" disabled>
            Disabled radio option
          </Radio>
        </RadioGroup>
      </Box>

      <Box css={{ display: "flex", flexDirection: "column", gap: "$4", alignItems: "flex-start" }}>
        <Text css={{ fontSize: "$md", fontWeight: "$6" }}>Default selection:</Text>
        
        <RadioGroup
          defaultValue="default"
          css={{ display: "flex", flexDirection: "column", gap: "$3" }}
        >
          <Radio value="default" size="md">
            Default option
          </Radio>
          <Radio value="comfortable" size="md">
            Comfortable option
          </Radio>
          <Radio value="compact" size="md">
            Compact option
          </Radio>
        </RadioGroup>
      </Box>
    </Box>
  );
};