Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Toggles

Radio Buttons Field for React

A fieldset of three radio buttons for choosing a notification method.

Framework
UI library

One choice among a few visible options. A FieldSet with a label-style FieldLegend and a FieldDescription holds a Radio Group of Email, SMS and Push Notification, with Email selected by default.

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 the group keep a single method selected?

Email, SMS, and Push Notification share one RadioGroup, so choosing one clears the others. defaultValue is email, which starts the group on Email.

What is the Notification Method line?

FieldDescription under the caption reads Choose how you want to be notified. The caption is a FieldLegend with variant set to label, the quieter legend.

Where does the text for each method go?

Each choice is a Field with orientation set to horizontal, holding RadioGroupItem and a FieldLabel. font-normal on the label keeps the choice at normal weight.

What values do the three options use?

The value on each item is email, sms, or push. defaultValue on RadioGroup uses those same strings.

How wide is the group?

The block is capped with max-w-md. The caption, the description, and the three rows share that width.

Which keys move between the methods?

The keys are the radio group's own keys. Field does not add arrow-key behavior of its own. Space activates the focused control.

All 38 field examples