React Checkbox - Flowbite

Get started with the checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors

The <Checkbox> component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode.

To start using the component make sure that you have imported it from Flowbite React:

import { Checkbox } from 'flowbite-react';

Checkbox example#

Use this default example of a <Checkbox> element in a checked and unchecked state.

Edit on GitHub
Toggle dark mode
 
Default checkbox
Checked state
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div>
      <div className="mb-4 flex items-center gap-2">
        <Checkbox id="default-checkbox" />
        <Label htmlFor="default-checkbox">Default checkbox</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checked-state-checkbox" defaultChecked />
        <Label htmlFor="checked-state-checkbox">Checked state</Label>
      </div>
    </div>
  );
}

Disabled state#

This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element.

Edit on GitHub
Toggle dark mode
 
Default checkbox
Disabled checked
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div>
      <div className="mb-4 flex items-center gap-2">
        <Checkbox id="disabled-checkbox" disabled />
        <Label htmlFor="disabled-checkbox">Default checkbox</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="disabled-checked-state-checkbox" disabled checked />
        <Label htmlFor="disabled-checked-state-checkbox" disabled>Disabled</Label>
      </div>
    </div>
  );
}

Checkbox link#

Use this example if you want to add an anchor link inside the label of the <Checkbox> component.

Edit on GitHub
Toggle dark mode
 
I agree with the terms and conditions.
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="agree" />
      <Label htmlFor="agree" className="flex">
        I agree with the&nbsp;
        <Link href="/forms" className="text-cyan-600 hover:underline dark:text-cyan-500">
          terms and conditions.
        </Link>
      </Label>
    </div>
  );
}

Helper text#

Get started with this example if you want to add a secondary helper text for the <Checkbox> component.

Edit on GitHub

Free shipping via Flowbite

For orders shipped from $25 in books or $29 in other categories

'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div className="flex">
      <div className="flex items-center h-5">
        <Checkbox id="helper-checkbox" />
      </div>
      <div className="ms-2 text-sm">
        <Label htmlFor="helper-checkbox" className="font-medium text-gray-900 dark:text-gray-300">
          Free shipping via Flowbite
        </Label>
        <p id="helper-checkbox-text" className="text-xs font-normal text-gray-500 dark:text-gray-300">
          For orders shipped from $25 in books or $29 in other categories
        </p>
      </div>
    </div>
  );
}

Bordered#

Use this example of a <Checkbox> inside a card element to enable a larger area of clicking activation.

Edit on GitHub
Toggle dark mode
 
Default radio
Checked state
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div className="flex items-center gap-6">
      <div className="flex flex-1 items-center rounded border border-gray-200 pl-4 dark:border-gray-700">
        <Checkbox id="default-radio" defaultChecked />
        <Label htmlFor="default-radio" className="w-100 ml-2 flex py-4">
          Default radio
        </Label>
      </div>
      <div className="flex flex-1 items-center rounded border border-gray-200 pl-4 dark:border-gray-700">
        <Checkbox id="checked-state" />
        <Label htmlFor="checked-state" className="w-100 ml-2 flex py-4">
          Checked state
        </Label>
      </div>
    </div>
  );
}

Checkbox list group#

Use this example to show a list of <Checkbox> items grouped inside a card.

Edit on GitHub
Toggle dark mode
 
