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>
+```
