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.


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 button component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

import { Radio } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex gap-4 w-max">
      <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>
  );
}

Props

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

AttributeTypeDescriptionDefault
colorColorChange radio button colorblue
labelstringAdd label for radio button''
iconnodeChange checked icon for radio buttonundefined
ripplebooleanAdd ripple effect for radio buttontrue
classNamestringAdd custom className for radio button''
containerPropsObjectAdd custom props for radio button containerundefined
labelPropsObjectAdd custom props for radio button labelundefined

Types

type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";
Edit this page on Github