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.

Checkbox Colors

The Checkbox component comes with 19 different colors that you can change it using the color prop.

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.

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.

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.

Ripple Effect On

Ripple Effect Off

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

Disabled Checkbox

You can make a checkbox disable by passing the disabled prop to the Checkbox component.

Remember Me

Checkbox with Link

The label prop for the the checkbox can accept dom elements and because of that you can put links or any other dom elements you like to have with your checkbox label.

I agree with the terms and conditions.

import { Checkbox, Typography } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Checkbox label={
      <Typography color="blue-gray" className="font-medium flex">I agree with the
        <Typography as="a" href="#" color="blue" className="font-medium hover:text-blue-700 transition-colors">
          &nbsp;terms and conditions
        </Typography>.
      </Typography>
    } />
  );
}

Checkbox with Description

Use the example below for a more complex usage of checkbox with label that contains some description.

Remember Me

You'll be able to login without password for 24 hours.

import { Checkbox, Typography } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Checkbox 
      label={
        <div>
          <Typography color="blue-gray" className="font-medium">Remember Me</Typography>
          <Typography variant="small" color="gray" className="font-normal">
            You'll be able to login without password for 24 hours.
          </Typography>
        </div>
      }
      containerProps={{
        className: "-mt-5"
      }}
    />
  );
}

Checkbox Vertical List Group

Use the example below for a vertical list of checkboxes.

import {
  Checkbox,
  Card,
  List,
  ListItem,
  ListItemPrefix,
  Typography
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card>
      <List>
        <ListItem className="p-0">
          <label htmlFor="vertical-list-react" className="px-3 py-2 flex items-center w-full cursor-pointer">
            <ListItemPrefix className="mr-3">
              <Checkbox 
                id="vertical-list-react" 
                ripple={false} 
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0"
                }}
              />
            </ListItemPrefix>
            <Typography color="blue-gray" className="font-medium">React.js</Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label htmlFor="vertical-list-vue" className="px-3 py-2 flex items-center w-full cursor-pointer">
            <ListItemPrefix className="mr-3">
              <Checkbox 
                id="vertical-list-vue" 
                ripple={false} 
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0"
                }}
              />
            </ListItemPrefix>
            <Typography color="blue-gray" className="font-medium">Vue.js</Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label htmlFor="vertical-list-svelte" className="px-3 py-2 flex items-center w-full cursor-pointer">
            <ListItemPrefix className="mr-3">
              <Checkbox 
                id="vertical-list-svelte" 
                ripple={false} 
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0"
                }}
              />
            </ListItemPrefix>
            <Typography color="blue-gray" className="font-medium">Svelte.js</Typography>
          </label>
        </ListItem>
      </List>
    </Card>
  );
}

Checkbox Horizontal List Group

Use the example below for a horizontal list of checkboxes.

import {
  Checkbox,
  Card,
  List,
  ListItem,
  ListItemPrefix,
  Typography
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card className="w-full max-w-[24rem]">
      <List className="flex-row">
        <ListItem className="p-0">
          <label htmlFor="horizontal-list-react" className="px-3 py-2 flex items-center w-full cursor-pointer">
            <ListItemPrefix className="mr-3">
              <Checkbox 
                id="horizontal-list-react" 
                ripple={false} 
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0"
                }}
              />
            </ListItemPrefix>
            <Typography color="blue-gray" className="font-medium">React.js</Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label htmlFor="horizontal-list-vue" className="px-3 py-2 flex items-center w-full cursor-pointer">
            <ListItemPrefix className="mr-3">
              <Checkbox 
                id="horizontal-list-vue" 
                ripple={false} 
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0"
                }}
              />
            </ListItemPrefix>
            <Typography color="blue-gray" className="font-medium">Vue.js</Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label htmlFor="horizontal-list-svelte" className="px-3 py-2 flex items-center w-full cursor-pointer">
            <ListItemPrefix className="mr-3">
              <Checkbox 
                id="horizontal-list-svelte" 
                ripple={false} 
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0"
                }}
              />
            </ListItemPrefix>
            <Typography color="blue-gray" className="font-medium">Svelte.js</Typography>
          </label>
        </ListItem>
      </List>
    </Card>
  );
}

Props

Learn more about props definition and types of checkbox component.

Theme

Learn how to customize the theme and styles for checkbox component.

card

chip

Edit this page on Github

Tailwind CSS Checkbox - React

Checkbox Colors

Checkbox with Label

Checkbox Custom Icon

Checkbox Ripple Effect

Disabled Checkbox

Checkbox with Link

Checkbox with Description

Checkbox Vertical List Group

Checkbox Horizontal List Group

Related

Props

Theme