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 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 w-max gap-4">
<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>
);
}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.
import { Fragment } from "react";
import { Radio } from "@material-tailwind/react";
export default function Example() {
return (
<Fragment>
<Radio
id="html"
name="type"
label="HTML"
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3 w-3"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clipRule="evenodd"
/>
</svg>
}
/>
<Radio
id="react"
name="type"
label="React"
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3 w-3"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clipRule="evenodd"
/>
</svg>
}
defaultChecked
/>
</Fragment>
);
}You can turn on/off the ripple effect for the Radio button component using the ripple prop.
import { Fragment } from "react";
import { Checkbox } from "@material-tailwind/react";
export default function Example() {
return (
<div className="flex gap-10">
<Radio
id="ripple-on"
name="type"
label="Ripple Effect On"
ripple={true}
/>
<Radio
id="ripple-off"
name="type"
label="Ripple Effect Off"
ripple={false}
/>
</div>
);
}