diff --git a/stories/Checkbox/checkbox.guideline.mdx b/stories/Checkbox/checkbox.guideline.mdx
index 1781926384..1ed55f95c7 100644
--- a/stories/Checkbox/checkbox.guideline.mdx
+++ b/stories/Checkbox/checkbox.guideline.mdx
@@ -23,8 +23,6 @@ Checkboxes are used to select one or multiple options in a list.
### Padding
-### Checkbox spacing
-
## Usage
@@ -45,11 +43,12 @@ layout="fullscreen"
### Indeterminate State
-Usecase ?
+Apart from checked and unchecked, checkboxes can have a third state : indeterminate.
+When a checkbox has children checkboxes, this state indicates that some of the children boxes are checked.
-
+
### Playground
-
-
+
+
diff --git a/stories/Checkbox/checkbox.stories.tsx b/stories/Checkbox/checkbox.stories.tsx
index 7a8ebf72e7..1bfefa4c7d 100644
--- a/stories/Checkbox/checkbox.stories.tsx
+++ b/stories/Checkbox/checkbox.stories.tsx
@@ -1,8 +1,10 @@
-import React, { ComponentProps, useEffect, useRef } from 'react';
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 { Column } from '../../src/lib/components/tablev2/Tablev2.component';
+import { Box, Table } from '../../src/lib/next';
import { Wrapper } from '../common';
-import { Meta, StoryObj } from '@storybook/react';
type CheckboxStory = StoryObj;
@@ -11,9 +13,7 @@ const meta: Meta = {
component: Checkbox,
decorators: [
(story) => (
-
- {story()}
-
+ {story()}
),
],
args: {
@@ -82,4 +82,53 @@ export const DisabledUncheckedCheckbox: CheckboxStory = {
},
};
-export const Playground: CheckboxStory = {};
+export const IndeterminateUseCase = {
+ render: ({}) => {
+ const data = [
+ {
+ name: 'test 1',
+ volume: 1,
+ capacity: '1Gi',
+ },
+ {
+ name: 'test 2',
+ volume: 1,
+ capacity: '1Gi',
+ },
+ {
+ name: 'test 2',
+ volume: 1,
+ capacity: '1Gi',
+ },
+ ];
+
+ const columns: Column<(typeof data)[number]>[] = [
+ {
+ Header: 'Name',
+ accessor: 'name',
+ },
+ {
+ Header: 'Volume',
+ accessor: 'volume',
+ },
+ {
+ Header: 'Capacity',
+ accessor: 'capacity',
+ },
+ ];
+
+ return (
+
+
+
+ {
+ console.log('Table.MultiSelectableContent selected row', rows);
+ }}
+ />
+
+
+
+ );
+ },
+};