Single-select radio option list with an animated shared-layout highlight, spring-animated ring and dot, staggered row entrance, and optional per-option descriptions.
"use client";
import * as React from "react";
import RadioGroup from "@/components/ui/radiogroup";
const options = [
{
value: "starter",
label: "Starter",
description: "For individuals getting started",
},
{
value: "pro",
label: "Pro",
description: "For growing teams that need more",
},
{
value: "enterprise",
label: "Enterprise",
description: "Advanced controls and support",
},
];
export default function RadioGroupDemo() {
const [value, setValue] = React.useState("pro");
return (
<div className="flex min-h-[300px] w-full items-center justify-center p-6">
<RadioGroup
aria-label="Choose a plan"
className="w-full max-w-xs"
options={options}
value={value}
onChange={setValue}
/>
</div>
);
}