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.

Radio Button Colors

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

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.

Radio Button Ripple Effect

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

Radio Button Disabled

You can make a radio button disable by passing the disabled prop to the Radio component.

The label prop for the the radio button can accept dom elements and because of that you can put links or any other dom elements you like to have with your radio button label.

Radio Button with Description

Use the example below for a more complex usage of radio button with label that contains some description.

Radio Button Vertical List Group

Use the example below for a vertical list of radio buttons.

Radio Button Horizontal List Group

Use the example below for a horizontal list of radio buttons.

Radio Button Custom Styles

You can use the className prop to add custom styles to the Radio component.

Radio Button Props

The following props are available for radio button component. These are the custom props that we've added for the radio button component and you can use all the other native input props as well.

colorColorChange radio button colorgray
labelnodeAdd label for radio buttonundefined
iconnodeChange checked icon for radio buttonundefined
ripplebooleanAdd ripple effect for radio buttontrue
classNamestringAdd custom className for radio button''
disabledbooleanMakes the radio button disabledfalse
containerPropsobjectAdd custom props for radio button containerundefined
labelPropsobjectAdd custom props for radio button labelundefined
iconPropsobjectAdd custom props for radio button iconundefined
inputRefrefAdd reference for input element.undefined

For TypeScript Only

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

Types - Color

type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

Radio Button Theme

Learn how to customize the theme and styles for radio button component, the theme object for radio button component has three main objects:

A. The defaultProps object for setting up the default value for props of radio button component.
B. The valid object for customizing the valid values for radio button component props.
C. The styles object for customizing the theme and styles of radio button component.

You can customize the theme and styles of radio button component by adding Tailwind CSS classes as key paired values for objects.

Radio Button Theme Object Type

interface RadioStylesType {
  defaultProps: {
    color: string;
    label: string;
    icon: node;
    ripple: boolean;
    className: string;
    disabled: boolean;
    containerProps: object;
    labelProps: object;
    iconProps: object;
  valid: {
    colors: string[];
  styles: {
    base: {
      root: object;
      container: object;
      input: object;
      label: object;
      icon: object;
      disabled: object;
    colors: object;

For TypeScript Only

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

Radio Button Theme Customization

const theme = {
  radio: {
    defaultProps: {
      color: "blue",
      label: undefined,
      icon: undefined,
      ripple: true,
      className: "",
      disabled: false,
      containerProps: undefined,
      labelProps: undefined,
      iconProps: undefined,
    valid: {
      colors: [
    styles: {
      base: {
        root: {
          display: "inline-flex",
          alignItems: "items-center",
        container: {
          position: "relative",
          display: "flex",
          alignItems: "items-center",
          cursor: "cursor-pointer",
          p: "p-3",
          borderRadius: "rounded-full",
        input: {
          peer: "peer",
          position: "relative",
          appearance: "appearance-none",
          width: "w-5",
          height: "h-5",
          borderWidth: "border",
          borderRadius: "rounded-full",
          borderColor: "border-blue-gray-200",
          cursor: "cursor-pointer",
          transition: "transition-all",
          before: {
            content: "before:content['']",
            display: "before:block",
            bg: "before:bg-blue-gray-500",
            width: "before:w-12",
            height: "before:h-12",
            borderRadius: "before:rounded-full",
            position: "before:absolute",
            top: "before:top-2/4",
            left: "before:left-2/4",
            transform: "before:-translate-y-2/4 before:-translate-x-2/4",
            opacity: "before:opacity-0 hover:before:opacity-10",
            transition: "before:transition-opacity",
        label: {
          color: "text-gray-700",
          fontWeight: "font-light",
          userSelect: "select-none",
          cursor: "cursor-pointer",
          mt: "mt-px",
        icon: {
          position: "absolute",
          top: "top-2/4",
          left: "left-2/4",
          translate: "-translate-y-2/4 -translate-x-2/4",
          pointerEvents: "pointer-events-none",
          opacity: "opacity-0 peer-checked:opacity-100",
          transition: "transition-opacity",
        disabled: {
          opacity: "opacity-50",
          pointerEvents: "pointer-events-none",
      colors: {
        "blue-gray": {
          color: "text-blue-gray-500",
          border: "checked:border-blue-gray-500",
          before: "checked:before:bg-blue-gray-500",
        gray: {
          color: "text-gray-500",
          border: "checked:border-gray-500",
          before: "checked:before:bg-gray-500",
        brown: {
          color: "text-brown-500",
          border: "checked:border-brown-500",
          before: "checked:before:bg-brown-500",
        "deep-orange": {
          color: "text-deep-orange-500",
          border: "checked:border-deep-orange-500",
          before: "checked:before:bg-deep-orange-500",
        orange: {
          color: "text-orange-500",
          border: "checked:border-orange-500",
          before: "checked:before:bg-orange-500",
        amber: {
          color: "text-amber-500",
          border: "checked:border-amber-500",
          before: "checked:before:bg-amber-500",
        yellow: {
          color: "text-yellow-500",
          border: "checked:border-yellow-500",
          before: "checked:before:bg-yellow-500",
        lime: {
          color: "text-lime-500",
          border: "checked:border-lime-500",
          before: "checked:before:bg-lime-500",
        "light-green": {
          color: "text-light-green-500",
          border: "checked:border-light-green-500",
          before: "checked:before:bg-light-green-500",
        green: {
          color: "text-green-500",
          border: "checked:border-green-500",
          before: "checked:before:bg-green-500",
        teal: {
          color: "text-teal-500",
          border: "checked:border-teal-500",
          before: "checked:before:bg-teal-500",
        cyan: {
          color: "text-cyan-500",
          border: "checked:border-cyan-500",
          before: "checked:before:bg-cyan-500",
        "light-blue": {
          color: "text-light-blue-500",
          border: "checked:border-light-blue-500",
          before: "checked:before:bg-light-blue-500",
        blue: {
          color: "text-blue-500",
          border: "checked:border-blue-500",
          before: "checked:before:bg-blue-500",
        indigo: {
          color: "text-indigo-500",
          border: "checked:border-indigo-500",
          before: "checked:before:bg-indigo-500",
        "deep-purple": {
          color: "text-deep-purple-500",
          border: "checked:border-deep-purple-500",
          before: "checked:before:bg-deep-purple-500",
        purple: {
          color: "text-purple-500",
          border: "checked:border-purple-500",
          before: "checked:before:bg-purple-500",
        pink: {
          color: "text-pink-500",
          border: "checked:border-pink-500",
          before: "checked:before:bg-pink-500",
        red: {
          color: "text-red-500",
          border: "checked:border-red-500",
          before: "checked:before:bg-red-500",