CleenUI · Forms · RadioButtonGroup

RadioButtonGroup

Mutually-exclusive radio group rendered as a connected button bar.

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

About RadioButtonGroup

RadioButtonGroup presents a small set of mutually-exclusive options as a connected segmented control. Visually compact and immediate — best suited for 2–6 short labels.

The selected segment shows a brand-tinted background. Keyboard arrow keys move selection; space and enter commit. For lists longer than 6 items, prefer RadioBoxGroup or Select instead.

When to use it

  • View-mode switchers (list / grid / cards).
  • Date range presets (Day / Week / Month / Quarter).
  • Sort-order pickers.
  • Compact priority or status selectors.

Common props

Prop
Type
Description
options
Option[]
Array of {value, label, icon}.
value
string
Selected value (controlled).
onChange
(value: string) => void
Change handler.
size
"sm" | "md" | "lg"
Visual size variant.
fullWidth
boolean
Stretch the group to fill the container.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ 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.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.