@iress-oss/ids-mcp-server 5.15.0 → 5.20.1

package/generated/docs/{components-checkboxgroup-docs.md → components_components-checkboxgroup-docs.md}

@@ -1,20 +1,20 @@
-[](#checkbox-group)Checkbox Group
-=================================
+Checkbox Group
+==============
 
 Overview
 --------
 
 Checkbox groups allow users to make more than one choice in a set of related options.
 
+[](./iframe.html?id=components-checkboxgroup--checkbox-children)
+
 Lemon drizzle
 
 Victoria Sponge
 
 Carrot Cake
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressCheckboxGroup name\="let-them-eat-cake"\>
   <IressCheckbox value\="lemon-drizzle"\>
@@ -25,26 +25,121 @@ Hide code
     Carrot Cake  </IressCheckbox\>
 </IressCheckboxGroup\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | Set object |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | let-them-eat-cake |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
 
-[](#examples)Examples
----------------------
+(value?: FormControlValue\[\]) => void
 
-### [](#checkbox-children)Checkbox children
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Checkbox children
 
 Individual checkboxes can be passed directly into `IressCheckboxGroup`.
 
 **Note:** The `mapCheckboxGroupOptions` helper function, originally used to map options to `IressCheckbox` components, is now deprecated. Instead, you can use `array.map` to map the options to `IressCheckbox` components.
 
+[](./iframe.html?id=components-checkboxgroup--checkbox-children)
+
 Lemon drizzle
 
 Victoria Sponge
 
 Carrot Cake
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressCheckboxGroup name\="let-them-eat-cake"\>
   <IressCheckbox value\="lemon-drizzle"\>
@@ -55,23 +150,117 @@ Hide code
     Carrot Cake  </IressCheckbox\>
 </IressCheckboxGroup\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
 
-### [](#default-checked)Default checked
+
+
+ | \- | Set object |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | let-them-eat-cake |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |
+
+### Default checked
 
 The default checked state of the checkbox children should always be set using the `defaultValue` prop (not directly on the checkbox component).
 
 The `defaultValue` prop can contain an array of strings, numbers or booleans.
 
+[](./iframe.html?id=components-checkboxgroup--default-checked)
+
 Lemon drizzle
 
 Victoria Sponge
 
 Carrot Cake
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressCheckboxGroup
   defaultValue\={\[
@@ -88,14 +277,126 @@ Hide code
     Carrot Cake  </IressCheckbox\>
 </IressCheckboxGroup\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   defaultValue :
+    
+    \[
+    
+    *   0 : "lemon-drizzle"
+    *   1 : "victoria-sponge"
+    
+    \]
+    
+
+
+
+ |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
 
-### [](#changing-the-checked-state)Changing the checked state
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | let-them-eat-cake |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |
+
+### Changing the checked state
 
 The `value` prop can be updated if you need to change the checked state without interacting with the checkboxes.
 
 For example, if you want to clear down the selected options:
 
+[](./iframe.html?id=components-checkboxgroup--controlled)
+
 Lemon drizzle
 
 Victoria Sponge
@@ -104,16 +405,14 @@ Carrot Cake
 
 Clear
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 import {
-  FormControlValue,
+  type FormControlValue,
   IressButton,
   IressCheckbox,
   IressCheckboxGroup,
-  IressCheckboxGroupProps,
+  type IressCheckboxGroupProps,
   IressStack,
 } from '@iress-oss/ids-components';
 import { useState } from 'react';
@@ -137,9 +436,103 @@ export const CheckboxGroupUsingState \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | Set object |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
 
-### [](#layout)Layout
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | let-them-eat-cake |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | \- |
+
+### Layout
 
 The `layout` prop controls how the checkbox group is displayed and can have three basic layouts:
 
@@ -147,6 +540,8 @@ The `layout` prop controls how the checkbox group is displayed and can have thre
 *   **Block:** Same as Stack, but labels take up the full width of the container.
 *   **Inline:** Checkboxes are laid out horizontally. Labels are only as wide as their text.
 
+[](./iframe.html?id=components-checkboxgroup--layout)
+
 ### stack
 
 Google
@@ -187,9 +582,7 @@ Friend
 
 Other
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressText className\="iress-u-stack iress--gutter--lg"\>
   <div\>
@@ -197,22 +590,22 @@ Hide code
       stack    </h3\>
     <IressCheckboxGroup layout\="stack"\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="google"
       \>
         Google      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="newspaper"
       \>
         Newspaper      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="friend"
       \>
         Friend      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="other"
       \>
         Other      </IressCheckbox\>
@@ -223,22 +616,22 @@ Hide code
       block    </h3\>
     <IressCheckboxGroup layout\="block"\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="google"
       \>
         Google      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="newspaper"
       \>
         Newspaper      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="friend"
       \>
         Friend      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="other"
       \>
         Other      </IressCheckbox\>
@@ -249,22 +642,22 @@ Hide code
       inline    </h3\>
     <IressCheckboxGroup layout\="inline"\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="google"
       \>
         Google      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="newspaper"
       \>
         Newspaper      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="friend"
       \>
         Friend      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="other"
       \>
         Other      </IressCheckbox\>
@@ -275,22 +668,22 @@ Hide code
       full    </h3\>
     <IressCheckboxGroup layout\="full"\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="google"
       \>
         Google      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="newspaper"
       \>
         Newspaper      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="friend"
       \>
         Friend      </IressCheckbox\>
       <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
+        className\="ids-styles--add-border-to-label-v5202"
         value\="other"
       \>
         Other      </IressCheckbox\>
@@ -298,14 +691,110 @@ Hide code
   </div\>
 </IressText\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | Set object |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | \- |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
 
-### [](#hidden-checkboxes)Hidden checkboxes
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |
+
+### Hidden checkboxes
 
 You can use the `hiddenCheckbox` prop to create custom checkboxes. When enabled, the actual checkbox will be visually hidden, allowing you to create more interesting controls. The checked state will be shown by the label's border, which is thicker when the checkbox is checked.
 
 When `hiddenCheckbox` is enabled, the label will have no padding. Padding can be added by using an `IressPanel`.
 
+[](./iframe.html?id=components-checkboxgroup--hidden-checkboxes)
+
 **I'd like to discuss the following with my financial adviser:
 
 Select all that apply
@@ -318,9 +807,7 @@ Saving for a holiday
 
 Reducing my debt
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressField
   hint\="Select all that apply"
@@ -394,14 +881,129 @@ Hide code
   </IressCheckboxGroup\>
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   defaultValue :
+    
+    \[
+    
+    *   0 : "home"
+    
+    \]
+    
+
+
+
+ |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+"inline"
+
+ |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | financial-review |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
 
-### [](#laying-out-custom-checkboxes)Laying out custom checkboxes
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |
+
+### Laying out custom checkboxes
 
 The checkbox group's `layout` prop gives you some default options to help control the layout of your controls. But sometimes you need more granular control, which you can achieve with a bit of custom CSS.
 
 The example below uses CSS grid to give us evenly spaced / sized checkboxes, which will wrap on to new lines as the screen size reduces. The grid wrapper element is a div that wraps around the `<IressCheckbox>` elements, as shown by the dashed border. Use the grab handle in the bottom right-hand corner of the grid wrapper to see how the controls change size to respond to the container's width.
 
+[](./iframe.html?id=components-checkboxgroup--custom-checkbox-group-layout)
+
 **I'd like to discuss the following with my financial adviser:
 
 Select all that apply
@@ -424,9 +1026,7 @@ Reducing my debt
 
 Starting a business
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressField
   hint\="Select all that apply"
@@ -445,7 +1045,7 @@ Hide code
     }}
   \>
     <div
-      className\="ids-styles--resizable-v5150"
+      className\="ids-styles--resizable-v5202"
       style\={{
         display: 'grid',
         gridAutoRows: '1fr',
@@ -611,21 +1211,134 @@ Hide code
   </IressCheckboxGroup\>
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   defaultValue :
+    
+    \[
+    
+    *   0 : "home"
+    
+    \]
+    
+
+
+
+ |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+"block"
+
+ |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | financial-review |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
 
-### [](#readonly)Readonly
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |
+
+### Readonly
 
 The `readonly` prop changes how the checkbox group is rendered. It will only render the children that are checked (alongside a hidden input that contains the `value` if it was set), otherwise it not be rendered.
 
 It is understandable that this may not be the desired behavior for all use cases. If you need a checkbox group that is not editable, but still visible, simply do not set the `readonly` prop and set the `value` prop instead.
 
+[](./iframe.html?id=components-checkboxgroup--readonly)
+
 Lemon drizzle
 
 Victoria Sponge
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressCheckboxGroup
   defaultValue\={\[
@@ -643,21 +1356,131 @@ Hide code
     Carrot Cake  </IressCheckbox\>
 </IressCheckboxGroup\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   defaultValue :
+    
+    \[
+    
+    *   0 : "lemon-drizzle"
+    *   1 : "victoria-sponge"
+    
+    \]
+    
+
+
+
+ |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | let-them-eat-cake |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
 
-### [](#touch)Touch
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |
+
+### Touch
 
 The `touch` prop adds the button-like border and padding to checkbox.
 
+[](./iframe.html?id=components-checkboxgroup--touch)
+
 Lemon drizzle
 
 Victoria Sponge
 
 Carrot Cake
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressCheckboxGroup
   defaultValue\={\[
@@ -675,18 +1498,114 @@ Hide code
     Carrot Cake  </IressCheckbox\>
 </IressCheckboxGroup\>
 
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Checkbox children](#checkbox-children)
-    *   [Default checked](#default-checked)
-    *   [Changing the checked state](#changing-the-checked-state)
-    *   [Layout](#layout)
-    *   [Hidden checkboxes](#hidden-checkboxes)
-    *   [Laying out custom checkboxes](#laying-out-custom-checkboxes)
-    *   [Readonly](#readonly)
-    *   [Touch](#touch)
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   defaultValue :
+    
+    \[
+    
+    *   0 : "lemon-drizzle"
+    *   1 : "victoria-sponge"
+    
+    \]
+    
+
+
+
+ |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | let-them-eat-cake |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
+
+
+ | \- | Set object |