Radio Input

React Radio Input components are used when users need to select one option from a set. They are commonly used in forms for plan selection, preferences, settings, and configuration choices.

This Radio Input component is built with React and styled using Tailwind CSS. It uses native radio inputs for predictable behavior, supports labels, sizes, and works in both controlled and uncontrolled forms.

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

• Uses native <input type="radio"> with screen reader support (visually hidden)
• Label is properly associated with input via wrapping or htmlFor
• Radio buttons with the same name are automatically grouped
• Keyboard accessible with arrow key navigation within groups
• Focus ring provides clear visual feedback
• Disabled state is communicated via aria-disabled on the label
• Hover states are disabled when radio is disabled