Radio Input

The React Radio button component lets users select one option from a radio group. It is commonly used in forms for things like plans, settings, or preferences.

It works by grouping options so only one can be selected at a time. For example, users can choose between Basic, Pro, or Enterprise plans.

Built with React and styled using Tailwind CSS. It uses native radio inputs for reliable behavior and supports labels, sizes, and form control states.

Installation

npx @tailgrids/cli add radio-input

Usage

Import the component and the Label component, then wrap the RadioInput within the Label for proper association.

import { Label } from "@/registry/core/label";
import { RadioInput } from "@/registry/core/radio-input";

export default function RadioWithLabelPreview() {
  return (
    <div className="flex flex-col gap-3">
      <Label className="group flex cursor-pointer items-center gap-3 select-none">
        <RadioInput name="plan" value="basic" />
        <span>Basic Plan</span>
      </Label>
      <Label className="group flex cursor-pointer items-center gap-3 select-none">
        <RadioInput name="plan" value="pro" />
        <span>Pro Plan</span>
      </Label>
      <Label className="group flex cursor-pointer items-center gap-3 select-none">
        <RadioInput name="plan" value="enterprise" />
        <span>Enterprise Plan</span>
      </Label>
    </div>
  );
}

Examples

Sizes

The Radio Input component supports two predefined sizes: sm and md.

Without Label

Note: Use this only when the label is provided through surrounding context.

Controlled

Handle state manually with the checked and onChange props.

Disabled

Use the disabled prop to prevent interaction.

Default Checked

Use defaultChecked to set the initial state.

Radio Group

Use semantic grouping for related options.

Custom Radio

Create custom radio inputs with tailwind css utility classes.

API Reference

RadioInput

Accessibility

• Native behavior: Uses a native <input type="radio">, so it works with screen readers and form semantics by default.
• Group selection: Radio inputs with the same name are grouped, allowing users to select only one option at a time.
• Label association: Wrap the input with a Label or use htmlFor to connect them. This allows users to click the label to select the option.
• Keyboard support: Users can navigate between options using Arrow keys and select an option using the keyboard.
• Focus management: The selected radio can receive focus, and focus styles help users see which option is active.
• Disabled state: Disabled radios cannot be selected and are skipped during interaction.