From d81aa08e1776a06ea88449d6af1c814c71dbd846 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Thu, 23 Jul 2026 17:25:53 +0530
Subject: [PATCH 1/5] Change the color of texts/ checkbox to the background
 color

---
 .../InitialsAvatar/StyledWrapper.ts           |  2 +-
 .../KeyValueTable/KeyValueTable.css           | 17 +++++++++++-
 .../KeyValueTable/KeyValueTable.tsx           | 26 ++++++++++++++-----
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/oc-docs/src/components/InitialsAvatar/StyledWrapper.ts b/packages/oc-docs/src/components/InitialsAvatar/StyledWrapper.ts
index b3eda359..dfe28bc0 100644
--- a/packages/oc-docs/src/components/InitialsAvatar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/InitialsAvatar/StyledWrapper.ts
@@ -9,7 +9,7 @@ export const StyledWrapper = styled.span`
   flex: none;
   border-radius: var(--oc-radius);
   background: linear-gradient(135deg, #d37f17 0%, #dc9741 100%);
-  color: #fff;
+  color: var(--oc-background-base);
   font-family: var(--font-mono);
   font-size: var(--oc-font-size-xs);
   font-weight: 700;
diff --git a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css
index 79c8b08c..f9455cc1 100644
--- a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css
+++ b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css
@@ -112,6 +112,7 @@
   align-items: center;
   width: 1rem;
   height: 1rem;
+  position: relative;
 }
 
 .key-value-table .key-cell .highlight-input,
@@ -157,7 +158,21 @@
 .key-value-table .checkbox-input:checked {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3%206.2%205%208.4%209%203.8'/%3E%3C/svg%3E");
+}
+
+.key-value-table .checkbox-check {
+  position: absolute;
+  inset: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin: auto;
+  pointer-events: none;
+  color: var(--oc-background-base);
+  opacity: 0;
+}
+
+.key-value-table .checkbox-input:checked + .checkbox-check {
+  opacity: 1;
 }
 
 .key-value-table .text-input {
diff --git a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
index 237807e3..20cd7583 100644
--- a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
+++ b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
@@ -179,13 +179,25 @@ const KeyValueTable: React.FC<KeyValueTableProps> = ({
                       {showEnabled && (
                         <span className="checkbox-slot">
                           {!isLastEmptyRow && (
-                            <input
-                              type="checkbox"
-                              className="checkbox-input"
-                              checked={row.enabled}
-                              aria-label={row.name ? `Enable ${row.name}` : 'Enable row'}
-                              onChange={(e) => updateField(index, 'enabled', e.target.checked)}
-                            />
+                            <>
+                              <input
+                                type="checkbox"
+                                className="checkbox-input"
+                                checked={row.enabled}
+                                aria-label={row.name ? `Enable ${row.name}` : 'Enable row'}
+                                onChange={(e) => updateField(index, 'enabled', e.target.checked)}
+                              />
+                              <svg className="checkbox-check" viewBox="0 0 12 12" aria-hidden="true">
+                                <path
+                                  fill="none"
+                                  stroke="currentColor"
+                                  strokeWidth="1.67"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  d="M3 6.2 5 8.4 9 3.8"
+                                />
+                              </svg>
+                            </>
                           )}
                         </span>
                       )}

From 1fd849c998057838cbd85b2aea67dbb0cfebab5e Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Thu, 23 Jul 2026 17:30:05 +0530
Subject: [PATCH 2/5] Fix the datatype visual for environment data

---
 .../EnvironmentsView/EnvVarCards/EnvVarCards.tsx    | 13 ++++++++++---
 .../EnvironmentsView/EnvVarCards/StyledWrapper.ts   |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
index d6af0b14..23d17384 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
@@ -69,7 +69,14 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
               </div>
               <div className="value">
                 {row.secret ? (
-                  <SecretValue value={row.value} placeholder="Value" editByDefault={secretEditByDefault} multiline={editableDataType} onChange={(v) => updateRow(index, { value: v })} className="value-secret" />
+                  <SecretValue 
+                    value={row.value} 
+                    placeholder="Value" 
+                    editByDefault={secretEditByDefault} 
+                    multiline={editableDataType} 
+                    onChange={(v) => updateRow(index, { value: v })} 
+                    className="value-secret" 
+                  />
                 ) : (
                   <textarea
                     className="value-input"
@@ -80,14 +87,14 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
                     onChange={(e) => updateRow(index, { value: e.target.value })}
                   />
                 )}
-                {editableDataType && !isBlankRow ? (
+                {editableDataType && !isBlankRow && row.value && (
                   <VariableTypeControl
                     dataType={toDataType(row.dataType)}
                     value={row.value}
                     index={index}
                     onChange={(type) => updateRow(index, { dataType: type })}
                   />
-                ) : null}
+                )}
               </div>
             </div>
           </div>
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
index c1be4a7b..191a5846 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
@@ -93,6 +93,7 @@ export const StyledWrapper = styled.div`
 
   .env-card .value .var-type {
     flex-shrink: 0;
+    margin-left: auto;
   }
 
   .env-card .delete {

From a06dbb8e694048153b78f213169c546a09eea5f4 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Thu, 23 Jul 2026 17:48:23 +0530
Subject: [PATCH 3/5] Fix failing tests

---
 .../Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx  | 4 ++--
 .../Content/Views/Common/HeadersTab/HeadersTab.spec.tsx  | 9 +++++++--
 .../Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx  | 3 +--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx
index c2e05b3a..1f45e760 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx
+++ b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx
@@ -54,9 +54,9 @@ describe('SidebarNavLink', () => {
 
   it('indents by level via margin (chevron + gap step of 19px) with a uniform 8px inner pad', () => {
     const html = renderToStaticMarkup(<SidebarNavLink label="Nested" level={2} />);
-    // level*19 + 4 = 42px -> 42/16 = 2.625rem margin; the 8px (0.5rem) pad is uniform
+    // level*19 = 38px -> 38/16 = 2.375rem margin; the 8px (0.5rem) pad is uniform
     // across folders and leaves so glyphs line up under their parent.
-    expect(html).toContain('margin-left:2.625rem');
+    expect(html).toContain('margin-left:2.375rem');
     expect(html).toContain('padding-left:0.5rem');
   });
 });
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx
index 232580be..aad27adf 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx
@@ -24,9 +24,14 @@ describe('HeadersTab', () => {
     expect(values).toContain('text/html');
   });
 
-  it('renders the default title and a provided description', () => {
+  it('renders a provided title and description', () => {
     const root = useRenderToDom(
-      <HeadersTab headers={[]} onHeadersChange={noop} description="Request headers sent with the call" />
+      <HeadersTab
+        headers={[]}
+        onHeadersChange={noop}
+        title="Headers"
+        description="Request headers sent with the call"
+      />
     );
     expect(query(root, '.title').text.trim()).toBe('Headers');
     expect(query(root, '.description').text.trim()).toBe('Request headers sent with the call');
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx
index 8e38a97e..7d0d56f1 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx
@@ -18,9 +18,8 @@ describe('ScriptsTab', () => {
     expect(query(root, '[data-testid="scripts-tabs-tab-post-response"]').text.trim()).toBe('Post response');
   });
 
-  it('renders the default title and the Tests section', () => {
+  it('renders the Tests section by default', () => {
     const root = useRenderToDom(<ScriptsTab scripts={{}} onScriptChange={noop} />);
-    expect(query(root, '.title').text.trim()).toBe('Scripts');
     expect(query(root, '.label').text.trim()).toBe('Tests');
   });
 

From 8b4bd7388c49ad951f7c110e3d058513f585004a Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Thu, 23 Jul 2026 18:04:12 +0530
Subject: [PATCH 4/5] Moved the check icon to a asset svg

---
 .../oc-docs/src/assets/icons/CheckIcon.tsx    | 21 +++++++++++++++++++
 packages/oc-docs/src/assets/icons/index.ts    |  1 +
 .../KeyValueTable/KeyValueTable.tsx           | 13 ++----------
 3 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 packages/oc-docs/src/assets/icons/CheckIcon.tsx

diff --git a/packages/oc-docs/src/assets/icons/CheckIcon.tsx b/packages/oc-docs/src/assets/icons/CheckIcon.tsx
new file mode 100644
index 00000000..20bad838
--- /dev/null
+++ b/packages/oc-docs/src/assets/icons/CheckIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { baseIconProps } from './baseIconProps';
+
+interface CheckIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CheckIcon: React.FC<CheckIconProps> = ({ className, width=24, height=24 }) => (
+  <svg {...baseIconProps} className={className} width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.67"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3 6.2 5 8.4 9 3.8"
+    />
+  </svg>
+);
diff --git a/packages/oc-docs/src/assets/icons/index.ts b/packages/oc-docs/src/assets/icons/index.ts
index a54d4b20..b72c9aec 100644
--- a/packages/oc-docs/src/assets/icons/index.ts
+++ b/packages/oc-docs/src/assets/icons/index.ts
@@ -27,3 +27,4 @@ export * from './SidebarToggleIcon';
 export * from './SettingsIcon';
 export * from './TrashIcon';
 export * from './ExampleIcon';
+export * from './CheckIcon';
\ No newline at end of file
diff --git a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
index 20cd7583..29fc6769 100644
--- a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
+++ b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useResolvedVariables } from '../../hooks/useVariableResolver';
 import { useEditableRows } from '../../hooks/useEditableRows';
 import { Tooltip } from '../../ui/Tooltip/Tooltip';
-import { WarningIcon } from '../../assets/icons';
+import { CheckIcon, WarningIcon } from '../../assets/icons';
 import HighlightedInput from '../HighlightedInput/HighlightedInput';
 import { SecretValue } from '../../ui/SecretValue/SecretValue';
 import './KeyValueTable.css';
@@ -187,16 +187,7 @@ const KeyValueTable: React.FC<KeyValueTableProps> = ({
                                 aria-label={row.name ? `Enable ${row.name}` : 'Enable row'}
                                 onChange={(e) => updateField(index, 'enabled', e.target.checked)}
                               />
-                              <svg className="checkbox-check" viewBox="0 0 12 12" aria-hidden="true">
-                                <path
-                                  fill="none"
-                                  stroke="currentColor"
-                                  strokeWidth="1.67"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  d="M3 6.2 5 8.4 9 3.8"
-                                />
-                              </svg>
+                              <CheckIcon className='checkbox-check' width={12} height={12} />
                             </>
                           )}
                         </span>

From d0c29a49f2afdbf2f21af743217289b8a231a715 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Thu, 23 Jul 2026 19:01:06 +0530
Subject: [PATCH 5/5] Replace Checkbox component everywhere, and add new tests
 (unit and e2e) for the same

---
 .../environments/env-editor.component.ts      | 12 ++++++
 .../key-value-table.component.ts              |  5 +++
 .../tests/playground/env-add-variable.spec.ts | 20 +++++++++
 .../tests/playground/keyvalue-table.spec.ts   | 15 +++++++
 .../KeyValueTable/KeyValueTable.css           | 36 ----------------
 .../KeyValueTable/KeyValueTable.tsx           | 18 ++++----
 .../EnvVarCards/EnvVarCards.tsx               |  6 +--
 .../EnvVarCards/StyledWrapper.ts              |  3 --
 .../oc-docs/src/styles/theme.generated.css    |  6 +++
 packages/oc-docs/src/theme/tokens/dark.ts     |  6 +++
 packages/oc-docs/src/theme/tokens/light.ts    |  6 +++
 .../oc-docs/src/ui/Checkbox/Checkbox.spec.tsx | 29 +++++++++++++
 packages/oc-docs/src/ui/Checkbox/Checkbox.tsx | 34 +++++++++++++++
 .../oc-docs/src/ui/Checkbox/StyledWrapper.ts  | 41 +++++++++++++++++++
 14 files changed, 184 insertions(+), 53 deletions(-)
 create mode 100644 packages/oc-docs/src/ui/Checkbox/Checkbox.spec.tsx
 create mode 100644 packages/oc-docs/src/ui/Checkbox/Checkbox.tsx
 create mode 100644 packages/oc-docs/src/ui/Checkbox/StyledWrapper.ts

diff --git a/packages/oc-docs/e2e/components/environments/env-editor.component.ts b/packages/oc-docs/e2e/components/environments/env-editor.component.ts
index fedb0222..25d4342b 100644
--- a/packages/oc-docs/e2e/components/environments/env-editor.component.ts
+++ b/packages/oc-docs/e2e/components/environments/env-editor.component.ts
@@ -1,7 +1,19 @@
+import type { Locator } from '@playwright/test';
 import { BaseComponent } from '../base.component';
 
 export class EnvEditorComponent extends BaseComponent {
   readonly cards = this.page.getByTestId('env-var-cards');
+  readonly cardItems = this.cards.locator('.env-card');
   readonly nameInputs = this.cards.getByPlaceholder('Name');
   readonly valueInputs = this.cards.getByPlaceholder('Value');
+
+  /** The per-variable enable/disable checkbox, addressed by the variable name via its aria-label. */
+  enableToggle(name: string): Locator {
+    return this.cards.getByRole('checkbox', { name: `Enable ${name}` });
+  }
+
+  /** The card that owns the named variable, matched via its enable checkbox. */
+  cardFor(name: string): Locator {
+    return this.cardItems.filter({ has: this.page.getByRole('checkbox', { name: `Enable ${name}` }) });
+  }
 }
diff --git a/packages/oc-docs/e2e/components/key-value-table/key-value-table.component.ts b/packages/oc-docs/e2e/components/key-value-table/key-value-table.component.ts
index 41b671db..ab45e001 100644
--- a/packages/oc-docs/e2e/components/key-value-table/key-value-table.component.ts
+++ b/packages/oc-docs/e2e/components/key-value-table/key-value-table.component.ts
@@ -19,4 +19,9 @@ export class KeyValueTableComponent extends BaseComponent {
     this.cellErrors = page.getByTestId(`${testId}-error`);
     this.autocomplete = page.getByTestId('variable-autocomplete');
   }
+
+  /** The per-row enable/disable checkbox, addressed by the row name via its aria-label. */
+  enableToggle(name: string): Locator {
+    return this.table.getByRole('checkbox', { name: `Enable ${name}` });
+  }
 }
diff --git a/packages/oc-docs/e2e/tests/playground/env-add-variable.spec.ts b/packages/oc-docs/e2e/tests/playground/env-add-variable.spec.ts
index 50e5938d..cdaea6bc 100644
--- a/packages/oc-docs/e2e/tests/playground/env-add-variable.spec.ts
+++ b/packages/oc-docs/e2e/tests/playground/env-add-variable.spec.ts
@@ -18,4 +18,24 @@ test.describe('Environment variables — adding rows (card view)', () => {
     await expect(envEditor.nameInputs.nth(before - 1)).toHaveValue('newVariable');
     await expect(envEditor.valueInputs.nth(before - 1)).toHaveValue('newValue');
   });
+
+  test('toggling a variable checkbox enables/disables its card', async ({ playground, envEditor }) => {
+    await playground.open('inline');
+    await playground.openEnvironments();
+
+    const toggle = envEditor.enableToggle('host');
+    const card = envEditor.cardFor('host');
+    const disabled = /(^|\s)disabled(\s|$)/;
+
+    await expect(toggle).toBeChecked();
+    await expect(card).not.toHaveClass(disabled);
+
+    await toggle.uncheck();
+    await expect(toggle).not.toBeChecked();
+    await expect(card).toHaveClass(disabled);
+
+    await toggle.check();
+    await expect(toggle).toBeChecked();
+    await expect(card).not.toHaveClass(disabled);
+  });
 });
diff --git a/packages/oc-docs/e2e/tests/playground/keyvalue-table.spec.ts b/packages/oc-docs/e2e/tests/playground/keyvalue-table.spec.ts
index ecf07b77..fa98c474 100644
--- a/packages/oc-docs/e2e/tests/playground/keyvalue-table.spec.ts
+++ b/packages/oc-docs/e2e/tests/playground/keyvalue-table.spec.ts
@@ -56,4 +56,19 @@ test.describe('KeyValueTable — tooltips & mobile scroll', () => {
     await expect(error).toBeVisible();
     await expect(error).toHaveAttribute('aria-label', 'Header name cannot contain spaces or newlines');
   });
+
+  test('a named row can be enabled and disabled via its checkbox', async ({ playground }) => {
+    const { keyValueTable } = playground;
+    // The trailing blank row has no checkbox; naming a row promotes it to a real row with one.
+    await keyValueTable.nameInputs.last().fill('X-Custom');
+
+    const toggle = keyValueTable.enableToggle('X-Custom');
+    await expect(toggle).toBeChecked();
+
+    await toggle.uncheck();
+    await expect(toggle).not.toBeChecked();
+
+    await toggle.check();
+    await expect(toggle).toBeChecked();
+  });
 });
diff --git a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css
index f9455cc1..7b7a522b 100644
--- a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css
+++ b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.css
@@ -109,10 +109,8 @@
 .key-value-table .checkbox-slot {
   flex: none;
   display: inline-flex;
-  align-items: center;
   width: 1rem;
   height: 1rem;
-  position: relative;
 }
 
 .key-value-table .key-cell .highlight-input,
@@ -141,40 +139,6 @@
   vertical-align: middle;
 }
 
