diff --git a/front/src/components/form/Checkbox.tsx b/front/src/components/form/Checkbox.tsx
index 34d5279a35..48b159fc26 100644
--- a/front/src/components/form/Checkbox.tsx
+++ b/front/src/components/form/Checkbox.tsx
@@ -31,7 +31,12 @@ const StyledContainer = styled.span`
 function Checkbox({ name, id }: OwnProps) {
   return (
     <StyledContainer>
-      <input type="checkbox" id={id} name={name}></input>
+      <input
+        type="checkbox"
+        data-testid="input-checkbox"
+        id={id}
+        name={name}
+      ></input>
     </StyledContainer>
   );
 }
diff --git a/front/src/components/form/__stories__/Checkbox.stories.tsx b/front/src/components/form/__stories__/Checkbox.stories.tsx
new file mode 100644
index 0000000000..903095f623
--- /dev/null
+++ b/front/src/components/form/__stories__/Checkbox.stories.tsx
@@ -0,0 +1,20 @@
+import { MemoryRouter } from 'react-router-dom';
+
+import Checkbox from '../Checkbox';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+};
+
+export const RegularCheckbox = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter initialEntries={['/companies']}>
+        <Checkbox name="selected-company-1" id="selected-company--1" />
+      </MemoryRouter>
+    </ThemeProvider>
+  );
+};
diff --git a/front/src/components/form/__tests__/Checkbox.test.tsx b/front/src/components/form/__tests__/Checkbox.test.tsx
new file mode 100644
index 0000000000..3e0180ad35
--- /dev/null
+++ b/front/src/components/form/__tests__/Checkbox.test.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import { RegularCheckbox } from '../__stories__/Checkbox.stories';
+
+it('Checks the NavItem renders', () => {
+  const { getByTestId } = render(<RegularCheckbox />);
+
+  expect(getByTestId('input-checkbox')).toHaveAttribute(
+    'name',
+    'selected-company-1',
+  );
+});