diff --git a/components/atom/label/demo/articles/ArticleFontSize.tsx b/components/atom/label/demo/articles/ArticleFontSize.tsx
index 44841ad4a..5b558d8c0 100644
--- a/components/atom/label/demo/articles/ArticleFontSize.tsx
+++ b/components/atom/label/demo/articles/ArticleFontSize.tsx
@@ -18,11 +18,11 @@ const ArticleFontSize = ({className}: {className?: string}) => {
             <Box>
               <AtomLabel
                 name={`atomLabelName-${key}`}
-                htmlFor={`labelName-${key}`}
+                htmlFor={`labelFontSize-${key}`}
                 text={`Size ${value as string}`}
                 fontSize={value}
               />
-              <AtomInput />
+              <AtomInput id={`labelFontSize-${key}`} />
             </Box>
           </Cell>
         ))}
diff --git a/components/atom/label/demo/articles/ArticleInline.tsx b/components/atom/label/demo/articles/ArticleInline.tsx
index 71fba8b4a..b3e83ae29 100644
--- a/components/atom/label/demo/articles/ArticleInline.tsx
+++ b/components/atom/label/demo/articles/ArticleInline.tsx
@@ -1,5 +1,4 @@
 import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library'
-import AtomButton from '@s-ui/react-atom-button'
 import AtomCheckbox from '@s-ui/react-atom-checkbox'
 import AtomInput from '@s-ui/react-atom-input'
 
@@ -16,22 +15,26 @@ const ArticleInline = ({className}: {className?: string}) => {
       </Paragraph>
       <Grid cols={3} gutter={[8, 8]}>
         {[
-          <AtomInput key={0} />,
-          <AtomCheckbox key={1} checkedIcon={CheckedIcon} intermediateIcon={IndeterminateIcon} />,
-          <AtomButton key={2}>Button</AtomButton>
-        ].map((component, index) =>
+          ['input', ({...props}) => <AtomInput key={0} {...props} />],
+          [
+            'checkbox',
+            ({...props}) => (
+              <AtomCheckbox key={1} checkedIcon={CheckedIcon} indeterminateIcon={IndeterminateIcon} {...props} />
+            )
+          ]
+        ].map(([componentId, Component], index) =>
           ['left', undefined, 'right'].map((value, index) => (
             <Cell key={index} style={flexCenteredStyle}>
               <Box>
-                {value === 'right' && component}
+                {value === 'right' && <Component id={`labelInline-${value as string}-${componentId as string}`} />}
                 <AtomLabel
-                  name={`atomLabelName-${value as string}`}
-                  htmlFor={`labelName-${value as string}`}
+                  name={`atomLabelName-${value as string}-${componentId as string}`}
+                  htmlFor={`labelInline-${value as string}-${componentId as string}`}
                   text={`Label ${value as string}`}
                   optionalText="(Optional)"
                   inline={value as Inline}
                 />
-                {value !== 'right' && component}
+                {value !== 'right' && <Component id={`labelInline-${value as string}-${componentId as string}`} />}
               </Box>
             </Cell>
           ))
diff --git a/components/atom/label/demo/articles/ArticleType.tsx b/components/atom/label/demo/articles/ArticleType.tsx
index 1929ea3bf..ac289603f 100644
--- a/components/atom/label/demo/articles/ArticleType.tsx
+++ b/components/atom/label/demo/articles/ArticleType.tsx
@@ -19,12 +19,12 @@ const ArticleType = ({className}: {className?: string}) => {
             <Box mode={value === AtomLabelTypes.CONTRAST ? 'dark' : 'light'}>
               <AtomLabel
                 name={`atomLabelName-${key}`}
-                htmlFor={`labelName-${key}`}
+                htmlFor={`labelType-${key}`}
                 text={`Label ${value as string}`}
                 optionalText="(Optional)"
                 type={value}
               />
-              <AtomInput />
+              <AtomInput id={`labelType-${key}`} />
             </Box>
           </Cell>
         ))}
diff --git a/package-lock.json b/package-lock.json
index 0c4a120ae..ceaaa5973 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -133,7 +133,7 @@
     },
     "components/atom/checkbox": {
       "name": "@s-ui/react-atom-checkbox",
-      "version": "3.7.0",
+      "version": "3.8.0",
       "license": "MIT",
       "dependencies": {
         "@s-ui/component-dependencies": "1",
@@ -8366,9 +8366,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001692",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz",
-      "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==",
+      "version": "1.0.30001695",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz",
+      "integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==",
       "funding": [
         {
           "type": "opencollective",
@@ -12366,9 +12366,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
-      "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.9.0.tgz",
+      "integrity": "sha512-52n24W52sIueosRe0XZ8Ex5Yle+WbhfCKnV/gWXpbVR8FXNTfqdKEKUSypKso66VRHTvvcQxL44UTZbJRlCTnw==",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
       },