RadioGroup

Quick Preview

Monthly

Pay in equal monthly installments.

Quarterly

Pay every three months.

Use this public composition when building RadioGroup:

RadioGroup
└── Field
    ├── RadioGroupItem
    └── FieldContent

<RadioGroup defaultValue="monthly"><RadioGroupItem value="monthly" /></RadioGroup>

Use size directly or through Field to keep radio items aligned with form density.

sm radio

md radio

lg radio

Prop/API	Type	Default	Description
`size` on RadioGroupItem	`"sm"	"md"	"lg"`
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Preserve the documented RadioGroup composition so labels, triggers, content, and controls remain connected.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.