[WIP] Component Playground

docs/src/components/playground/Checkbox.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { Checkbox } from "carbon-components-svelte";
+
+  export let value = undefined;
+</script>
+
+<Checkbox bind:checked="{value}" {...$$restProps} />

docs/src/components/playground/Playground.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { Form } from "carbon-components-svelte";
+  import Checkbox from "./Checkbox.svelte";
+  import TextInput from "./TextInput.svelte";
+
+  export let component;
+  export let props;
+
+  const components = { Checkbox, TextInput };
+  const usedProps = {};
+</script>
+
+<div class="playground">
+  <div class="element">
+    <div class="element-wrapper">
+      <svelte:component this="{component}" {...usedProps} />
+    </div>
+  </div>
+
+  <div class="options">
+    <h4 class="options-heading">Options</h4>
+    <div class="options-content">
+      <Form>
+        {#each Object.entries(props) as [name, prop]}
+          <svelte:component
+            this="{components[prop.component]}"
+            bind:value="{usedProps[name]}"
+            {...prop.props}
+          />
+        {/each}
+      </Form>
+    </div>
+  </div>
+</div>
+
+<style>
+  .playground {
+    border: 1px solid var(--cds-ui-03);
+    display: flex;
+    flex-direction: row;
+    margin: 0 -1rem;
+    max-width: 56rem;
+  }
+
+  .element {
+    border-right: 1px solid var(--cds-ui-03);
+    flex-basis: 60%;
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+  }
+
+  .options {
+    flex-basis: 40%;
+  }
+
+  .options-heading {
+    border-bottom: 1px solid var(--cds-ui-03);
+    padding: 0.5rem 1rem;
+  }
+
+  .options-content {
+    padding: 1rem;
+  }
+</style>

docs/src/components/playground/TextInput.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { TextInput } from "carbon-components-svelte";
+
+  export let value;
+</script>
+
+<TextInput style="margin-bottom: 1rem;" bind:value {...$$restProps} />

docs/src/pages/components/Checkbox.svx

@@ -1,8 +1,38 @@
 <script>
   import { Checkbox } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
+  import Playground from "../../components/playground/Playground.svelte";
 </script>
 
+<Playground
+    component={Checkbox}
+    props={{
+        labelText: {
+            component: "TextInput",
+            props: { value: "Label text", labelText: "Label" }
+        },
+        checked: {
+            component: "Checkbox",
+            props: { labelText: "Checked" }
+        },
+        indeterminate: {
+            component: "Checkbox",
+            props: { labelText: "Indeterminate" }
+        },
+        hideLabel: {
+            component: "Checkbox",
+            props: { labelText: "Hide label" }
+        },
+        disabled: {
+            component: "Checkbox",
+            props: { labelText: "Disabled" }
+        },
+        skeleton: {
+            component: "Checkbox",
+            props: { labelText: "Skeleton" }
+        },
+    }} />
+
 ### Default (unchecked)
 
 <Checkbox labelText="Label text" />

docs/svelte.config.js

@@ -61,6 +61,7 @@ function plugin() {
     if (
       node.lang !== "svelte" &&
       !node.value.startsWith("<FileSource") &&
+      !node.value.startsWith("<Playground") &&
       !node.value.startsWith("<script>") &&
       !node.value.match(/svx-ignore/g)
     ) {