Radio group

Forms

Lets users select one option from a labeled set of mutually exclusive choices.

React · copy into your project · light and dark themes

Try it

Variant

Size

Selected mark

Quiet focus selected.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/radio-group.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes checkbox, select, label, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/checkbox.json https://luv-jeri.github.io/cojeev-ui/r/radio-group.json https://luv-jeri.github.io/cojeev-ui/r/select.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using radio group

The default organic selector stays close to a circle, with subtle asymmetry and cursor-responsive contour motion.
Choose organic, circle, rounded, pebble, leaf or flower; pink, blue, olive and yellow tones are available.
Give each RadioGroupItem a distinct value and use value or defaultValue on the root.
Handle onValueChange to update the setting or form answer represented by the group.
Use size="sm" | "default" | "lg" or a numeric16–64px size. indicator chooses auto/dot/check/diamond/flower; showIndicator={false} leaves the selected outer blob only.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

RadioGroupProps

Prop	Type	Required
`pictographic`	`boolean \| null \| undefined`	No
`shape`	`SelectorShape`	No
`tone`	`SelectorTone`	No
`size`	`SelectorSize`	No
`indicator`	`SelectorIndicator`	No
`showIndicator`	`boolean`	No

RadioGroupItemProps

Prop	Type	Required
`pictographic`	`boolean`	No
`shape`	`SelectorShape`	No
`tone`	`SelectorTone`	No
`size`	`SelectorSize`	No
`indicator`	`SelectorIndicator`	No
`showIndicator`	`boolean`	No

RadioGroupBodyProps

Accepts the native or primitive props declared by its exported TypeScript type.

Accessibility

Name the group and associate each item with a visible label; preserve the supplied radio parts for keyboard navigation and checked state.
Arrow and Home/End navigation preserve Radix focus management and activate the focused radio even for immediate keydown/keyup pairs. Tab navigation does not change selection; disabled options are skipped.

States and appearance

uncheckedcheckedfocuseddisabledreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.