Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Radio Group examples · Layout

Horizontal Radio Group for React

A radio group with its three options in a single row, for a short choice that should not take vertical space.

Framework
UI library

Not every radio group needs to stack. Here the three options sit side by side, which suits two to four short labels like Yes, No, Maybe. The row wraps when it runs out of width, and Base UI keeps the same arrow-key behavior as a vertical group in React.

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 are the options placed in a row?

RadioGroup takes flex flex-row flex-wrap gap-4, which replaces its default grid. defaultValue is option-1.

How do I start on a different option?

Change defaultValue to option-2 or option-3, matching that item's value.

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.

What if the labels get too long for one row?

flex-wrap moves the options that do not fit onto the next line. For more than four options, or long labels, a vertical group reads faster.

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.

Do the arrow keys still move across a horizontal group?

Yes. Tab moves focus to the checked item, and the arrow keys move to the next or previous item and check it, in the order of the row.

All 9 radio group examples