Radio Group

Group of radio buttons for selecting a single option from multiple choices

Preview

DefaultComfortableCompact

npx shadcn@latest add @cubby-ui/radio-group


import { RadioGroup, RadioGroupItem } from "@/components/ui/cubby-ui/radio-group";


<RadioGroup>
  <RadioGroupItem />
</RadioGroup>

Manage radio group state externally.

LightDarkSystem

Selected: comfortable

Add descriptive text to each radio option.

Free Plan

Basic features for personal use

Standard Plan

Advanced features for teams

Premium Plan

All features with priority support

Disable specific radio options within the group.

Available OptionSelected OptionDisabled Option

Use Field and Fieldset with the render prop. See the Forms guide for more patterns.

Popover

Floating content that appears relative to a trigger element

Scroll Area

Custom scrollable container with styled scrollbars