Radio

A radio button component for selecting a single option from a set

Option 1

Option 2

Disabled option

Installation

The Radio component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Radio component into your React component.

import { Radio } from 'reacui';

Basic Usage

The Radio component provides a styled radio button input.

Option 1

Option 2

Option 3

<div className="space-y-2">
  <div className="flex items-center">
    <Radio id="radio-option-1" name="radio-group-basic" defaultChecked />
    <label htmlFor="radio-option-1" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
      Option 1
    </label>
  </div>
  
  <div className="flex items-center">
    <Radio id="radio-option-2" name="radio-group-basic" />
    <label htmlFor="radio-option-2" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
      Option 2
    </label>
  </div>
  
  <div className="flex items-center">
    <Radio id="radio-option-3" name="radio-group-basic" />
    <label htmlFor="radio-option-3" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
      Option 3
    </label>
  </div>
</div>

Radio Group

Group radio buttons together to represent a set of related options.

Small

Medium

Large

<div className="space-y-2">
  <div className="flex items-center">
    <Radio id="small" name="size" />
    <label htmlFor="small" className="ml-2 block text-sm text-gray-900 dark:text-white">
      Small
    </label>
  </div>
  
  <div className="flex items-center">
    <Radio id="medium" name="size" defaultChecked />
    <label htmlFor="medium" className="ml-2 block text-sm text-gray-900 dark:text-white">
      Medium
    </label>
  </div>
  
  <div className="flex items-center">
    <Radio id="large" name="size" />
    <label htmlFor="large" className="ml-2 block text-sm text-gray-900 dark:text-white">
      Large
    </label>
  </div>
</div>

Radio States

Radio buttons can be in different states such as default, checked, or disabled.

Default

Secondary

Disabled

<div className="space-y-4">
  <div className="flex items-center">
    <Radio id="default-radio-1" name="default-radio" defaultChecked />
    <label htmlFor="default-radio-1" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
      Default
    </label>
  </div>
  
  <div className="flex items-center">
    <Radio id="default-radio-2" name="default-radio" />
    <label htmlFor="default-radio-2" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
      Secondary
    </label>
  </div>
  
  <div className="flex items-center">
    <Radio id="default-radio-3" name="default-radio" disabled />
    <label htmlFor="default-radio-3" className="ml-2 block text-sm font-medium text-gray-400 dark:text-gray-500">
      Disabled
    </label>
  </div>
</div>

In Forms

Radio buttons are commonly used in forms to allow users to select from predefined options.

Notifications

How would you like to receive notifications?

Push notification

SMS

<div className="space-y-4">
  <fieldset>
    <legend className="text-base font-medium text-gray-900 dark:text-white mb-2">
      Notifications
    </legend>
    <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
      How would you like to receive notifications?
    </p>
    <div className="space-y-2">
      <div className="flex items-center">
        <Radio id="push" name="notification-method" defaultChecked />
        <label htmlFor="push" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
          Push notification
        </label>
      </div>
      <div className="flex items-center">
        <Radio id="sms" name="notification-method" />
        <label htmlFor="sms" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
          SMS
        </label>
      </div>
      <div className="flex items-center">
        <Radio id="email" name="notification-method" />
        <label htmlFor="email" className="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
          Email
        </label>
      </div>
    </div>
  </fieldset>
</div>

API Reference

The following props are available for the Radio component.

Prop	Type	Default	Description
id	string	-	The id attribute of the radio button
name	string	-	The name attribute of the radio button, used to group related options
defaultChecked	boolean	false	Whether the radio button is checked by default
checked	boolean	-	Controls the checked state of the radio button
disabled	boolean	false	Whether the radio button is disabled
onChange	function	-	Callback function that is triggered when the radio button state changes