Use our Tailwind CSS checkbox to allow the user to select one or more items from a set.
You can use a checkbox for:
• Selecting one or more options from a list • Presenting a list containing sub-selections • Turning an item on/off in a desktop environment (If you have a single option, avoid using a checkbox and use an on/off switch instead)
See below our simple checkbox example that you can use in your React and Tailwind CSS projects. The example also comes in different colors, so you can adapt it easily to your needs.
import { Checkbox } from "@material-tailwind/react";
export default function Example() {
return <Checkbox defaultChecked />;
}
The checkbox 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 { Checkbox } from "@material-tailwind/react";
export default function Colors() {
return (
<div className="flex gap-4 w-max">
<Checkbox color="blue" defaultChecked />
<Checkbox color="red" defaultChecked />
<Checkbox color="green" defaultChecked />
<Checkbox color="amber" defaultChecked />
<Checkbox color="teal" defaultChecked />
<Checkbox color="indigo" defaultChecked />
<Checkbox color="purple" defaultChecked />
<Checkbox color="pink" defaultChecked />
</div>
);
}
The following props are available for the checkbox component. These are the custom props that come with we've added for the checkbox component and you can use all the other native input props as well.
Attribute | Type | Description | Default |
---|---|---|---|
color | Color | Change checkbox color | blue |
label | string | Add label for checkbox | '' |
icon | node | Change checked icon for checkbox | undefined |
ripple | boolean | Add ripple effect for checkbox | true |
className | string | Add custom className for checkbox | '' |
containerProps | Object | Add custom props for checkbox container | undefined |
labelProps | Object | Add custom props for checkbox 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";