@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-checkboxgroup-docs.md

@@ -0,0 +1,1597 @@
+Checkbox Group
+==============
+
+Overview
+--------
+
+Checkbox groups allow users to make more than one choice in a set of related options.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-checkboxgroup--checkbox-children)
+
+Lemon drizzle
+
+Victoria Sponge
+
+Carrot Cake
+
+```
+
+<IressCheckboxGroup name\="let-them-eat-cake"\>
+  <IressCheckbox value\="lemon-drizzle"\>
+    Lemon drizzle  </IressCheckbox\>
+  <IressCheckbox value\="victoria-sponge"\>
+    Victoria Sponge  </IressCheckbox\>
+  <IressCheckbox value\="carrot-cake"\>
+    Carrot Cake  </IressCheckbox\>
+</IressCheckboxGroup\>
+
+```
+
+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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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 |
+
+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
+
+```
+
+<IressCheckboxGroup name\="let-them-eat-cake"\>
+  <IressCheckbox value\="lemon-drizzle"\>
+    Lemon drizzle  </IressCheckbox\>
+  <IressCheckbox value\="victoria-sponge"\>
+    Victoria Sponge  </IressCheckbox\>
+  <IressCheckbox value\="carrot-cake"\>
+    Carrot Cake  </IressCheckbox\>
+</IressCheckboxGroup\>
+
+```
+
+#### 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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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
+
+```
+
+<IressCheckboxGroup
+  defaultValue\={\[
+    'lemon-drizzle',
+    'victoria-sponge'
+  \]}
+  name\="let-them-eat-cake"
+\>
+  <IressCheckbox value\="lemon-drizzle"\>
+    Lemon drizzle  </IressCheckbox\>
+  <IressCheckbox value\="victoria-sponge"\>
+    Victoria Sponge  </IressCheckbox\>
+  <IressCheckbox value\="carrot-cake"\>
+    Carrot Cake  </IressCheckbox\>
+</IressCheckboxGroup\>
+
+```
+
+#### 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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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
+
+Carrot Cake
+
+Clear
+
+```
+
+import {
+  type FormControlValue,
+  IressButton,
+  IressCheckbox,
+  IressCheckboxGroup,
+  type IressCheckboxGroupProps,
+  IressStack,
+} from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const CheckboxGroupUsingState \= <T \= FormControlValue,\>(
+  <T\>,
+) => {
+  const \[value, setValue\] \= useState<T\[\]\>(\[\]);
+  return (
+    <IressStack gap\="sm"\>
+      <IressCheckboxGroup
+        {...{
+  name: 'let-them-eat-cake',
+}}
+        value\={value}
+        onChange\={(newValue) \=> setValue(newValue ?? \[\])}
+      \>
+        <IressCheckbox value\="lemon-drizzle"\>Lemon drizzle</IressCheckbox\>
+        <IressCheckbox value\="victoria-sponge"\>Victoria Sponge</IressCheckbox\>
+        <IressCheckbox value\="carrot-cake"\>Carrot Cake</IressCheckbox\>
+      </IressCheckboxGroup\>
+      <IressButton onClick\={() \=> setValue(\[\])}\>Clear</IressButton\>
+    </IressStack\>
+  );
+};
+
+```
+
+#### 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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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:
+
+*   **Stack (Default):** Checkboxes are laid out vertically. Labels are only as wide as their text.
+*   **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)
+
+### block
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### inline
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### stack
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+```
+
+<IressText\>
+  <h3\>
+    block  </h3\>
+  <IressCheckboxGroup layout\="block"\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="google"
+    \>
+      Google    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="newspaper"
+    \>
+      Newspaper    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="friend"
+    \>
+      Friend    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="other"
+    \>
+      Other    </IressCheckbox\>
+  </IressCheckboxGroup\>
+  <h3\>
+    inline  </h3\>
+  <IressCheckboxGroup layout\="inline"\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="google"
+    \>
+      Google    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="newspaper"
+    \>
+      Newspaper    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="friend"
+    \>
+      Friend    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="other"
+    \>
+      Other    </IressCheckbox\>
+  </IressCheckboxGroup\>
+  <h3\>
+    stack  </h3\>
+  <IressCheckboxGroup layout\="stack"\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="google"
+    \>
+      Google    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="newspaper"
+    \>
+      Newspaper    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="friend"
+    \>
+      Friend    </IressCheckbox\>
+    <IressCheckbox
+      layerStyle\="elevation.raised"
+      value\="other"
+    \>
+      Other    </IressCheckbox\>
+  </IressCheckboxGroup\>
+</IressText\>
+
+```
+
+#### 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?: T\[\]) => 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 |
+
+### 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
+
+Buying my first home
+
+Saving for a holiday
+
+Reducing my debt
+
+```
+
+<IressField
+  hint\="Select all that apply"
+  label\="I'd like to discuss the following with my financial adviser:"
+\>
+  <IressCheckboxGroup
+    defaultValue\={\[
+      'home'
+    \]}
+    hiddenCheckbox
+    layout\="inline"
+    name\="financial-review"
+  \>
+    <IressCheckbox value\="home"\>
+      <IressPanel
+        bg\="transparent"
+        p\="lg"
+        textAlign\="center"
+      \>
+        <IressStack gap\="md"\>
+          <IressIcon
+            name\="house"
+            textStyle\="typography.heading.1"
+          />
+          <IressText
+            noGutter
+            textStyle\="typography.heading.4"
+          \>
+            Buying my first home          </IressText\>
+        </IressStack\>
+      </IressPanel\>
+    </IressCheckbox\>
+    <IressCheckbox value\="holiday"\>
+      <IressPanel
+        bg\="transparent"
+        p\="lg"
+        textAlign\="center"
+      \>
+        <IressStack gap\="md"\>
+          <IressIcon
+            name\="mountain"
+            textStyle\="typography.heading.1"
+          />
+          <IressText
+            noGutter
+            textStyle\="typography.heading.4"
+          \>
+            Saving for a holiday          </IressText\>
+        </IressStack\>
+      </IressPanel\>
+    </IressCheckbox\>
+    <IressCheckbox value\="debt"\>
+      <IressPanel
+        bg\="transparent"
+        p\="lg"
+        textAlign\="center"
+      \>
+        <IressStack gap\="md"\>
+          <IressIcon
+            name\="credit-card"
+            textStyle\="typography.heading.1"
+          />
+          <IressText
+            noGutter
+            textStyle\="typography.heading.4"
+          \>
+            Reducing my debt          </IressText\>
+        </IressStack\>
+      </IressPanel\>
+    </IressCheckbox\>
+  </IressCheckboxGroup\>
+</IressField\>
+
+```
+
+#### 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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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 |
+
+### 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
+
+Retirement
+
+Buying my first home
+
+Saving for a holiday
+
+Saving for my child's education
+
+Saving for emergency
+
+Spending more time on my hobbies
+
+Reducing my debt
+
+Starting a business
+
+```
+
+<IressField
+  hint\="Select all that apply"
+  label\="I'd like to discuss the following with my financial adviser:"
+\>
+  <IressCheckboxGroup
+    defaultValue\={\[
+      'home'
+    \]}
+    hiddenCheckbox
+    layout\="block"
+    name\="financial-review"
+  \>
+    <div
+      style\={{
+        border: '1px dashed hsl(43deg 100% 45%)',
+        display: 'grid',
+        gridAutoRows: '1fr',
+        gridGap: '16px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+        overflow: 'auto',
+        padding: '0.5rem',
+        resize: 'horizontal',
+        width: '100%'
+      }}
+    \>
+      <IressCheckbox value\="retirement"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="tree-palm"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Retirement            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+      <IressCheckbox value\="home"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="house"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Buying my first home            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+      <IressCheckbox value\="holiday"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="mountain"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Saving for a holiday            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+      <IressCheckbox value\="education"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="graduation-cap"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Saving for my child's education            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+      <IressCheckbox value\="emergency"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="medkit"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Saving for emergency            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+      <IressCheckbox value\="hobby"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="bicycle"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Spending more time on my hobbies            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+      <IressCheckbox value\="debt"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="chart-line-down"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Reducing my debt            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+      <IressCheckbox value\="business"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="user-tie"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Starting a business            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressCheckbox\>
+    </div\>
+  </IressCheckboxGroup\>
+</IressField\>
+
+```
+
+#### 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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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 |
+
+### Read only
+
+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--read-only)
+
+Lemon drizzle
+
+Victoria Sponge
+
+```
+
+<IressCheckboxGroup
+  defaultValue\={\[
+    'lemon-drizzle',
+    'victoria-sponge'
+  \]}
+  name\="let-them-eat-cake"
+  readOnly
+\>
+  <IressCheckbox value\="lemon-drizzle"\>
+    Lemon drizzle  </IressCheckbox\>
+  <IressCheckbox value\="victoria-sponge"\>
+    Victoria Sponge  </IressCheckbox\>
+  <IressCheckbox value\="carrot-cake"\>
+    Carrot Cake  </IressCheckbox\>
+</IressCheckboxGroup\>
+
+```
+
+#### 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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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 | 
+
+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
+
+```
+
+<IressCheckboxGroup
+  defaultValue\={\[
+    'lemon-drizzle',
+    'victoria-sponge'
+  \]}
+  name\="let-them-eat-cake"
+  touch
+\>
+  <IressCheckbox value\="lemon-drizzle"\>
+    Lemon drizzle  </IressCheckbox\>
+  <IressCheckbox value\="victoria-sponge"\>
+    Victoria Sponge  </IressCheckbox\>
+  <IressCheckbox value\="carrot-cake"\>
+    Carrot Cake  </IressCheckbox\>
+</IressCheckboxGroup\>
+
+```
+
+#### 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'
+
+ | 
+
+stackblockinline
+
+ |
+| 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?: T\[\]) => 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 |