Sometimes you need to pick multiple options! That's where the Radio component comes into play.
npm install @radix-ui/react-radio-group class-variance-authority
import { cn } from "@/lib/utils";
import * as RadioPrimitive from "@radix-ui/react-radio-group";
import { cva, VariantProps } from "class-variance-authority";
const radioVariants = cva("border-black border-2", {
variants: {
variant: {
default: "",
outline: "",
solid: "",
},
size: {
sm: "h-4 w-4",
md: "h-5 w-5",
lg: "h-6 w-6",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});
const radioIndicatorVariants = cva("flex ", {
variants: {
variant: {
default: "bg-primary-500 border-2 border-black",
outline: "border-2 border-black",
solid: "bg-black",
},
size: {
sm: "h-2 w-2",
md: "h-2.5 w-2.5",
lg: "h-3.5 w-3.5",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});
interface RadioGroupProps
extends React.ComponentProps<typeof RadioPrimitive.Root> {}
export const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (
<RadioPrimitive.Root className={cn("grid gap-2", className)} {...props} />
);
interface RadioProps
extends React.ComponentProps<typeof RadioPrimitive.Item>,
VariantProps<typeof radioVariants> {}
export const RadioItem = ({
children,
className,
size,
variant,
...props
}: RadioProps) => (
<RadioPrimitive.Item
{...props}
className={cn(
radioVariants({
size,
variant,
}),
className
)}
>
<RadioPrimitive.Indicator className="flex justify-center items-center">
<span className={radioIndicatorVariants({ size, variant })}></span>
</RadioPrimitive.Indicator>
{children}
</RadioPrimitive.Item>
);
const RadioComponent = Object.assign(RadioGroupRoot, {
Item: RadioItem,
});
export { RadioComponent as RadioGroup };
Last Updated: 20 Feb, 2024