-.key-value-table .checkbox-input {
-  appearance: none;
-  -webkit-appearance: none;
-  margin: 0;
-  width: 1rem;
-  height: 1rem;
-  border: 0.0625rem solid var(--oc-table-border);
-  border-radius: 0.1875rem;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-}
-
-.key-value-table .checkbox-input:checked {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.key-value-table .checkbox-check {
-  position: absolute;
-  inset: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  margin: auto;
-  pointer-events: none;
-  color: var(--oc-background-base);
-  opacity: 0;
-}
-
-.key-value-table .checkbox-input:checked + .checkbox-check {
-  opacity: 1;
-}
-
 .key-value-table .text-input {
   width: 100%;
   border: 0.0625rem solid transparent;
diff --git a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
index 29fc6769..dea08e61 100644
--- a/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
+++ b/packages/oc-docs/src/components/KeyValueTable/KeyValueTable.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { useResolvedVariables } from '../../hooks/useVariableResolver';
 import { useEditableRows } from '../../hooks/useEditableRows';
 import { Tooltip } from '../../ui/Tooltip/Tooltip';
-import { CheckIcon, WarningIcon } from '../../assets/icons';
+import { WarningIcon } from '../../assets/icons';
 import HighlightedInput from '../HighlightedInput/HighlightedInput';
 import { SecretValue } from '../../ui/SecretValue/SecretValue';
 import './KeyValueTable.css';
+import Checkbox from '../../ui/Checkbox/Checkbox';
 
 export interface KeyValueRow {
   id: string;
@@ -179,16 +180,11 @@ const KeyValueTable: React.FC<KeyValueTableProps> = ({
                       {showEnabled && (
                         <span className="checkbox-slot">
                           {!isLastEmptyRow && (
-                            <>
-                              <input
-                                type="checkbox"
-                                className="checkbox-input"
-                                checked={row.enabled}
-                                aria-label={row.name ? `Enable ${row.name}` : 'Enable row'}
-                                onChange={(e) => updateField(index, 'enabled', e.target.checked)}
-                              />
-                              <CheckIcon className='checkbox-check' width={12} height={12} />
-                            </>
+                            <Checkbox
+                              checked={row.enabled}
+                              ariaLabel={row.name ? `Enable ${row.name}` : 'Enable row'}
+                              onChange={(e) => updateField(index, 'enabled', e.target.checked)}
+                            />
                           )}
                         </span>
                       )}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
index 23d17384..b0a5534a 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
@@ -7,6 +7,7 @@ import { cx } from '../../../../../../utils/cx';
 import { toDataType } from '../../../../../../utils/variableDataType';
 import { VariableTypeControl } from '../../Common/VariableTypeControl/VariableTypeControl';
 import { StyledWrapper } from './StyledWrapper';
+import Checkbox from '../../../../../../ui/Checkbox/Checkbox';
 
 interface EnvVarCardsProps {
   rows: KeyValueRow[];
@@ -38,11 +39,10 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
         return (
           <div key={row.id} className={cx('env-card', { disabled: !row.enabled })}>
             {!isBlankRow && (
-              <input
-                type="checkbox"
+              <Checkbox
                 className="enabled"
                 checked={row.enabled}
-                aria-label={row.name ? `Enable ${row.name}` : 'Enable variable'}
+                ariaLabel={row.name ? `Enable ${row.name}` : 'Enable variable'}
                 onChange={(e) => updateRow(index, { enabled: e.target.checked })}
               />
             )}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
index 191a5846..6983e009 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
@@ -20,9 +20,6 @@ export const StyledWrapper = styled.div`
 
   .env-card .enabled {
     margin-top: 2px;
-    cursor: pointer;
-    accent-color: var(--oc-colors-accent);
-    flex-shrink: 0;
   }
 
   .env-card .body {
diff --git a/packages/oc-docs/src/styles/theme.generated.css b/packages/oc-docs/src/styles/theme.generated.css
index 5b9e9127..4a0c159e 100644
--- a/packages/oc-docs/src/styles/theme.generated.css
+++ b/packages/oc-docs/src/styles/theme.generated.css
@@ -82,6 +82,9 @@
   --oc-input-focus-border: #8b8b8b;
   --oc-input-placeholder-color: #B0B0B0;
   --oc-input-placeholder-opacity: 0.8;
+  --oc-checkbox-border: #e5e5e5;
+  --oc-checkbox-checked-bg: hsl(33, 80%, 46%);
+  --oc-checkbox-check-color: #ffffff;
   --oc-sidebar-color: #343434;
   --oc-sidebar-muted: #838383;
   --oc-sidebar-bg: #f8f8f8;
@@ -402,6 +405,9 @@
   --oc-input-focus-border: rgba(228,174,73,0.8);
   --oc-input-placeholder-color: #aaa;
   --oc-input-placeholder-opacity: 0.6;
+  --oc-checkbox-border: #333333;
+  --oc-checkbox-checked-bg: hsl(39, 74%, 59%);
+  --oc-checkbox-check-color: #000000;
   --oc-sidebar-color: hsl(0deg 0% 80%);
   --oc-sidebar-muted: #aaa;
   --oc-sidebar-bg: hsl(0deg 0% 10%);
diff --git a/packages/oc-docs/src/theme/tokens/dark.ts b/packages/oc-docs/src/theme/tokens/dark.ts
index 4d4e1ba4..56e07fc3 100644
--- a/packages/oc-docs/src/theme/tokens/dark.ts
+++ b/packages/oc-docs/src/theme/tokens/dark.ts
@@ -227,6 +227,12 @@ export const dark: Theme = {
     }
   },
 
+  checkbox: {
+    border: p.border.BORDER1,
+    checkedBg: p.primary.SOLID,
+    checkColor: p.utility.BLACK
+  },
+
   sidebar: {
     color: p.text.BASE,
     muted: p.text.SUBTEXT1,
diff --git a/packages/oc-docs/src/theme/tokens/light.ts b/packages/oc-docs/src/theme/tokens/light.ts
index 487c71e9..79cf7ee2 100644
--- a/packages/oc-docs/src/theme/tokens/light.ts
+++ b/packages/oc-docs/src/theme/tokens/light.ts
@@ -220,6 +220,12 @@ export const light: Theme = {
     }
   },
 
+  checkbox: {
+    border: p.border.BORDER1,
+    checkedBg: p.primary.SOLID,
+    checkColor: p.utility.WHITE
+  },
+
   sidebar: {
     color: p.text.BASE,
     muted: p.text.SUBTEXT1,
diff --git a/packages/oc-docs/src/ui/Checkbox/Checkbox.spec.tsx b/packages/oc-docs/src/ui/Checkbox/Checkbox.spec.tsx
new file mode 100644
index 00000000..a0bdc29e
--- /dev/null
+++ b/packages/oc-docs/src/ui/Checkbox/Checkbox.spec.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { useRenderToDom } from '../../hooks/useRenderToDom';
+import { getByTestId } from '../../test-utils/dom';
+import Checkbox from './Checkbox';
+
+const noop = () => {};
+
+describe('Checkbox', () => {
+  it('renders a checkbox input carrying the aria-label', () => {
+    const root = useRenderToDom(<Checkbox testId="cb" checked={false} ariaLabel="Enable host" onChange={noop} />);
+    const input = getByTestId(root, 'cb-input');
+    expect(input.getAttribute('type')).toBe('checkbox');
+    expect(input.getAttribute('aria-label')).toBe('Enable host');
+  });
+
+  it('reflects the checked prop on the input', () => {
+    const checked = useRenderToDom(<Checkbox testId="cb" checked ariaLabel="Enable host" onChange={noop} />);
+    expect(getByTestId(checked, 'cb-input').hasAttribute('checked')).toBe(true);
+
+    const unchecked = useRenderToDom(<Checkbox testId="cb" checked={false} ariaLabel="Enable host" onChange={noop} />);
+    expect(getByTestId(unchecked, 'cb-input').hasAttribute('checked')).toBe(false);
+  });
+
+  it('applies the provided className to the wrapper', () => {
+    const root = useRenderToDom(<Checkbox testId="cb" className="enabled" checked ariaLabel="Enable host" onChange={noop} />);
+    expect(getByTestId(root, 'cb').classList.contains('enabled')).toBe(true);
+  });
+});
diff --git a/packages/oc-docs/src/ui/Checkbox/Checkbox.tsx b/packages/oc-docs/src/ui/Checkbox/Checkbox.tsx
new file mode 100644
index 00000000..3d255364
--- /dev/null
+++ b/packages/oc-docs/src/ui/Checkbox/Checkbox.tsx
@@ -0,0 +1,34 @@
+import React, { ChangeEvent } from "react";
+import { StyledWrapper } from "./StyledWrapper";
+import { CheckIcon } from "../../assets/icons";
+
+interface CheckboxProps {
+  className?: string;
+  checked: boolean;
+  ariaLabel: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  testId?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  className,
+  checked,
+  ariaLabel,
+  onChange,
+  testId
+}) => {
+  return (
+    <StyledWrapper className={className} data-testid={testId}>
+      <input
+        type="checkbox"
+        checked={checked}
+        aria-label={ariaLabel}
+        onChange={onChange}
+        data-testid={testId && `${testId}-input`}
+      />
+      <CheckIcon className='checkbox-check' width={12} height={12} />
+    </StyledWrapper>
+  );
+}
+
+export default Checkbox;
\ No newline at end of file
diff --git a/packages/oc-docs/src/ui/Checkbox/StyledWrapper.ts b/packages/oc-docs/src/ui/Checkbox/StyledWrapper.ts
new file mode 100644
index 00000000..66e0263f
--- /dev/null
+++ b/packages/oc-docs/src/ui/Checkbox/StyledWrapper.ts
@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.div`
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+
+  input {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid var(--oc-checkbox-border);
+    border-radius: 0.1875rem;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  input:checked {
+    background-color: var(--oc-checkbox-checked-bg);
+    border-color: var(--oc-checkbox-checked-bg);
+  }
+
+  .checkbox-check {
+    position: absolute;
+    inset: 0;
+    width: 0.75rem;
+    height: 0.75rem;
+    margin: auto;
+    pointer-events: none;
+    color: var(--oc-checkbox-check-color);
+    opacity: 0;
+  }
+
+  input:checked + .checkbox-check {
+    opacity: 1;
+  }
+`;