Radio Group: Marmo UI vs MUI

Radio groups look like a solved problem until you need arrow-key navigation between options, a fieldset-level error state, or a card-style selection UI instead of a bare circle input. Here is how Marmo UI’s Radio Group compares to MUI's RadioGroup.

Composition model

MUI's RadioGroup is a controlled wrapper around individual FormControlLabel + Radio pairs — flexible, but you assemble the label, the input, and the layout yourself for every option, and value/onChange wiring is standard React controlled-component boilerplate.

Marmo UI's RadioGroup takes an items array (value, label, description) and renders the full set, including layout and keyboard navigation, from that one prop. There's also a separate RadioCard component for card-style selection (icon + title + description in a bordered, clickable card) — a pattern MUI doesn't ship a built-in equivalent for; you'd compose it yourself from Radio + Card.

Keyboard navigation

• Both correctly implement arrow-key navigation between options within a group per the native radio-input behavior.
• MUI: error/helper text is wired through FormControl + FormHelperText, assembled per use.
• Marmo UI: error and description text are built into the same items-array API, so the accessible description-to-input association (aria-describedby) is handled by the component, not left to the consumer to wire correctly.

The Radio Card variant

If you’re building a pricing-tier picker, a plan selector, or any UI where each option needs an icon and a description rather than a bare label, Marmo’s Radio Card component ships that pattern directly. In MUI you’d build it from Radio + Card + manual ARIA wiring — doable, but it’s exactly the kind of component an AI agent tends to get subtly wrong (missing role, missing keyboard handling) when assembling it from primitives rather than using a purpose-built one.

Full props on the Radio Group docs page and the Radio Card docs page.