RadioGroup

Guidelines#

Use it for 2–5 mutually exclusive options that need a description each ("Review every draft" / "Send replies automatically" / "Off"). More options, or options without descriptions, go in a Select.

What you provide: defaultValue or value/onValueChange; for each option a RadioGroupItem with value and id, a Label, and a one-line description in muted-foreground. Order options from safest to boldest.

Facts#

API#

TypeScript declarations emitted from src/components/ui/radio-group.tsx (the module also exports its other parts).

declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): any;
declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): any;
export { RadioGroup, RadioGroupItem };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Opt(v, title, desc) {
  return h("div", { className: "flex items-start gap-3" },
    h(DC.RadioGroupItem, { value: v, id: "rg-" + v, className: "mt-0.5" }),
    h("div", { className: "grid gap-1" },
      h(DC.Label, { htmlFor: "rg-" + v }, title),
      h("p", { className: "text-sm text-muted-foreground" }, desc)));
}
function App() {
  return h(DC.RadioGroup, { defaultValue: "review", className: "gap-4" },
    Opt("review", "Review every draft", "Max writes; nothing sends until you approve it."),
    Opt("auto", "Send replies automatically", "Inbox Autopilot answers warm replies on its own."),
    Opt("off", "Off", "Max stays out of this inbox."));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#