Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Radio Group examples · Standard

Basic Radio Group for React

A vertical radio group of three options, the first one selected, for a single choice in a form or settings page.

Framework
UI library

The plainest single choice: three options stacked, one checked, and picking another clears it. Each option's text is its label, so clicking the words checks the radio. In React, Base UI handles the arrow keys and the checked state. Use it for a preference, a survey question, or any short list where exactly one answer counts.

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 does Option 1 start selected?

RadioGroup sets defaultValue to option-1, which matches the first item's value. Leave defaultValue off when nothing should start checked.

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.

Why does clicking Option 2 check 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.

How do I change the space between options?

RadioGroup lays the options out in a grid with a gap from the style. Pass a gap-* class on RadioGroup when you want more or less space.

How do I submit the choice with a form?

This demo does not set name. Add name on RadioGroup and the checked item's value submits under that name, not the visible label. An unchecked group submits nothing.

Can I move between these options from the keyboard?

Yes. Tab moves focus to the checked item, or to the first item when none is checked. The arrow keys move to another item and check it, and Space checks the item that has focus.

All 9 radio group examples