TechnologyVue JS
React
Angular
Laravel
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div>
      <h3 className="mb-4 font-semibold text-gray-900 dark:text-white">Technology</h3>
      <ul className="w-48 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
        <li className="w-full rounded-t-lg border-b border-gray-200 dark:border-gray-600">
          <div className="flex items-center pl-3">
            <Label htmlFor="vue-js-list-checkbox" className="w-full gap-1 flex items-center py-4">
              <Checkbox id="vue-js-list-checkbox" />
              Vue JS
            </Label>
          </div>
        </li>
        <li className="w-full rounded-t-lg border-b border-gray-200 dark:border-gray-600">
          <div className="flex items-center pl-3">
            <Label htmlFor="react-list-checkbox" className="w-full gap-1 flex items-center py-4">
              <Checkbox id="react-list-checkbox" />
              React
            </Label>
          </div>
        </li>
        <li className="w-full rounded-t-lg border-b border-gray-200 dark:border-gray-600">
          <div className="flex items-center pl-3">
            <Label htmlFor="angular-list-checkbox" className="w-full gap-1 flex items-center py-4">
              <Checkbox id="angular-list-checkbox" />
              Angular
            </Label>
          </div>
        </li>
        <li className="w-full rounded-t-lg border-b border-gray-200 dark:border-gray-600">
          <div className="flex items-center pl-3 w-full">
            <Label htmlFor="laravel-list-checkbox" className="w-full gap-1 flex items-center py-4">
              <Checkbox id="laravel-list-checkbox" />
              Laravel
            </Label>
          </div>
        </li>
      </ul>
    </div>
  );
}

Horizontal list group#

Use this example to show a list of <Checkbox> items inside a card horizontally.

Edit on GitHub
Toggle dark mode
 
IdentificationVue JS
React
Angular
Laravel
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div>
      <h3 className="mb-4 font-semibold text-gray-900 dark:text-white">Identification</h3>
      <ul className="w-full items-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:flex">
        <li className="w-full border-b border-gray-200 dark:border-gray-600 sm:border-b-0 sm:border-r">
          <div className="flex items-center pl-3">
            <Label htmlFor="vue-js-hlist-checkbox" className="w-full ml-2 gap-1 flex items-center py-4">
              <Checkbox id="vue-js-hlist-checkbox" />
              Vue JS
            </Label>
          </div>
        </li>
        <li className="w-full border-b border-gray-200 dark:border-gray-600 sm:border-b-0 sm:border-r">
          <div className="flex items-center pl-3">
            <Label htmlFor="react-js-hlist-checkbox" className="w-full ml-2 gap-1 flex items-center py-4">
              <Checkbox id="react-js-hlist-checkbox" />
              React
            </Label>
          </div>
        </li>
        <li className="w-full border-b border-gray-200 dark:border-gray-600 sm:border-b-0 sm:border-r">
          <div className="flex items-center pl-3">
            <Label htmlFor="angular-js-hlist-checkbox" className="w-full ml-2 gap-1 flex items-center py-4">
              <Checkbox id="angular-js-hlist-checkbox" />
              Angular
            </Label>
          </div>
        </li>
        <li className="w-full dark:border-gray-600">
          <div className="flex items-center pl-3">
            <Label htmlFor="laravel-hlist-checkbox" className="w-full	ml-2 gap-1 flex items-center py-4">
              <Checkbox id="laravel-hlist-checkbox" />
              Laravel
            </Label>
          </div>
        </li>
      </ul>
    </div>
  );
}

Inline layout#

You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class.

Edit on GitHub
Toggle dark mode
 
Inline 1
Inline 2
Inline checked
Inline disabled
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div className="flex items-center gap-6">
      <div className="flex items-center gap-2">
        <Checkbox id="inline-1-checkbox" />
        <Label htmlFor="inline-1-checkbox">Inline 1</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="inline-2-checkbox" />
        <Label htmlFor="inline-2-checkbox">Inline 2</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="inline-checked-checkbox" defaultChecked />
        <Label htmlFor="inline-checked-checkbox">Inline defaultChecked</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="inline-disabled-checkbox" disabled />
        <Label htmlFor="inline-disabled-checkbox">Inline disabled</Label>
      </div>
    </div>
  );
}

Colors#

Use the text-{color}-{shade} classes from Tailwind CSS to change the color of the <Checkbox> component.

Edit on GitHub
Toggle dark mode
 
