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.

See below our Radio button component examples that you can use in your Tailwind CSS and React project. The examples comes in different styles and colors, so you can adapt it easily to your needs.

Radio Button Demo

Here's how to implement a Radio button component. It can be used for forms or other components.

import { Radio, Typography } from "@material-tailwind/react";

export function RadioDemo() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item id="html">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="html" className="text-foreground">
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item id="react">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="react" className="text-foreground">
          React
        </Typography>
      </div>
    </Radio>
  );
}
import { Radio, Typography } from "@material-tailwind/react";

export function RadioDemo() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item id="html">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="html" className="text-foreground">
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item id="react">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="react" className="text-foreground">
          React
        </Typography>
      </div>
    </Radio>
  );
}

Radio Button Colors

We provide different radio button colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the radio button color.

In the example below, we've showcased the different radio button colors that you can use in your project.

import { Radio } from "@material-tailwind/react";

export function RadioColors() {
  return (
    <div className="flex flex-col gap-4">
      <Radio color="primary" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="secondary" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="info" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="success" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="warning" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="error" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
    </div>
  );
}
import { Radio } from "@material-tailwind/react";

export function RadioColors() {
  return (
    <div className="flex flex-col gap-4">
      <Radio color="primary" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="secondary" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="info" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="success" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="warning" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
      <Radio color="error" orientation="horizontal">
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
        <Radio.Item>
          <Radio.Indicator />
        </Radio.Item>
      </Radio>
    </div>
  );
}

Radio Button with Custom Icon

You can customize and change the icon used for the radio button by using new icons inside the Radio.Indicator component. In the example below, we use the Star and StarSolid icons for checked and unchecked states.

To make it work, you need to use group-data-[checked=true] for the icons to show/hide based on the checkbox state.

import { Radio, Typography } from "@material-tailwind/react";
import { Check, Star, StarSolid } from "iconoir-react";

export function RadioWithCustomIcon() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item
          id="custom-icon-html"
          className="bg-transparent data-[checked=true]:bg-transparent"
        >
          <Radio.Indicator className="relative left-0 top-0 opacity-100">
            <Star className="absolute inset-0 h-5 w-5 text-primary opacity-100 group-data-[checked=true]:opacity-0" />
            <StarSolid className="absolute inset-0 h-5 w-5 text-primary opacity-0 group-data-[checked=true]:opacity-100" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-icon-html"
          className="text-foreground"
        >
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item
          id="custom-icon-react"
          className="bg-transparent data-[checked=true]:bg-transparent"
        >
          <Radio.Indicator className="relative left-0 top-0 opacity-100">
            <Star className="absolute inset-0 h-5 w-5 text-primary opacity-100 group-data-[checked=true]:opacity-0" />
            <StarSolid className="absolute inset-0 h-5 w-5 text-primary opacity-0 group-data-[checked=true]:opacity-100" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-icon-react"
          className="text-foreground"
        >
          React
        </Typography>
      </div>
    </Radio>
  );
}
import { Radio, Typography } from "@material-tailwind/react";
import { Check, Star, StarSolid } from "iconoir-react";

export function RadioWithCustomIcon() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item
          id="custom-icon-html"
          className="bg-transparent data-[checked=true]:bg-transparent"
        >
          <Radio.Indicator className="relative left-0 top-0 opacity-100">
            <Star className="absolute inset-0 h-5 w-5 text-primary opacity-100 group-data-[checked=true]:opacity-0" />
            <StarSolid className="absolute inset-0 h-5 w-5 text-primary opacity-0 group-data-[checked=true]:opacity-100" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-icon-html"
          className="text-foreground"
        >
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item
          id="custom-icon-react"
          className="bg-transparent data-[checked=true]:bg-transparent"
        >
          <Radio.Indicator className="relative left-0 top-0 opacity-100">
            <Star className="absolute inset-0 h-5 w-5 text-primary opacity-100 group-data-[checked=true]:opacity-0" />
            <StarSolid className="absolute inset-0 h-5 w-5 text-primary opacity-0 group-data-[checked=true]:opacity-100" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-icon-react"
          className="text-foreground"
        >
          React
        </Typography>
      </div>
    </Radio>
  );
}

Disabled Radio Button

You can disable the radio button by adding the disabled prop. This will prevent the user from interacting with the radio button.

import { Radio, Typography } from "@material-tailwind/react";

export function DisabledRadio() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item disabled id="html">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="html" className="text-foreground">
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item disabled id="react">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="react" className="text-foreground">
          React
        </Typography>
      </div>
    </Radio>
  );
}
import { Radio, Typography } from "@material-tailwind/react";

export function DisabledRadio() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item disabled id="html">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="html" className="text-foreground">
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item disabled id="react">
          <Radio.Indicator />
        </Radio.Item>
        <Typography as="label" htmlFor="react" className="text-foreground">
          React
        </Typography>
      </div>
    </Radio>
  );
}

