docs(checkbox): standalone page for checkbox documentation

content/docs/forms/checkbox.mdx

@@ -0,0 +1,82 @@
+---
+title: React Checkbox - Flowbite
+description: 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:
+
+```jsx
+import { Checkbox } from 'flowbite-react';
+```
+
+## Checkbox example
+
+Use this default example of a `<Checkbox>` element in a checked and unchecked state.
+
+<Example name="checkbox.root" />
+
+## Disabled state
+
+This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element.
+
+<Example name="checkbox.disabled" />
+
+## Checkbox link
+
+Use this example if you want to add an anchor link inside the label of the `<Checkbox>` component.
+
+<Example name="checkbox.link" />
+
+## Helper text
+
+Get started with this example if you want to add a secondary helper text for the `<Checkbox>` component.
+
+<Example name="checkbox.helper" />
+
+## Bordered
+
+Use this example of a `<Checkbox>` inside a card element to enable a larger area of clicking activation.
+
+<Example name="checkbox.bordered" />
+
+## Checkbox list group
+
+Use this example to show a list of `<Checkbox>` items grouped inside a card.
+
+<Example name="checkbox.listGroup" />
+
+## Horizontal list group
+
+Use this example to show a list of `<Checkbox>` items inside a card horizontally.
+
+<Example name="checkbox.horizontalListGroup" />
+
+## Inline layout
+
+You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class.
+
+<Example name="checkbox.inlineLayout" />
+
+## Colors
+
+Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of the `<Checkbox>` component.
+
+<Example name="checkbox.colors" />
+
+## 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.
+
+<Example name="checkbox.advancedLayout" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="checkbox" />
+
+## References
+
+- [Flowbite Checkbox](https://flowbite.com/docs/components/checkbox/)

data/components.tsx

@@ -238,13 +238,13 @@ export const COMPONENTS_DATA: Component[] = [
   //   link: `/docs/forms/textarea`,
   //   classes: 'w-56'
   // },
-  // {
-  //   name: 'Checkbox',
-  //   image: '/images/components/checkbox.svg',
-  //   imageDark: '/images/components/checkbox.svg',
-  //   link: `/docs/forms/checkbox`,
-  //   classes: 'w-40'
-  // },
+  {
+    name: 'Checkbox',
+    image: '/images/components/checkbox.svg',
+    imageDark: '/images/components/checkbox-dark.svg',
+    link: `/docs/forms/checkbox`,
+    classes: 'w-40',
+  },
   // {
   //   name: 'Radio',
   //   image: '/images/components/radio.svg',

data/docs-sidebar.ts

@@ -72,6 +72,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
     title: 'forms',
     href: '/forms/',
     items: [
+      { title: 'Checkbox', href: '/docs/forms/checkbox' },
       { title: 'File Input', href: '/docs/forms/file-input' },
       { title: 'Floating Label', href: '/docs/forms/floating-label', isNew: true },
     ],

examples/checkbox/checkbox.bordered.tsx

@@ -0,0 +1,87 @@
+import { type CodeData } from '~/components/code-demo';
+import { Checkbox, Label } from '~/src';
+
+const code = `
+'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>
+  );
+}
+`;
+
+const codeRSC = `
+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>
+  );
+}
+`;
+
+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>
+  );
+}
+
+export const bordered: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'checkbox/checkbox.bordered.tsx',
+  component: <Component />,
+};

examples/checkbox/checkbox.colors.tsx

@@ -0,0 +1,111 @@
+import { type CodeData } from '~/components/code-demo';
+import { Checkbox, Label } from '~/src';
+
+const code = `
+'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>
+  );
+}
+`;
+
+const codeRSC = `
+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>
+  );
+}
+`;
+
+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>
+  );
+}
+
+export const colors: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'checkbox/checkbox.colors.tsx',
+  component: <Component />,
+};

examples/checkbox/checkbox.disabled.tsx

@@ -0,0 +1,79 @@
+import { type CodeData } from '~/components/code-demo';
+import { Checkbox, Label } from '~/src';
+
+const code = `
+'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>
+  );
+}
+`;
+
+const codeRSC = `
+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>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <div className="mb-4 flex items-center gap-2">
+        <Checkbox id="disabled-checkbox" disabled />
+        <Label htmlFor="disabled-checkbox" disabled>
+          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 checked
+        </Label>
+      </div>
+    </div>
+  );
+}
+
+export const disabled: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'checkbox/checkbox.disabled.tsx',
+  component: <Component />,
+};