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>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component RadioGroupDefault layout:inline style:radio-group {
  value:"Pro"
  aria-label:"Plan"
  label "Plan"
  text "Free"
  text "Pro"
}

page "/audit/radio-group/default" type:custom {
  use RadioGroupDefault
}

API Reference

Generated from the component's exported types.

RadioGroupProps

Extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`required`	`boolean`	—	Marks the control as required.
`name`	`string`	—	Submitted name when used in a form.
`orientation`	`"horizontal" \| "vertical"`	—	—
`dir`	`"ltr" \| "rtl"`	—	Reading direction. Inherits from the document when omitted.
`loop`	`boolean`	—	When true, keyboard navigation wraps around the ends.

RadioGroupItemProps

Extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`asChild`	`boolean`	—	Render as the child element via Slot.