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