CleenUI · Forms · RadioBoxGroup

RadioBoxGroup

Mutually-exclusive radio group rendered as card-style options with descriptions.

storybook.cleenui.com · forms-radioboxgroup--default
Open in new window

About RadioBoxGroup

RadioBoxGroup presents radio options as full-width cards, each with a title, description, and optional icon or visual. The selected card gets a brand-colored border and check indicator.

This is the right pattern when each option needs more than a label to make sense — pricing tiers, plan comparisons, deployment options, payment methods. The cards stack vertically by default but can lay out in a grid for shorter descriptions.

When to use it

  • Pricing tier selection.
  • Deployment or hosting option picker.
  • Payment method selection (card / bank / crypto).
  • Onboarding choice screens with explanatory copy.

Common props

Prop
Type
Description
options
Option[]
Array of {value, label, description, icon}.
value
string
Selected value (controlled).
onChange
(value: string) => void
Change handler.
layout
"stack" | "grid"
Card arrangement.
columns
number
Number of columns in grid layout.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with