Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Radio Buttons Field for React

Notification Method offers Email, SMS, and Push Notification. Email starts selected, and only one method can stay on.

Notification Method is the caption. Under it: Choose how you want to be notified. The rows are Email, SMS, and Push Notification. Email starts selected.

It fits one choice among a few visible options. A compact segmented control is a Segment Group. On React, Base UI does not deliver the message.

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

Anatomy

Field anatomy: root, label, input, description, error

Usage

<FieldSet className="w-full max-w-md">
  <FieldLegend variant="label">Notification Method</FieldLegend>
  <FieldDescription>Choose how you want to be notified.</FieldDescription>
  <RadioGroup defaultValue="email">
    <Field orientation="horizontal">
      <RadioGroupItem id="notify-email" value="email" />
      <FieldLabel className="font-normal" htmlFor="notify-email">
        Email
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem id="notify-sms" value="sms" />
      <FieldLabel className="font-normal" htmlFor="notify-sms">
        SMS
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem id="notify-push" value="push" />
      <FieldLabel className="font-normal" htmlFor="notify-push">
        Push Notification
      </FieldLabel>
    </Field>
  </RadioGroup>
</FieldSet>

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.

API Reference

Field

Sets variant="label", orientation="horizontal", htmlFor="notify-email", htmlFor="notify-sms" and htmlFor="notify-push". The rest is on the Field page.

Radio Group

Sets defaultValue="email", id="notify-email", value="email", id="notify-sms", value="sms" and id="notify-push". The rest is on the Radio Group page.

All 38 field examples