Radio Button with Link

Use the example below to create a Radio button with a link to the terms and conditions inside it's label.

import { Radio, Typography } from "@material-tailwind/react";

export function RadioWithLink() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item id="radio-link-agree">
          <Radio.Indicator />
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="radio-link-agree"
          className="flex gap-1 text-foreground"
        >
          I agree with the
          <Typography as="a" href="#" color="primary">
            terms and conditions
          </Typography>
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item id="radio-link-disagree">
          <Radio.Indicator />
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="radio-link-disagree"
          className="flex gap-1 text-foreground"
        >
          I disagree with the
          <Typography as="a" href="#" color="primary">
            terms and conditions
          </Typography>
        </Typography>
      </div>
    </Radio>
  );
}
import { Radio, Typography } from "@material-tailwind/react";

export function RadioWithLink() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item id="radio-link-agree">
          <Radio.Indicator />
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="radio-link-agree"
          className="flex gap-1 text-foreground"
        >
          I agree with the
          <Typography as="a" href="#" color="primary">
            terms and conditions
          </Typography>
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item id="radio-link-disagree">
          <Radio.Indicator />
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="radio-link-disagree"
          className="flex gap-1 text-foreground"
        >
          I disagree with the
          <Typography as="a" href="#" color="primary">
            terms and conditions
          </Typography>
        </Typography>
      </div>
    </Radio>
  );
}

Radio Button With Description

Use the example below to create a Radio button component with a title and description as it's label to provide more information about the radio button action.

import { Radio, Typography } from "@material-tailwind/react";

export function RadioWithDescription() {
  return (
    <Radio className="gap-4">
      <div className="flex gap-2">
        <Radio.Item id="radio-description-html">
          <Radio.Indicator />
        </Radio.Item>
        <label htmlFor="radio-description-html" className="-translate-y-1">
          <Typography color="default" className="font-semibold">
            HTML Version
          </Typography>
          <Typography type="small" className="text-foreground">
            @material-tailwind/html, packed with rich components and widgets.
          </Typography>
        </label>
      </div>
      <div className="flex gap-2">
        <Radio.Item id="radio-description-react">
          <Radio.Indicator />
        </Radio.Item>
        <label htmlFor="radio-description-react" className="-translate-y-1">
          <Typography color="default" className="font-semibold">
            React Version
          </Typography>
          <Typography type="small" className="text-foreground">
            @material-tailwind/react, packed with rich components and widgets.
          </Typography>
        </label>
      </div>
    </Radio>
  );
}
import { Radio, Typography } from "@material-tailwind/react";

export function RadioWithDescription() {
  return (
    <Radio className="gap-4">
      <div className="flex gap-2">
        <Radio.Item id="radio-description-html">
          <Radio.Indicator />
        </Radio.Item>
        <label htmlFor="radio-description-html" className="-translate-y-1">
          <Typography color="default" className="font-semibold">
            HTML Version
          </Typography>
          <Typography type="small" className="text-foreground">
            @material-tailwind/html, packed with rich components and widgets.
          </Typography>
        </label>
      </div>
      <div className="flex gap-2">
        <Radio.Item id="radio-description-react">
          <Radio.Indicator />
        </Radio.Item>
        <label htmlFor="radio-description-react" className="-translate-y-1">
          <Typography color="default" className="font-semibold">
            React Version
          </Typography>
          <Typography type="small" className="text-foreground">
            @material-tailwind/react, packed with rich components and widgets.
          </Typography>
        </label>
      </div>
    </Radio>
  );
}

Radio Button Custom Styles

You can use className prop to customize the Radio button component style. In the example below, we make the radio button square with a check icon.

import { Radio, Typography } from "@material-tailwind/react";
import { Check } from "iconoir-react";

export function CustomRadio() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item id="custom-html" className="rounded">
          <Radio.Indicator>
            <Check className="h-4 w-4 stroke-2" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-html"
          className="text-foreground"
        >
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item id="custom-react" className="rounded">
          <Radio.Indicator>
            <Check className="h-4 w-4 stroke-2" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-react"
          className="text-foreground"
        >
          React
        </Typography>
      </div>
    </Radio>
  );
}
import { Radio, Typography } from "@material-tailwind/react";
import { Check } from "iconoir-react";

export function CustomRadio() {
  return (
    <Radio>
      <div className="flex items-center gap-2">
        <Radio.Item id="custom-html" className="rounded">
          <Radio.Indicator>
            <Check className="h-4 w-4 stroke-2" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-html"
          className="text-foreground"
        >
          HTML
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Radio.Item id="custom-react" className="rounded">
          <Radio.Indicator>
            <Check className="h-4 w-4 stroke-2" />
          </Radio.Indicator>
        </Radio.Item>
        <Typography
          as="label"
          htmlFor="custom-react"
          className="text-foreground"
        >
          React
        </Typography>
      </div>
    </Radio>
  );
}