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 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.

Attribute	Type	Description	Default
`color`	Color	Change radio button color	`blue`
`label`	`string`	Add label for radio button	`''`
`icon`	`node`	Change checked icon for radio button	`undefined`
`ripple`	`boolean`	Add ripple effect for radio button	`true`
`className`	`string`	Add custom className for radio button	`''`
`containerProps`	`Object`	Add custom props for radio button container	`undefined`
`labelProps`	`Object`	Add custom props for radio button label	`undefined`

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";

progress

select