@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

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

@@ -1,1087 +0,0 @@
-[](#checkbox-group)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.
-
-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"\>
-    Lemon drizzle  </IressCheckbox\>
-  <IressCheckbox value\="victoria-sponge"\>
-    Victoria Sponge  </IressCheckbox\>
-  <IressCheckbox value\="carrot-cake"\>
-    Carrot Cake  </IressCheckbox\>
-</IressCheckboxGroup\>
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| bg | 
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | Set object |
-| children | 
-
-Content to be displayed inside the group, usually multiple `IressCheckbox`.
-
-ReactNode
-
-
-
- | \- | \- |
-| defaultValue | 
-
-Value of checkbox group when in uncontrolled mode.
-
-T | T\[\] | undefined
-
- | \- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| hiddenCheckbox | 
-
-Hides the checkbox controls to allow the creation of custom checkboxes.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | Set object |
-| layout | 
-
-Sets which of the block / inline layout options apply.
-
-"block""inline""stack"undefined
-
-
-
- | 
-
-stack
-
- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| name | 
-
-Name to be applied to all checkboxes in the group.
-
-stringundefined
-
-
-
- | \- | 
-
-"let-them-eat-cake"
-
- |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| onChange | 
-
-Called with collated new value when a user toggles one of its children checkboxes.
-
-((value?: T\[\] | undefined) => void) | undefined
-
- | \- | \- |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| readOnly | 
-
-Renders the group in a read-only state.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| ref | 
-
-ForwardedRef<CheckboxGroupRef<T>> | undefined
-
- | \- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
-
- | \- | Set object |
-| touch | 
-
-Add the button-like border and padding to checkbox when `touch` is true.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| value | 
-
-Value of checkbox group when in controlled mode.
-
-T | T\[\] | undefined
-
- | \- | Set object |
-| width | 
-
-The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
-
-This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **4** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-
-[](#examples)Examples
----------------------
-
-### [](#checkbox-children)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.
-
-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"\>
-    Lemon drizzle  </IressCheckbox\>
-  <IressCheckbox value\="victoria-sponge"\>
-    Victoria Sponge  </IressCheckbox\>
-  <IressCheckbox value\="carrot-cake"\>
-    Carrot Cake  </IressCheckbox\>
-</IressCheckboxGroup\>
-
-Copy
-
-### [](#default-checked)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.
-
-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\={\[
-    '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\>
-
-Copy
-
-### [](#changing-the-checked-state)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:
-
-Lemon drizzle
-
-Victoria Sponge
-
-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,
-  IressButton,
-  IressCheckbox,
-  IressCheckboxGroup,
-  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\>
-  );
-};
-
-Copy
-
-### [](#layout)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.
-
-### block
-
-Google
-
-Newspaper
-
-Friend
-
-Other
-
-### inline
-
-Google
-
-Newspaper
-
-Friend
-
-Other
-
-### stack
-
-Google
-
-Newspaper
-
-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\>
-  <h3\>
-    block  </h3\>
-  <IressCheckboxGroup layout\="block"\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="google"
-    \>
-      Google    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="newspaper"
-    \>
-      Newspaper    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="friend"
-    \>
-      Friend    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="other"
-    \>
-      Other    </IressCheckbox\>
-  </IressCheckboxGroup\>
-  <h3\>
-    inline  </h3\>
-  <IressCheckboxGroup layout\="inline"\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="google"
-    \>
-      Google    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="newspaper"
-    \>
-      Newspaper    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="friend"
-    \>
-      Friend    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="other"
-    \>
-      Other    </IressCheckbox\>
-  </IressCheckboxGroup\>
-  <h3\>
-    stack  </h3\>
-  <IressCheckboxGroup layout\="stack"\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="google"
-    \>
-      Google    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="newspaper"
-    \>
-      Newspaper    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="friend"
-    \>
-      Friend    </IressCheckbox\>
-    <IressCheckbox
-      className\="\_addBorderToLabel\_1d00u\_74"
-      value\="other"
-    \>
-      Other    </IressCheckbox\>
-  </IressCheckboxGroup\>
-</IressText\>
-
-Copy
-
-### [](#hidden-checkboxes)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`.
-
-**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
-
-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"
-  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\>
-
-Copy
-
-### [](#laying-out-custom-checkboxes)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.
-
-**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
-
-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"
-  label\="I'd like to discuss the following with my financial adviser:"
-\>
-  <IressCheckboxGroup
-    defaultValue\={\[
-      'home'
-    \]}
-    hiddenCheckbox
-    layout\="block"
-    name\="financial-review"
-  \>
-    <div
-      className\="\_resizable\_1d00u\_78"
-      style\={{
-        display: 'grid',
-        gridAutoRows: '1fr',
-        gridGap: '16px',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
-        padding: '0.5rem',
-        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\>
-
-Copy
-
-### [](#read-only)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.
-
-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\={\[
-    '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\>
-
-Copy
-
-### [](#touch)Touch
-
-The `touch` prop adds the button-like border and padding to checkbox.
-
-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\={\[
-    '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\>
-
-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)
-    *   [Read only](#read-only)
-    *   [Touch](#touch)