Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Radio Group examples · Layout

Radio Group in Grid for React

Six radio options in a two-column grid, for a longer single choice that should not run down the page.

Framework
UI library

Six options stacked in one column take a lot of height. This group sets two grid columns, so the same six choices fill three rows. Use it for categories, filters, or settings with many mutually exclusive options, and switch the column count by breakpoint if the labels grow. In React, Base UI still treats it as one group.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do I get two columns?

RadioGroup is already a grid, and grid-cols-2 gives it two columns. Six items fill three rows: Option 1 beside Option 2, then 3 beside 4, then 5 beside 6. Change grid-cols-2 for another count, such as grid-cols-1 sm:grid-cols-3.

Which option starts selected?

defaultValue is grid-1, the same string as the first item's value. The values run from grid-1 through grid-6 and come from a list at the top of the file.

Why does the label text select the radio?

The text is the item's label, so clicking it checks that item. Each RadioGroupItem has an id, and FieldLabel points at it with htmlFor.

Which way do the arrow keys move?

They follow the items in source order: Option 1, Option 2, Option 3, and so on. That is across the row, then the next row. Space checks the focused item.

How do I change the gap?

The group uses gap-x-8 between the columns and gap-y-4 between the rows. Change them on RadioGroup.

How do I control the selected value?

This demo uses defaultValue, so the group stores the choice. Pass value, and onValueChange receives the next string.

All 9 radio group examples