RadioGroup in Grid

Ever tried fitting 6 or more radio options into a form? Vertical stacking eats up valuable screen space fast. This React radio group uses CSS Grid with grid-cols-2 to arrange options in two columns, cutting vertical height in half while maintaining readability. Built with shadcn/ui and Radix UI, the pattern keeps consistent gap-4 spacing and works beautifully with responsive utilities—go single-column on mobile, two-column on tablets, three-column on desktop. Perfect for category selection, filter panels, or settings pages with many mutually exclusive options.

RadioGroup in Grid preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/radio-group-layout-3.json

npx shadcn@latest add https://www.shadcn.io/r/radio-group-layout-3.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/radio-group-layout-3.json

bunx shadcn@latest add https://www.shadcn.io/r/radio-group-layout-3.json

Related Components

FAQ