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:

'use client';

import { Checkbox } from 'flowbite-react';

Table of Contents#

Checkbox example#

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

Edit on GitHub
  • React TypeScript
'use client';

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

export default function CheckboxExample() {
  return (
    <>
      <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
          checked
          id="checked-state-checkbox"
        />
        <Label htmlFor="checked-state-checkbox">
          Checked state
        </Label>
      </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
  • React TypeScript
'use client';

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

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

Checkbox link#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Checkbox, Label } from 'flowbite-react';
import Link from 'next/link';

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

Helper text#

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

Bordered#

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

Edit on GitHub
  • React TypeScript
'use client';

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

export default function BorderedCheckbox() {
  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
          checked
          id="default-radio"
        />
        <Label
          className="w-100 ml-2 flex py-4"
          htmlFor="default-radio"
        >
          <p>
            Default radio
          </p>
        </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
          className="w-100 ml-2 flex py-4"
          htmlFor="checked-state"
        >
          <p>
            Checked state
          </p>
        </Label>
      </div>
    </div>
  )
}

Checkbox list group#

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

Edit on GitHub

Technology

  • React TypeScript
'use client';

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

export default function CheckboxListGroup() {
  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">
            <Checkbox id="vue-js-list-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="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">
            <Checkbox id="react-list-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="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">
            <Checkbox id="angular-list-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="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">
            <Checkbox id="laravel-list-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="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

Identification

  • React TypeScript
'use client';

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

export default function HorizontalListGroup() {
  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">
            <Checkbox id="vue-js-hlist-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="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">
            <Checkbox id="react-js-hlist-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="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">
            <Checkbox id="angular-js-hlist-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="angular-js-hlist-checkbox"
            >
              Angular
            </Label>
          </div>
        </li>
        <li className="w-full dark:border-gray-600">
          <div className="flex items-center pl-3">
            <Checkbox id="laravel-hlist-checkbox" />
            <Label
              className="w-100 ml-2 flex py-4"
              htmlFor="laravel-hlist-checkbox"
            >
              Laravel
            </Label>
          </div>
        </li>
      </ul>
    </div>
  )
}

Checkbox dropdown#

Use this example to show a list of <Checkbox> items inside a dropdown menu.

Edit on GitHub
  • React TypeScript
'use client';

import { Checkbox, Label, Dropdown, TextInput } from 'flowbite-react';
import { MdSearch } from 'react-icons/md';

export default function DropdownSearch() {
  return (
    <div className="flex items-center justify-center">
      <Dropdown
        className="z-50"
        dismissOnClick={false}
        label="Dropdown search"
      >
        <Item>
          <TextInput
            icon={MdSearch}
            placeholder="Search user"
          />
        </Item>
        <Item>
          <Checkbox id="bonnie-green-checkbox" />
          <Label
            className="w-100 ml-2 flex"
            htmlFor="bonnie-green-checkbox"
          >
            Bonnie Green
          </Label>
        </Item>
        <Item>
          <Checkbox id="jese-leos-checkbox" />
          <Label
            className="w-100 ml-2 flex"
            htmlFor="jese-leos-checkbox"
          >
            Jese Leos
          </Label>
        </Item>
        <Item>
          <Checkbox id="michael-gough-checkbox" />
          <Label
            className="w-100 ml-2 flex"
            htmlFor="michael-gough-checkbox"
          >
            Michael Gough
          </Label>
        </Item>
        <Item>
          <Checkbox id="robert-wall-checkbox" />
          <Label
            className="w-100 ml-2 flex"
            htmlFor="robert-wall-checkbox"
          >
            Robert Wall
          </Label>
        </Item>
        <Item>
          <Checkbox id="joseph-mcfall-checkbox" />
          <Label
            className="w-100 ml-2 flex"
            htmlFor="joseph-mcfall-checkbox"
          >
            Joseph Mcfall
          </Label>
        </Item>
        <Item>
          <Checkbox id="leslie-livingston-checkbox" />
          <Label
            className="w-100 ml-2 flex"
            htmlFor="leslie-livingston-checkbox"
          >
            Leslie Livingston
          </Label>
        </Item>
        <Item>
          <Checkbox id="roberta-casas-checkbox" />
          <Label
            className="w-100 ml-2 flex"
            htmlFor="roberta-casas-checkbox"
          >
            Roberta Casas
          </Label>
        </Item>
        <Dropdown.Divider />
        <Item className="font-medium text-red-600">
          <SeeSourceCodeForSVG />
          <p>
            Delete user
          </p>
        </Item>
      </Dropdown>
    </div>
  )
}

Inline layout#

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

Edit on GitHub
  • React TypeScript
'use client';

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

export default function InlineLayout() {
  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
          checked
          id="inline-checked-checkbox"
        />
        <Label htmlFor="inline-checked-checkbox">
          Inline checked
        </Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox
          disabled
          id="inline-disabled-checkbox"
        />
        <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.

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

Choose technology:

  • React TypeScript
'use client';

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

export default function AdvancedLayoutCheckbox() {
  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
            className="peer hidden"
            id="react-option"
            required
          />
          <Label
            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"
            htmlFor="react-option"
          >
            <div className="block">
              <SeeSourceCodeForSVG />
              <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
            className="peer hidden"
            id="vuejs-option"
            required
          />
          <Label
            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"
            htmlFor="vuejs-option"
          >
            <div className="block">
              <SeeSourceCodeForSVG />
              <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
            className="peer hidden"
            id="angular-option"
            required
          />
          <Label
            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"
            htmlFor="angular-option"
          >
            <div className="block">
              <SeeSourceCodeForSVG />
              <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 border border-gray-300 bg-gray-100 focus:ring-2 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-cyan-600 text-cyan-600"
  }
}

References#