Skip to content

checkbox.mdx

Latest commit

 

History

History
785 lines (701 loc) · 21.7 KB

checkbox.mdx

File metadata and controls

785 lines (701 loc) · 21.7 KB
title Tailwind CSS Checkbox for React - Material Tailwind
description Customise your web projects with our beautiful checkbox component for Tailwind CSS and React using Material Design guidelines.
navigation
checkbox
checkbox-colors
checkbox-label
checkbox-custom-icon
checkbox-ripple-effect
disabled-checkbox
checkbox-with-link
checkbox-with-description
checkbox-vertical-list-group
checkbox-horizontal-list-group
checkbox-custom-styles
checkbox-props
types-color
checkbox-theme
checkbox-theme-object-type
checkbox-theme-customization
more-examples
github checkbox
prev card
next 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.


<CodePreview link="checkbox#checkbox" component={<CheckboxExamples.CheckboxDefault />}>

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

export function CheckboxDefault() {
  return <Checkbox defaultChecked />;
}
## Checkbox Colors

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

<CodePreview link="checkbox#checkbox-colors" component={<CheckboxExamples.CheckboxColors />}>

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

export function CheckboxColors() {
  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 Label

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

<CodePreview link="checkbox#checkbox-label" component={<CheckboxExamples.CheckboxLabel />}>

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

export function CheckboxLabel() {
  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.

<CodePreview component={<CheckboxExamples.CheckboxCustomIcon />}>

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

export function CheckboxCustomIcon() {
  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.

<CodePreview link="checkbox#checkbox-ripple-effect" component={<CheckboxExamples.CheckboxRippleEffect />}>

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

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

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

<CodePreview link="checkbox#disabled-checkbox" component={<CheckboxExamples.DisabledCheckbox />}>

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

export function DisabledCheckbox() {
  return <Checkbox label="Remember Me" disabled={true} />;
}
## 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.

<CodePreview component={<CheckboxExamples.CheckboxWithLink />}>

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

export function CheckboxWithLink() {
  return (
    <Checkbox
      label={
        <Typography color="blue-gray" className="flex font-medium">
          I agree with the
          <Typography
            as="a"
            href="#"
            color="blue"
            className="font-medium transition-colors hover:text-blue-700"
          >
            &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.

<CodePreview component={<CheckboxExamples.CheckboxWithDescription />}>

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

export function CheckboxWithDescription() {
  return (
    <Checkbox
      label={
        <div>
          <Typography color="blue-gray" className="font-medium">
            Remember Me
          </Typography>
          <Typography variant="small" color="gray" className="font-normal">
            You&apos;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.

<CodePreview component={<CheckboxExamples.CheckboxVerticalListGroup />}>

import {
  Checkbox,
  Card,
  List,
  ListItem,
  ListItemPrefix,
  Typography,
} from "@material-tailwind/react";

export function CheckboxVerticalListGroup() {
  return (
    <Card>
      <List>
        <ListItem className="p-0">
          <label
            htmlFor="vertical-list-react"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <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="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <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="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <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.

<CodePreview component={<CheckboxExamples.CheckboxHorizontalListGroup />}>

import {
  Checkbox,
  Card,
  List,
  ListItem,
  ListItemPrefix,
  Typography,
} from "@material-tailwind/react";

export function CheckboxHorizontalListGroup() {
  return (
    <Card className="w-full max-w-[24rem]">
      <List className="flex-row">
        <ListItem className="p-0">
          <label
            htmlFor="horizontal-list-react"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <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="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <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="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <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>
  );
}
## Checkbox Custom Styles

You can use the className prop to add custom styles to the Checkbox component.

<CodePreview component={<CheckboxExamples.CheckboxCustomStyles />}>

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

export function CheckboxCustomStyles() {
  return (
    <Checkbox
      defaultChecked
      ripple={false}
      className="h-8 w-8 rounded-full border-gray-900/20 bg-gray-900/10 transition-all hover:scale-105 hover:before:opacity-0"
    />
  );
}
## Checkbox Props

The following props are available for checkbox component. These are the custom props that 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 gray
label node Add label for checkbox undefined
icon node Change checked icon for checkbox undefined
ripple boolean Add ripple effect for checkbox true
className string Add custom className for checkbox ''
disabled boolean Makes the checkbox disabled false
containerProps object Add custom props for checkbox container undefined
labelProps object Add custom props for checkbox label undefined
iconProps object Add custom props for checkbox icon undefined
inputRef ref Add reference for input element. undefined


For TypeScript Only

import type { CheckboxProps } from "@material-tailwind/react";
## Types - Color 
type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";
## Checkbox Theme

Learn how to customize the theme and styles for checkbox component, the theme object for checkbox component has three main objects:

A. The defaultProps object for setting up the default value for props of checkbox component.
B. The valid object for customizing the valid values for checkbox component props.
C. The styles object for customizing the theme and styles of checkbox component.

You can customize the theme and styles of checkbox component by adding Tailwind CSS classes as key paired values for objects.



## Checkbox Theme Object Type 
interface CheckboxStylesType {
  defaultProps: {
    color: string;
    label: string;
    icon: node;
    ripple: boolean;
    className: string;
    disabled: boolean;
    containerProps: object;
    labelProps: object;
    iconProps: object;
  };
  valid: {
    colors: string[];
  };
  styles: {
    base: {
      root: object;
      container: object;
      input: object;
      label: object;
      icon: object;
      disabled: object;
    };
    colors: object;
  };
}


For TypeScript Only

import type { CheckboxStylesType } from "@material-tailwind/react";
## Checkbox Theme Customization 
const theme = {
  checkbox: {
    defaultProps: {
      color: "blue",
      label: undefined,
      icon: undefined,
      ripple: true,
      className: "",
      disabled: false,
      containerProps: undefined,
      labelProps: undefined,
      iconProps: undefined,
    },
    valid: {
      colors: [
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        root: {
          display: "inline-flex",
          alignItems: "items-center",
        },
        container: {
          position: "relative",
          display: "flex",
          alignItems: "items-center",
          cursor: "cursor-pointer",
          p: "p-3",
          borderRadius: "rounded-full",
        },
        input: {
          peer: "peer",
          position: "relative",
          appearance: "appearance-none",
          width: "w-5",
          height: "h-5",
          borderWidth: "border",
          borderRadius: "rounded-md",
          borderColor: "border-blue-gray-200",
          cursor: "cursor-pointer",
          transition: "transition-all",
          before: {
            content: "before:content['']",
            display: "before:block",
            bg: "before:bg-blue-gray-500",
            width: "before:w-12",
            height: "before:h-12",
            borderRadius: "before:rounded-full",
            position: "before:absolute",
            top: "before:top-2/4",
            left: "before:left-2/4",
            transform: "before:-translate-y-2/4 before:-translate-x-2/4",
            opacity: "before:opacity-0 hover:before:opacity-10",
            transition: "before:transition-opacity",
          },
        },
        label: {
          color: "text-gray-700",
          fontWeight: "font-light",
          userSelect: "select-none",
          cursor: "cursor-pointer",
          mt: "mt-px",
        },
        icon: {
          color: "text-white",
          position: "absolute",
          top: "top-2/4",
          left: "left-2/4",
          translate: "-translate-y-2/4 -translate-x-2/4",
          pointerEvents: "pointer-events-none",
          opacity: "opacity-0 peer-checked:opacity-100",
          transition: "transition-opacity",
        },
        disabled: {
          opacity: "opacity-50",
          pointerEvents: "pointer-events-none",
        },
      },
      colors: {
        "blue-gray": {
          background: "checked:bg-blue-gray-500",
          border: "checked:border-blue-gray-500",
          before: "checked:before:bg-blue-gray-500",
        },
        gray: {
          background: "checked:bg-gray-500",
          border: "checked:border-gray-500",
          before: "checked:before:bg-gray-500",
        },
        brown: {
          background: "checked:bg-brown-500",
          border: "checked:border-brown-500",
          before: "checked:before:bg-brown-500",
        },
        "deep-orange": {
          background: "checked:bg-deep-orange-500",
          border: "checked:border-deep-orange-500",
          before: "checked:before:bg-deep-orange-500",
        },
        orange: {
          background: "checked:bg-orange-500",
          border: "checked:border-orange-500",
          before: "checked:before:bg-orange-500",
        },
        amber: {
          background: "checked:bg-amber-500",
          border: "checked:border-amber-500",
          before: "checked:before:bg-amber-500",
        },
        yellow: {
          background: "checked:bg-yellow-500",
          border: "checked:border-yellow-500",
          before: "checked:before:bg-yellow-500",
        },
        lime: {
          background: "checked:bg-lime-500",
          border: "checked:border-lime-500",
          before: "checked:before:bg-lime-500",
        },
        "light-green": {
          background: "checked:bg-light-green-500",
          border: "checked:border-light-green-500",
          before: "checked:before:bg-light-green-500",
        },
        green: {
          background: "checked:bg-green-500",
          border: "checked:border-green-500",
          before: "checked:before:bg-green-500",
        },
        teal: {
          background: "checked:bg-teal-500",
          border: "checked:border-teal-500",
          before: "checked:before:bg-teal-500",
        },
        cyan: {
          background: "checked:bg-cyan-500",
          border: "checked:border-cyan-500",
          before: "checked:before:bg-cyan-500",
        },
        "light-blue": {
          background: "checked:bg-light-blue-500",
          border: "checked:border-light-blue-500",
          before: "checked:before:bg-light-blue-500",
        },
        blue: {
          background: "checked:bg-blue-500",
          border: "checked:border-blue-500",
          before: "checked:before:bg-blue-500",
        },
        indigo: {
          background: "checked:bg-indigo-500",
          border: "checked:border-indigo-500",
          before: "checked:before:bg-indigo-500",
        },
        "deep-purple": {
          background: "checked:bg-deep-purple-500",
          border: "checked:border-deep-purple-500",
          before: "checked:before:bg-deep-purple-500",
        },
        purple: {
          background: "checked:bg-purple-500",
          border: "checked:border-purple-500",
          before: "checked:before:bg-purple-500",
        },
        pink: {
          background: "checked:bg-pink-500",
          border: "checked:border-pink-500",
          before: "checked:before:bg-pink-500",
        },
        red: {
          background: "checked:bg-red-500",
          border: "checked:border-red-500",
          before: "checked:before:bg-red-500",
        },
      },
    },
  },
};
## Explore More Tailwind CSS Examples

Looking for more checkbox examples? Check out our Product List Sections from Material Tailwind Blocks.