React Radio Group - RadioGroup in Grid
A multi-column grid layout for radio options, organizing choices into compact two-column or multi-column arrangements
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/radio-group-layout-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/radio-group-layout-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/radio-group-layout-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/radio-group-layout-3.jsonRelated patterns you will also like
Vertical RadioGroup
Single-column vertical radio layout
Horizontal RadioGroup
Single-row horizontal radio layout
RadioGroup with Cards
Card-based radio selection in grid
Checkbox Grid
Multi-select grid alternative
RadioGroup in Form
Form-integrated radio with validation
Filter Panel
Multi-filter interface with radio options
Questions you might have
React Radio Group - RadioGroup with Cards
Radio options styled as clickable card containers with borders, shadows, and hover states for premium selection interfaces
React Radio Group - Basic RadioGroup
A simple vertical radio group with basic label pairing for single-choice selection in forms and settings