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 group radios using the same name.

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

export default function RadioWithLabelPreview() {
  return (
    <div>
      <RadioInput name="plan" label="Basic Plan" value="basic" />
      <RadioInput name="plan" label="Pro Plan" value="pro" />
      <RadioInput name="plan" label="Enterprise Plan" value="enterprise" />
    </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

Extends input element props (excluding size).

Accessibility

• Uses native <input type="radio"> with screen reader support
• Automatically generates unique IDs if not provided
• Label is properly associated with input via 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