Skip to content

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

Free

Radio Group in Form for React

Notify me about... lists All new messages, Direct messages and mentions, and Nothing. No radio starts selected, and Submit sits under the group.

Notify me about... lists All new messages, Direct messages and mentions, and Nothing. No radio starts selected. A helper line sits under the options, and the button says Submit.

Use a radio group in a form when one option is required. A Select hides the options until it is opened. On React, Base UI does not validate the 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

Anatomy

Radio Group anatomy: root, label, item control, indicator, item, item text

Usage

<form
  className="flex w-full max-w-md flex-col gap-6"
  onSubmit={handleSubmit}
>
  <Field invalid={invalid}>
    <FieldSet>
      <FieldLegend variant="label">Notify me about...</FieldLegend>
      <RadioGroup
        name="type"
        onValueChange={handleValueChange}
        value={value}
      >
        {options.map((option) => (
          <Field
            invalid={invalid}
            key={option.value}
            orientation="horizontal"
          >
            <RadioGroupItem
              id={`notify-${option.value}`}
              value={option.value}
            />
            <FieldLabel htmlFor={`notify-${option.value}`}>
              {option.label}
            </FieldLabel>
          </Field>
        ))}
      </RadioGroup>
      <FieldDescription>
        Choose how you want to be notified about new activity.
      </FieldDescription>
{/* The rest of the file is under Installation. */}

FAQ

What does the form require?

One of the three options. On submit the handler looks the value up in the options list. With no match it sets the field invalid, and FieldError shows You need to select a notification type.

How is the radio group connected to the state?

The group is controlled, and picking an option stores it and clears the error. It also has name set to type, so a real form submit sends the value. value is the state, and onValueChange receives the next string.

What are the three values?

all is All new messages, mentions is Direct messages and mentions, and none is Nothing. They come from a list at the top of the file.

How does the invalid state look?

The outer Field and each option's Field get invalid, so the legend and the radios turn the destructive color, and FieldError appears under the description.

What happens on a valid submit?

The handler prevents the page reload and shows You selected: with the option's label next to the button. Replace that line with your own save or request.

Can I pick an option from the keyboard?

Yes. Tab moves focus to the first item, since none is checked. The arrow keys move to another item and check it, Space checks the focused item, and Enter on the button submits.

API Reference

Field

Sets invalid={invalid}, variant="label", orientation="horizontal", htmlFor, notify- and option. The rest is on the Field page.

Radio Group

Sets name="type", onValueChange={handleValueChange}, value={value}, id, notify- and option. The rest is on the Radio Group page.

Button

Sets type="submit". The rest is on the Button page.

All 9 radio group examples