diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx
index db40b4a781..345b12c5c1 100644
--- a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx
+++ b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx
@@ -1,9 +1,48 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Primary, Controls, Canvas, ArgTypes } from '@storybook/blocks';
+/* import { ArgsTable } from '@storybook/addon-essentials'; */
import * as useCheckboxGroupStories from './useCheckboxGroup.stories';
+import { useCheckboxGroup } from './useCheckboxGroup';
# useCheckboxGroup
-Information coming.
-See Checkbox in the meantime.
+En react hook for å koble sammen en gruppe av checkboxer.
+
+
+
+## Bruk
+
+Fra `useCheckboxGroup` henter du ut `getCheckboxProps` som du sprer på checkboxene dine.
+Du kan også hente ut `validationMessageProps`, `value` og `setValue`.
+
+I `getCheckboxProps` denne funksjonen er første parameter `value` som er en unik identifikator for checkboxen, eller eit objekt med alt som kan legges på en checkbox.
+Dersom du sender inn eit object, så må du passe på å sette `value`.
+
+**Det er viktig at du sender inn props i `getCheckboxProps`, slik at du ikke overskriver vår funksjonalitet.**
+
+```tsx
+const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({
+ value: ['epost'],
+ ...args,
+});
+
+return (
+
+);
+```
+
+## Tillat indeterminate
+
+Når du sprer `getCheckboxProps` på Checkboxen din, så kan du sende inn `allowIndeterminate: true` for å tillate at checkboxen kan være i en indeterminate tilstand.
+
+
+
+## Props
+
+
diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx
index 3e305694ec..e0d304be45 100644
--- a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx
+++ b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx
@@ -1,15 +1,18 @@
-import type { Meta } from '@storybook/react';
-import { Checkbox } from '../../../components';
-import type { UseCheckboxGroupProps } from './useCheckboxGroup';
+import type { Meta, StoryFn } from '@storybook/react';
+import {
+ Checkbox,
+ Fieldset,
+ Table,
+ ValidationMessage,
+} from '../../../components';
+import {
+ type UseCheckboxGroupProps,
+ useCheckboxGroup,
+} from './useCheckboxGroup';
-export const UseCheckboxGroup = (_props: UseCheckboxGroupProps) => (
-
-);
-
-export default {
+const meta: Meta = {
title: 'Utilities/useCheckboxGroup',
- tags: ['!dev'], // Hide from sidebar as documented in https://storybook.js.org/docs/writing-stories/tags
- component: UseCheckboxGroup,
+ parameters: { chromatic: { disableSnapshot: true } },
argTypes: {
name: {
table: { type: { summary: 'string' } },
@@ -58,4 +61,60 @@ export default {
description: 'Set required state of all checkboxes',
},
},
-} as Meta;
+};
+
+export default meta;
+
+export const Default: StoryFn = (args) => {
+ const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({
+ value: ['epost'],
+ ...args,
+ });
+
+ return (
+
+ );
+};
+
+export const AllowIndeterminate: StoryFn = (args) => {
+ const { getCheckboxProps } = useCheckboxGroup({
+ name: 'my-checkbox',
+ ...args,
+ });
+ return (
+