Red
Green
Purple
Teal
Yellow
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div className="flex items-center gap-2">
      <div className="flex items-center gap-2">
        <Checkbox id="red-checkbox" color="red" defaultChecked />
        <Label htmlFor="red-checkbox">Red</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="green-checkbox" color="green" defaultChecked />
        <Label htmlFor="green-checkbo">Green</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="purple-checkbox" color="purple" defaultChecked />
        <Label htmlFor="purple-checkbo">Purple</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="teal-checkbox" color="teal" defaultChecked />
        <Label htmlFor="teal-checkbo">Teal</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="yellow-checkbox" color="yellow" defaultChecked />
        <Label htmlFor="yellow-checkbo">Yellow</Label>
      </div>
    </div>
  );
}

Advanced layout#

Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.

Edit on GitHub
Toggle dark mode
 
Choose technology:React Js
A JavaScript library for building user interfaces.
Vue Js
Vue.js is an model–view front end JavaScript framework.
Angular
A TypeScript-based web application framework.
'use client';

import { Checkbox, Label } from 'flowbite-react';

function Component() {
  return (
    <div>
      <h3 className="mb-5 text-lg font-medium text-gray-900 dark:text-white">Choose technology:</h3>
      <ul className="grid w-full gap-6 md:grid-cols-3">
        <li>
          <Checkbox id="react-option" className="peer hidden" required />
          <Label
            htmlFor="react-option"
            className="inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300"
          >
            <div className="block">
              <svg
                className="mb-2 h-7 w-7 text-sky-500"
                fill="currentColor"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 512 512"
              >
                <path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z" />
              </svg>
              <div className="w-full text-lg font-semibold">React Js</div>
              <div className="w-full text-sm">A JavaScript library for building user interfaces.</div>
            </div>
          </Label>
        </li>
        <li>
          <Checkbox id="vuejs-option" className="peer hidden" required />
          <Label
            htmlFor="vuejs-option"
            className="inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300"
          >
            <div className="block">
              <svg
                className="mb-2 h-7 w-7 text-green-400"
                fill="currentColor"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"
              >
                <path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z" />
              </svg>
              <div className="w-full text-lg font-semibold">Vue Js</div>
              <div className="w-full text-sm">Vue.js is an model–view front end JavaScript framework.</div>
            </div>
          </Label>
        </li>
        <li>
          <Checkbox id="angular-option" className="peer hidden" required />
          <Label
            htmlFor="angular-option"
            className="inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300"
          >
            <div className="block">
              <svg
                className="mb-2 h-7 w-7 text-red-600"
                fill="currentColor"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"
              >
                <path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z" />
              </svg>
              <div className="w-full text-lg font-semibold">Angular</div>
              <div className="w-full text-sm">A TypeScript-based web application framework.</div>
            </div>
          </Label>
        </li>
      </ul>
    </div>
  );
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "h-4 w-4 rounded focus:ring-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-100",
    "color": {
      "default": "focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600 text-cyan-600",
      "dark": "focus:ring-gray-800 dark:ring-offset-gray-800 dark:focus:ring-gray-800 text-gray-800",
      "failure": "focus:ring-red-900 dark:ring-offset-red-900 dark:focus:ring-red-900 text-red-900",
      "gray": "focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900 text-gray-900",
      "info": "focus:ring-cyan-800 dark:ring-offset-gray-800 dark:focus:ring-cyan-800 text-cyan-800",
      "light": "focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900 text-gray-900",
      "purple": "focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600 text-purple-600",
      "success": "focus:ring-green-800 dark:ring-offset-green-800 dark:focus:ring-green-800 text-green-800",
      "warning": "focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400 text-yellow-400",
      "blue": "focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700 text-blue-700",
      "cyan": "focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600 text-cyan-600",
      "green": "focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600 text-green-600",
      "indigo": "focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700 text-indigo-700",
      "lime": "focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700 text-lime-700",
      "pink": "focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600 text-pink-600",
      "red": "focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600 text-red-600",
      "teal": "focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600 text-teal-600",
      "yellow": "focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400 text-yellow-400"
    }
  }
}

References#

Flowbite Checkbox