@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-recipes-docs.md

@@ -0,0 +1,209 @@
+Recipes
+=======
+
+Checkboxes inside an `IressTable`
+---------------------------------
+
+You can use `IressCheckboxGroup` and `IressTable` to create a table with checkboxes, allowing the users to select multiple rows.
+
+[](./iframe.html?id=components-checkboxgroup-recipes--table)
+
+Selected values: lemon-drizzle, victoria-sponge
+
+RequiredLet them eat cake
+
+Available options
+| Select | Name |
+| --- | --- |
+| 
+Select lemon drizzle
+
+ | Lemon drizzle |
+| 
+
+Select Victoria Sponge
+
+ | Victoria Sponge |
+| 
+
+Select Carrot Cake
+
+ | Carrot Cake |
+
+Submit
+
+```
+
+import {
+  type FormControlValue,
+  IressButton,
+  IressCheckbox,
+  IressForm,
+  IressFormFieldset,
+  IressPanel,
+  IressStack,
+  IressTable,
+} from '@iress-oss/ids-components';
+import { IressCheckboxGroup } from '../CheckboxGroup';
+import { toArray } from '../../../helpers/formatting/toArray';
+interface FieldValues {
+  'let-them-eat-cake'?: FormControlValue\[\];
+}
+const SelectedValues \= () \=> {
+  const value \= IressForm.useWatch<FieldValues\>({ name: 'let-them-eat-cake' });
+  const valueString \= toArray(value).join(', ');
+  return (
+    <IressPanel\>
+      Selected values: {valueString ? valueString : 'None'}
+    </IressPanel\>
+  );
+};
+export const CheckboxGroupTable \= () \=> (
+  <IressForm
+    defaultValues\={{
+      'let-them-eat-cake': \['lemon-drizzle', 'victoria-sponge'\],
+    }}
+  \>
+    <IressStack gap\="md"\>
+      <SelectedValues />
+      <IressFormFieldset
+        label\="Let them eat cake"
+        name\="let-them-eat-cake"
+        hiddenLabel
+        rules\={{ required: 'Please select a cake' }}
+        render\={(field) \=> (
+          <IressCheckboxGroup {...field} layout\="stack"\>
+            <IressTable
+              caption\="Available options"
+              columns\={\[
+                { key: 'select', label: 'Select', width: '2rem' },
+                { key: 'name', label: 'Name' },
+              \]}
+              rows\={\[
+                {
+                  select: (
+                    <IressCheckbox hiddenLabel value\="lemon-drizzle"\>
+                      Select lemon drizzle                    </IressCheckbox\>
+                  ),
+                  name: 'Lemon drizzle',
+                },
+                {
+                  select: (
+                    <IressCheckbox hiddenLabel value\="victoria-sponge"\>
+                      Select Victoria Sponge                    </IressCheckbox\>
+                  ),
+                  name: 'Victoria Sponge',
+                },
+                {
+                  select: (
+                    <IressCheckbox hiddenLabel value\="carrot-cake"\>
+                      Select Carrot Cake                    </IressCheckbox\>
+                  ),
+                  name: 'Carrot Cake',
+                },
+              \]}
+            />
+          </IressCheckboxGroup\>
+        )}
+      />
+      <IressButton type\="submit" mode\="primary"\>
+        Submit      </IressButton\>
+    </IressStack\>
+  </IressForm\>
+);
+
+```
+
+#### 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
+
+
+
+ | \- | \- |
+| 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
+
+
+
+ | \- | \- |