diff --git a/src/components/inputs/Checkbox/Checkbox.story.tsx b/src/components/inputs/Checkbox/Checkbox.story.tsx
index ec788367..c68d7160 100755
--- a/src/components/inputs/Checkbox/Checkbox.story.tsx
+++ b/src/components/inputs/Checkbox/Checkbox.story.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 
 import { Checkbox, Props } from './Checkbox';
 
 import { Layout } from '../../../storybook';
 
+import styled from 'styled-components';
+
 export default {
   title: 'components/Checkbox',
   component: Checkbox,
@@ -32,16 +34,59 @@ export default {
   },
 };
 
-const Template: Story<Props> = (args) => {
+const Template: StoryFn<Props> = (args) => {
   return (
     <Layout.StoryVertical>
       <Checkbox {...args} />
     </Layout.StoryVertical>
   );
 };
+
 export const Controls = Template.bind({});
 Controls.storyName = 'Checkbox';
 Controls.args = {
   label: 'Checkbox label',
   value: 'checkbox1',
 };
+
+export const StickerSheet = () => (
+  <Layout.StoryVertical>
+    <Checkbox label="default" value="default" />
+    <Checkbox label="default disabled" value="default" disabled />
+    <Checkbox label="default checked" value="default" checked />
+    <Checkbox label="default checked disabled" checked disabled />
+    <Checkbox
+      label="default checked disabled indeterminate"
+      checked
+      disabled
+      indeterminate
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black"
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black disabled"
+      disabled
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black checked"
+      checked
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black disabled"
+      checked
+      disabled
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black disabled indeterminate"
+      checked
+      indeterminate
+      disabled
+    />
+  </Layout.StoryVertical>
+);
diff --git a/src/components/inputs/Input/Input.style.ts b/src/components/inputs/Input/Input.style.ts
index 36f1dc3f..1da9f22b 100755
--- a/src/components/inputs/Input/Input.style.ts
+++ b/src/components/inputs/Input/Input.style.ts
@@ -1,5 +1,5 @@
 import styled, { css, StyledComponent } from 'styled-components';
-import { rgba, darken } from 'polished';
+import { darken, rem } from 'polished';
 import { grayscale, slate } from '../../../color';
 
 import {
@@ -59,11 +59,15 @@ export const HiddenMark: StyledComponent<
 function fauxMarkChecked({ disabled }) {
   return css`
     &:checked ~ ${Faux} {
-      border: 1px solid ${rgba(blue(500), disabled ? 0 : 1)};
+      border-style: solid;
+      border-width: 1px;
+      ${!disabled &&
+      `border-color: var(--checked-color, ${blue(500)})`};
 
       &:after {
+        border-radius: ${rem(2)};
         opacity: ${disabled ? 0.5 : 1};
-        transform: scale(1.02);
+        transform: scale(1.1);
       }
     }
   `;
@@ -148,7 +152,7 @@ export function FauxType({ type, size }) {
         &:after {
           width: 100%;
           height: 100%;
-          border: 1px solid ${blue(500)};
+          border: 1px solid var(--checked-color, ${blue(500)});
           background-image: ${checkmark};
         }
       `;
diff --git a/src/components/inputs/Shared.ts b/src/components/inputs/Shared.ts
index c5991845..e6511300 100755
--- a/src/components/inputs/Shared.ts
+++ b/src/components/inputs/Shared.ts
@@ -159,7 +159,7 @@ export const FauxMark = (type, mirror) =>
     &:after {
       content: '';
       display: block;
-      background: ${blue(500)};
+      background: var(--checked-color, ${blue(500)});
       opacity: 0;
       transition: 200ms ease-in-out;
       transform: scale(0);