Tailwind CSS Radio Button - React

Our Tailwind CSS radio button component will let your users choose only one of a predefined set of mutually exclusive options. Radio buttons should be used instead of checkboxes if only one item can be selected from a list.

Use the following example to create simple Radio buttons for your projects.

HTML

React

import { Radio } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex gap-10">
      <Radio id="html" name="type" label="HTML" />
      <Radio id="react" name="type" label="React" defaultChecked />
    </div>
  );
}

Radio Button Colors

The Radio component comes with 19 different colors that you can change it using the color prop.

import { Radio } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex w-max gap-4">
      <Radio id="blue" name="color" color="blue" defaultChecked />
      <Radio id="red" name="color" color="red" />
      <Radio id="green" name="color" color="green" />
      <Radio id="amber" name="color" color="amber" />
      <Radio id="teal" name="color" color="teal" />
      <Radio id="indigo" name="color" color="indigo" />
      <Radio id="purple" name="color" color="purple" />
      <Radio id="pink" name="color" color="pink" />
    </div>
  );
}

Radio Button Custom Icon

You can add a custom icon for the Radio button component when it's checked by passing the icon prop to the Radio button component.

HTML

React

import { Fragment } from "react";
import { Radio } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Fragment>
      <Radio
        id="html"
        name="type"
        label="HTML"
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-3 w-3"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fillRule="evenodd"
              d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
              clipRule="evenodd"
            />
          </svg>
        }
      />
      <Radio
        id="react"
        name="type"
        label="React"
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-3 w-3"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fillRule="evenodd"
              d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
              clipRule="evenodd"
            />
          </svg>
        }
        defaultChecked
      />
    </Fragment>
  );
}

Radio Button Ripple Effect

You can turn on/off the ripple effect for the Radio button component using the ripple prop.

Ripple Effect On

Ripple Effect Off

import { Radio } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex gap-10">
      <Radio
        id="ripple-on"
        name="type"
        label="Ripple Effect On"
        ripple={true}
      />
      <Radio
        id="ripple-off"
        name="type"
        label="Ripple Effect Off"
        ripple={false}
      />
    </div>
  );
}

Props

Learn more about props definition and types of radio button component.

Theme

Learn how to customize the theme and styles for radio button component.

progress bar

select