Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
title description navigation related github prev next
Tailwind CSS Checkbox for React - Material Tailwind
Customise your web projects with our beautiful checkbox component for Tailwind CSS and React using Material Design guidelines.
checkbox
checkbox-colors
checkbox-with-label
checkbox-custom-icon
checkbox-ripple-effect
props
theme
title route description
Props
props/checkbox
Learn more about props definition and types of checkbox component.
title route description
Theme
theme/checkbox
Learn how to customize the theme and styles for checkbox component.
checkbox
card
chip

Tailwind CSS Checkbox - React

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 />;
}

Checkbox Colors

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 w-max gap-4">
      <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>
  );
}

Checkbox with Label

You can add a label for the Checkbox component by passing the label prop to the Checkbox component.

import { Checkbox } from "@material-tailwind/react";

export default function Example() {
  return <Checkbox label="Remember Me" />;
}

Checkbox Custom Icon

You can add a custom icon for the Checkbox component when it's checked by passing the icon prop to the Checkbox component.

} defaultChecked />
import { Checkbox } from "@material-tailwind/react";

export default function Example() {
  return (
    <Checkbox
      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
    />
  );
}

Checkbox Ripple Effect

You can turn on/off the ripple effect for the Checkbox component using the ripple prop.

import { Fragment } from "react";
import { Checkbox } from "@material-tailwind/react";

export default function Example() {
  return (
    <Fragment>
      <Checkbox id="ripple-on" label="Ripple Effect On" ripple={true} />
      <Checkbox id="ripple-off" label="Ripple Effect Off" ripple={false} />
    </Fragment>
  );
}