diff --git a/src/lib/components/checkbox/Checkbox.component.tsx b/src/lib/components/checkbox/Checkbox.component.tsx
index af6ead5572..1e1df4e30f 100644
--- a/src/lib/components/checkbox/Checkbox.component.tsx
+++ b/src/lib/components/checkbox/Checkbox.component.tsx
@@ -5,7 +5,7 @@ import { spacing, Stack } from '../../spacing';
import { Text } from '../text/Text.component';
import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
-type Props = {
+export type Props = {
label?: string;
value?: string;
checked?: boolean;
@@ -53,6 +53,8 @@ const StyledCheckbox = styled.label<{
color: ${(props) => props.theme.textPrimary};
vertical-align: middle;
-webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
background: none;
border: 0;
outline: 0;
diff --git a/stories/Checkbox/checkbox.guideline.mdx b/stories/Checkbox/checkbox.guideline.mdx
index 2ef30922b3..73fd989554 100644
--- a/stories/Checkbox/checkbox.guideline.mdx
+++ b/stories/Checkbox/checkbox.guideline.mdx
@@ -19,11 +19,15 @@ Checkboxes are used to select one or more options in a list.
## Usage
+Unlike the radio element it is possible to select more than one option. \
A tick/check indicates that the element is selected. \
-Unlike the radio element it is possible to select more than one option.
+It is possible to use the checkbox to enable or disable an option:
+
+
+
## State Variations
### Indeterminate State
diff --git a/stories/Checkbox/checkbox.stories.tsx b/stories/Checkbox/checkbox.stories.tsx
index 02fda0517b..4d54dd4130 100644
--- a/stories/Checkbox/checkbox.stories.tsx
+++ b/stories/Checkbox/checkbox.stories.tsx
@@ -1,20 +1,39 @@
import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React, { ComponentProps, useEffect, useRef } from 'react';
-import { Checkbox } from '../../src/lib/components/checkbox/Checkbox.component';
+import {
+ Checkbox,
+ Props,
+} from '../../src/lib/components/checkbox/Checkbox.component';
import { Column } from '../../src/lib/components/tablev2/Tablev2.component';
-import { Box, Table } from '../../src/lib/next';
-import { Wrapper } from '../common';
+import { Box, Input, Table } from '../../src/lib/next';
+import { Form, FormGroup, FormSection } from '../../src/lib';
-type CheckboxStory = StoryObj;
+type CheckboxStory = StoryObj;
-const meta: Meta = {
+const meta: Meta = {
title: 'Components/Inputs/Checkbox',
component: Checkbox,
args: {
label: 'interested ?',
onChange: action('Checkbox clicked'),
},
+ argTypes: {
+ onChange: {
+ description:
+ 'Function to be called when the checkbox is clicked, optional',
+ },
+ label: { control: 'text', description: 'Label of the checkbox, optional' },
+ checked: {
+ control: 'boolean',
+ description: 'Control if the checkbox is checked, optional',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Control if the checkbox is disabled, optional',
+ },
+ value: { control: 'text' },
+ },
};
export default meta;
@@ -34,6 +53,22 @@ export const ChoiceCheckbox: CheckboxStory = {
},
};
+export const OptionCheckbox: CheckboxStory = {
+ render: () => {
+ return (
+
+ );
+ },
+};
+
export const IndeterminateCheckbox: StoryObj<
ComponentProps & { 'data-cy': string }
> = {