Forms

Radio Group

Single choice among options.

Import

tsx

import { RadioGroup } from "@cronus-ui/ui";

bash

npx cronus-ui add radio-group

Examples

Options

A single-choice list of mutually exclusive options with labels and hints.

StarterFor side projects

ProFor growing teams

EnterpriseFor large organizations

tsx

const options = [
  { value: "starter", label: "Starter", hint: "For side projects" },
  { value: "pro", label: "Pro", hint: "For growing teams" },
  { value: "enterprise", label: "Enterprise", hint: "For large organizations" },
];

function RadioGroupDemo() {
  const [plan, setPlan] = useState("pro");

  return (
    <RadioGroup value={plan} onValueChange={setPlan} className="flex flex-col gap-3">
      {options.map((option) => (
        <div key={option.value} className="flex items-center gap-3">
          <RadioGroupItem value={option.value} id={`plan-${option.value}`} />
          <Label htmlFor={`plan-${option.value}`} className="flex flex-col gap-0.5">
            <span>{option.label}</span>
            <span className="text-xs font-normal text-fg-tertiary">{option.hint}</span>
          </Label>
        </div>
      ))}
    </RadioGroup>
  );
}