From 232c082f8c70d049a17bb6f4de4ba62c5a3c6fe7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 30 Aug 2022 15:19:37 -0500
Subject: [PATCH 1/4] docs(checkbox): prep for playgrounds (#2515)

---
 docs/api/checkbox.md | 287 ++-----------------------------------------
 1 file changed, 11 insertions(+), 276 deletions(-)

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 93e5fedeeed..5461036afba 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-checkbox"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/checkbox/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/checkbox/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 
 import Props from '@site/static/auto-generated/checkbox/props.md';
 import Events from '@site/static/auto-generated/checkbox/events.md';
@@ -24,17 +19,20 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
+Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
 
+## Basic
 
+TODO Playground
 
-Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
+## Indeterminate Checkboxes
+
+TODO Playground
+
+## Theming
+
+TODO Playground
 
 ## Interfaces
 
@@ -61,269 +59,6 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {
 
 
 
-## Usage
-
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
-
-<TabItem value="angular">
-
-```html
-<!-- Default Checkbox -->
-<ion-checkbox></ion-checkbox>
-
-<!-- Disabled Checkbox -->
-<ion-checkbox disabled="true"></ion-checkbox>
-
-<!-- Checked Checkbox -->
-<ion-checkbox checked="true"></ion-checkbox>
-
-<!-- Checkbox Colors -->
-<ion-checkbox color="primary"></ion-checkbox>
-<ion-checkbox color="secondary"></ion-checkbox>
-<ion-checkbox color="danger"></ion-checkbox>
-<ion-checkbox color="light"></ion-checkbox>
-<ion-checkbox color="dark"></ion-checkbox>
-
-<!-- Checkboxes in a List -->
-<ion-list>
-  <ion-item *ngFor="let entry of form">
-    <ion-label>{{entry.val}}</ion-label>
-    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
-  </ion-item>
-</ion-list>
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss']
-})
-export class HomePage {
-  public form = [
-      { val: 'Pepperoni', isChecked: true },
-      { val: 'Sausage', isChecked: false },
-      { val: 'Mushroom', isChecked: false }
-    ];
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Checkbox -->
-<ion-checkbox></ion-checkbox>
-
-<!-- Disabled Checkbox -->
-<ion-checkbox disabled></ion-checkbox>
-
-<!-- Checked Checkbox -->
-<ion-checkbox checked></ion-checkbox>
-
-<!-- Checkbox Colors -->
-<ion-checkbox color="primary"></ion-checkbox>
-<ion-checkbox color="secondary"></ion-checkbox>
-<ion-checkbox color="danger"></ion-checkbox>
-<ion-checkbox color="light"></ion-checkbox>
-<ion-checkbox color="dark"></ion-checkbox>
-
-<!-- Checkboxes in a List -->
-<ion-list>
-  <ion-item>
-    <ion-label>Pepperoni</ion-label>
-    <ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Sausage</ion-label>
-    <ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Mushrooms</ion-label>
-    <ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
-
-const checkboxList = [
-  { val: 'Pepperoni', isChecked: true },
-  { val: 'Sausage', isChecked: false },
-  { val: 'Mushroom', isChecked: false }
-];
-
-export const CheckboxExamples: React.FC = () => {
-
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>CheckboxExamples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItemDivider>Default Checkbox</IonItemDivider>
-          <IonItem>
-            <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
-            <IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
-          </IonItem>
-
-          <IonItemDivider>Disabled Checkbox</IonItemDivider>
-          <IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
-
-          <IonItemDivider>Checkbox Colors</IonItemDivider>
-          <IonItem>
-            <IonCheckbox slot="end" color="primary" />
-            <IonCheckbox slot="end" color="secondary" />
-            <IonCheckbox slot="end" color="danger" />
-            <IonCheckbox slot="end" color="light" />
-            <IonCheckbox slot="end" color="dark" />
-          </IonItem>
-          <IonItemDivider>Checkboxes in a List</IonItemDivider>
-
-          {checkboxList.map(({ val, isChecked }, i) => (
-            <IonItem key={i}>
-              <IonLabel>{val}</IonLabel>
-              <IonCheckbox slot="end" value={val} checked={isChecked} />
-            </IonItem>
-          ))}
-        </IonList>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'checkbox-example',
-  styleUrl: 'checkbox-example.css'
-})
-export class CheckboxExample {
-  private form = [
-    { val: 'Pepperoni', isChecked: true },
-    { val: 'Sausage', isChecked: false },
-    { val: 'Mushroom', isChecked: false }
-  ];
-
-  render() {
-    return [
-      // Default Checkbox
-      <ion-checkbox></ion-checkbox>,
-
-      // Disabled Checkbox
-      <ion-checkbox disabled={true}></ion-checkbox>,
-
-      // Checked Checkbox
-      <ion-checkbox checked={true}></ion-checkbox>,
-
-      // Checkbox Colors
-      <ion-checkbox color="primary"></ion-checkbox>,
-      <ion-checkbox color="secondary"></ion-checkbox>,
-      <ion-checkbox color="danger"></ion-checkbox>,
-      <ion-checkbox color="light"></ion-checkbox>,
-      <ion-checkbox color="dark"></ion-checkbox>,
-
-      // Checkboxes in a List
-      <ion-list>
-        {this.form.map(entry =>
-          <ion-item>
-            <ion-label>{entry.val}</ion-label>
-            <ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
-          </ion-item>
-        )}
-      </ion-list>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Checkbox -->
-  <ion-checkbox></ion-checkbox>
-
-  <!-- Disabled Checkbox -->
-  <ion-checkbox disabled="true"></ion-checkbox>
-
-  <!-- Checked Checkbox -->
-  <ion-checkbox checked="true"></ion-checkbox>
-
-  <!-- Checkbox Colors -->
-  <ion-checkbox color="primary"></ion-checkbox>
-  <ion-checkbox color="secondary"></ion-checkbox>
-  <ion-checkbox color="danger"></ion-checkbox>
-  <ion-checkbox color="light"></ion-checkbox>
-  <ion-checkbox color="dark"></ion-checkbox>
-
-  <!-- Checkboxes in a List -->
-  <ion-list>
-    <ion-item v-for="entry in form">
-      <ion-label>{{entry.val}}</ion-label>
-      <ion-checkbox
-        slot="end"
-        @update:modelValue="entry.isChecked = $event"
-        :modelValue="entry.isChecked">
-      </ion-checkbox>
-    </ion-item>
-  </ion-list>
-</template>
-
-<script>
-import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonCheckbox, IonItem, IonLabel, IonList },
-  setup() {
-    const form = [
-      { val: 'Pepperoni', isChecked: true },
-      { val: 'Sausage', isChecked: false },
-      { val: 'Mushroom', isChecked: false }
-    ];
-    
-    return { form };
-  }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
@@ -340,4 +75,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 4a89860413f90763b045c2ca9fdc76ea4a7a594e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 1 Sep 2022 08:23:00 -0500
Subject: [PATCH 2/4] docs(checkbox): add basic playground (#2517)

---
 docs/api/checkbox.md                      |  4 +++-
 static/usage/checkbox/basic/angular.md    |  6 ++++++
 static/usage/checkbox/basic/demo.html     | 24 ++++++++++++++++++++++
 static/usage/checkbox/basic/index.md      | 16 +++++++++++++++
 static/usage/checkbox/basic/javascript.md |  6 ++++++
 static/usage/checkbox/basic/react.md      | 18 ++++++++++++++++
 static/usage/checkbox/basic/vue.md        | 25 +++++++++++++++++++++++
 7 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/checkbox/basic/angular.md
 create mode 100644 static/usage/checkbox/basic/demo.html
 create mode 100644 static/usage/checkbox/basic/index.md
 create mode 100644 static/usage/checkbox/basic/javascript.md
 create mode 100644 static/usage/checkbox/basic/react.md
 create mode 100644 static/usage/checkbox/basic/vue.md

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 5461036afba..a98ee09efe5 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -24,7 +24,9 @@ Checkboxes allow the selection of multiple options from a set of options. They a
 
 ## Basic
 
-TODO Playground
+import Basic from '@site/static/usage/checkbox/basic/index.md';
+
+<Basic />
 
 ## Indeterminate Checkboxes
 
diff --git a/static/usage/checkbox/basic/angular.md b/static/usage/checkbox/basic/angular.md
new file mode 100644
index 00000000000..29c262a3522
--- /dev/null
+++ b/static/usage/checkbox/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>I agree to the terms and conditions</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/basic/demo.html b/static/usage/checkbox/basic/demo.html
new file mode 100644
index 00000000000..d95a66ee2fd
--- /dev/null
+++ b/static/usage/checkbox/basic/demo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-item>
+            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-label>I agree to the terms and conditions</ion-label>
+          </ion-item>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/checkbox/basic/index.md b/static/usage/checkbox/basic/index.md
new file mode 100644
index 00000000000..8e6d70bb205
--- /dev/null
+++ b/static/usage/checkbox/basic/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular
+  }}
+  src="usage/checkbox/basic/demo.html"
+/>
diff --git a/static/usage/checkbox/basic/javascript.md b/static/usage/checkbox/basic/javascript.md
new file mode 100644
index 00000000000..29c262a3522
--- /dev/null
+++ b/static/usage/checkbox/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>I agree to the terms and conditions</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/basic/react.md b/static/usage/checkbox/basic/react.md
new file mode 100644
index 00000000000..64dda9457bb
--- /dev/null
+++ b/static/usage/checkbox/basic/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import {
+  IonCheckbox,
+  IonItem,
+  IonLabel
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <IonItem>
+      <IonCheckbox slot="start"></IonCheckbox>
+      <IonLabel>I agree to the terms and conditions</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/checkbox/basic/vue.md b/static/usage/checkbox/basic/vue.md
new file mode 100644
index 00000000000..53cb1d16ccf
--- /dev/null
+++ b/static/usage/checkbox/basic/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start"></ion-checkbox>
+    <ion-label>I agree to the terms and conditions</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import {
+    IonCheckbox,
+    IonItem,
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonItem,
+      IonLabel
+    }
+  });
+</script>
+```

From 168c88f54f0e3c04501e4d8e7011c38702c308dd Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 1 Sep 2022 12:58:47 -0500
Subject: [PATCH 3/4] docs(checkbox): add indeterminate demos (#2521)

---
 docs/api/checkbox.md                          |  4 ++-
 src/components/global/Playground/index.tsx    |  2 +-
 .../usage/checkbox/indeterminate/angular.md   |  6 +++++
 static/usage/checkbox/indeterminate/demo.html | 24 ++++++++++++++++++
 static/usage/checkbox/indeterminate/index.md  | 16 ++++++++++++
 .../checkbox/indeterminate/javascript.md      |  6 +++++
 static/usage/checkbox/indeterminate/react.md  | 18 +++++++++++++
 static/usage/checkbox/indeterminate/vue.md    | 25 +++++++++++++++++++
 8 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 static/usage/checkbox/indeterminate/angular.md
 create mode 100644 static/usage/checkbox/indeterminate/demo.html
 create mode 100644 static/usage/checkbox/indeterminate/index.md
 create mode 100644 static/usage/checkbox/indeterminate/javascript.md
 create mode 100644 static/usage/checkbox/indeterminate/react.md
 create mode 100644 static/usage/checkbox/indeterminate/vue.md

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index a98ee09efe5..33d199d9d89 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -30,7 +30,9 @@ import Basic from '@site/static/usage/checkbox/basic/index.md';
 
 ## Indeterminate Checkboxes
 
-TODO Playground
+import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
+
+<Indeterminate />
 
 ## Theming
 
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index ca4128b9929..c1c36bef703 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -169,7 +169,7 @@ export default function Playground({
    * load, so a loading screen is shown by default.
    * Once the source of the iframe loads we can
    * hide the loading screen and show the inner content.
-   * 
+   *
    * We call this as a local function because useEffect
    * callbacks cannot return a Promise, as async functions do.
    */
diff --git a/static/usage/checkbox/indeterminate/angular.md b/static/usage/checkbox/indeterminate/angular.md
new file mode 100644
index 00000000000..841851a904a
--- /dev/null
+++ b/static/usage/checkbox/indeterminate/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start" [indeterminate]="true"></ion-checkbox>
+  <ion-label>Indeterminate checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/indeterminate/demo.html b/static/usage/checkbox/indeterminate/demo.html
new file mode 100644
index 00000000000..014f67d5210
--- /dev/null
+++ b/static/usage/checkbox/indeterminate/demo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-item>
+            <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
+            <ion-label>Indeterminate checkbox</ion-label>
+          </ion-item>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/checkbox/indeterminate/index.md b/static/usage/checkbox/indeterminate/index.md
new file mode 100644
index 00000000000..01eb5a9da8a
--- /dev/null
+++ b/static/usage/checkbox/indeterminate/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular
+  }}
+  src="usage/checkbox/indeterminate/demo.html"
+/>
diff --git a/static/usage/checkbox/indeterminate/javascript.md b/static/usage/checkbox/indeterminate/javascript.md
new file mode 100644
index 00000000000..9a216a7d8b0
--- /dev/null
+++ b/static/usage/checkbox/indeterminate/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
+  <ion-label>Indeterminate checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/indeterminate/react.md b/static/usage/checkbox/indeterminate/react.md
new file mode 100644
index 00000000000..9e08f102560
--- /dev/null
+++ b/static/usage/checkbox/indeterminate/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import {
+  IonCheckbox,
+  IonItem,
+  IonLabel
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <IonItem>
+      <IonCheckbox slot="start" indeterminate={true}></IonCheckbox>
+      <IonLabel>Indeterminate checkbox</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/checkbox/indeterminate/vue.md b/static/usage/checkbox/indeterminate/vue.md
new file mode 100644
index 00000000000..0ad2ddbf62b
--- /dev/null
+++ b/static/usage/checkbox/indeterminate/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start" :indeterminate="true"></ion-checkbox>
+    <ion-label>Indeterminate checkbox</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import {
+    IonCheckbox,
+    IonItem,
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonItem,
+      IonLabel
+    }
+  });
+</script>
+```

From 77af95ad8801bb20369b7e9dddfb4a05f1e92e40 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:21:25 -0500
Subject: [PATCH 4/4] docs(checkbox): add theming playground (#2528)

---
 docs/api/checkbox.md                          |  4 +-
 .../theming/angular/example_component_css.md  | 11 ++++++
 .../theming/angular/example_component_html.md |  6 +++
 static/usage/checkbox/theming/demo.html       | 35 ++++++++++++++++++
 static/usage/checkbox/theming/index.md        | 31 ++++++++++++++++
 static/usage/checkbox/theming/javascript.md   | 18 +++++++++
 .../usage/checkbox/theming/react/main_css.md  | 11 ++++++
 .../usage/checkbox/theming/react/main_tsx.md  | 20 ++++++++++
 static/usage/checkbox/theming/vue.md          | 37 +++++++++++++++++++
 9 files changed, 172 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/checkbox/theming/angular/example_component_css.md
 create mode 100644 static/usage/checkbox/theming/angular/example_component_html.md
 create mode 100644 static/usage/checkbox/theming/demo.html
 create mode 100644 static/usage/checkbox/theming/index.md
 create mode 100644 static/usage/checkbox/theming/javascript.md
 create mode 100644 static/usage/checkbox/theming/react/main_css.md
 create mode 100644 static/usage/checkbox/theming/react/main_tsx.md
 create mode 100644 static/usage/checkbox/theming/vue.md

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 33d199d9d89..490a0606d49 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -36,7 +36,9 @@ import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
 
 ## Theming
 
-TODO Playground
+import Theming from '@site/static/usage/checkbox/theming/index.md';
+
+<Theming />
 
 ## Interfaces
 
diff --git a/static/usage/checkbox/theming/angular/example_component_css.md b/static/usage/checkbox/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..c8fbfdb86d8
--- /dev/null
+++ b/static/usage/checkbox/theming/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+  --size: 32px;
+  --background-checked: #6815ec;
+}
+
+ion-checkbox::part(container) {
+  border-radius: 6px;
+  border: 2px solid #6815ec;
+}
+```
\ No newline at end of file
diff --git a/static/usage/checkbox/theming/angular/example_component_html.md b/static/usage/checkbox/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..a54828724aa
--- /dev/null
+++ b/static/usage/checkbox/theming/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>Themed checkbox</ion-label>
+</ion-item>
+```
\ No newline at end of file
diff --git a/static/usage/checkbox/theming/demo.html b/static/usage/checkbox/theming/demo.html
new file mode 100644
index 00000000000..224dedb9800
--- /dev/null
+++ b/static/usage/checkbox/theming/demo.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+    <style>
+      ion-checkbox {
+        --size: 32px;
+        --background-checked: #6815ec;
+      }
+
+      ion-checkbox::part(container) {
+        border-radius: 6px;
+        border: 2px solid #6815ec;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-item>
+            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-label>Themed checkbox</ion-label>
+          </ion-item>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/checkbox/theming/index.md b/static/usage/checkbox/theming/index.md
new file mode 100644
index 00000000000..1fea21694a3
--- /dev/null
+++ b/static/usage/checkbox/theming/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
+      }
+    }
+  }}
+  src="usage/checkbox/theming/demo.html"
+/>
diff --git a/static/usage/checkbox/theming/javascript.md b/static/usage/checkbox/theming/javascript.md
new file mode 100644
index 00000000000..5ee2949135b
--- /dev/null
+++ b/static/usage/checkbox/theming/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>Themed checkbox</ion-label>
+</ion-item>
+
+<style>
+  ion-checkbox {
+    --size: 32px;
+    --background-checked: #6815ec;
+  }
+  
+  ion-checkbox::part(container) {
+    border-radius: 6px;
+    border: 2px solid #6815ec;
+  }
+</style>
+```
diff --git a/static/usage/checkbox/theming/react/main_css.md b/static/usage/checkbox/theming/react/main_css.md
new file mode 100644
index 00000000000..c8fbfdb86d8
--- /dev/null
+++ b/static/usage/checkbox/theming/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+  --size: 32px;
+  --background-checked: #6815ec;
+}
+
+ion-checkbox::part(container) {
+  border-radius: 6px;
+  border: 2px solid #6815ec;
+}
+```
\ No newline at end of file
diff --git a/static/usage/checkbox/theming/react/main_tsx.md b/static/usage/checkbox/theming/react/main_tsx.md
new file mode 100644
index 00000000000..28784175181
--- /dev/null
+++ b/static/usage/checkbox/theming/react/main_tsx.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import {
+  IonCheckbox,
+  IonItem,
+  IonLabel
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonItem>
+      <IonCheckbox slot="start"></IonCheckbox>
+      <IonLabel>Themed checkbox</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/checkbox/theming/vue.md b/static/usage/checkbox/theming/vue.md
new file mode 100644
index 00000000000..3bb88c82577
--- /dev/null
+++ b/static/usage/checkbox/theming/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start"></ion-checkbox>
+    <ion-label>Themed checkbox</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import {
+    IonCheckbox,
+    IonItem,
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonItem,
+      IonLabel
+    }
+  });
+</script>
+
+<style>
+  ion-checkbox {
+    --size: 32px;
+    --background-checked: #6815ec;
+  }
+  
+  ion-checkbox::part(container) {
+    border-radius: 6px;
+    border: 2px solid #6815ec;
+  }
+</style>
+```