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

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

@@ -1,19 +1,19 @@
-[](#field)Field
-===============
+Field
+=====
 
 Overview
 --------
 
 The field component is used to place label, hint and error information around form controls.
 
-First name
+[](./iframe.html?id=components-field--default)
 
-Hide code
+First name
 
-\[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 label\="First name"\>
-  <IressInput
+  <ForwardedInput
     id\="name"
     name\="input1"
     required
@@ -21,23 +21,60 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
 
-[](#examples)Examples
----------------------
+"First name"
 
-### [](#label)Label
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+Examples
+--------
+
+### Label
 
 The `label` prop is required to describe the field.
 
-Find your address
+[](./iframe.html?id=components-field--label)
 
-Hide code
+Find your address
 
-\[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 label\={<span\><IressIcon name\="home" />{' '}Find your address</span\>}\>
-  <IressInput
+  <ForwardedInput
     id\="name"
     name\="input1"
     required
@@ -45,25 +82,57 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
 
-### [](#hint)Hint
+ReactReactNode
+
+
+
+ | \- | \- |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | \- |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Hint
 
 Extra information on the field can be provided using the `hint` prop. It can accept any React node, so you can add your own custom mark up (eg. external links) to the hint text.
 
+[](./iframe.html?id=components-field--hint)
+
 Email address
 
 For us to be able to contact you in the future
 
-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\="For us to be able to contact you in the future"
   label\="Email address"
 \>
-  <IressInput
+  <ForwardedInput
     id\="email"
     name\="email"
     required
@@ -71,13 +140,58 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| hint | 
+
+string
+
+
 
-### [](#error-message)Error message
+ | \- | For us to be able to contact you in the future |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Email address"
+
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Error message
 
 To display error messages associated with the field, you can use the `errorMessages` prop. This prop accepts an array of `ValidationMessageObj`, and will display each error message in a separate paragraph.
 
-**Note:** `IressField` requires validation to be handled by the consumer. If you want out-of-the-box validation, use [`IressFormField` alongside `IressForm` instead](./?path=/docs/components-form--docs#fields).
+**Note:** `IressField` requires validation to be handled by the consumer. If you want out-of-the-box validation, use [`IressFormField` alongside `IressForm` instead](/docs/components-form--docs#fields).
+
+[](./iframe.html?id=components-field--error-message)
 
 Error message
 
@@ -86,9 +200,7 @@ Error message
     This field is required
     
 
-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
   errorMessages\={\[
@@ -98,17 +210,80 @@ Hide code
   \]}
   label\="Error message"
 \>
-  <IressInput    append={<IressButton data-testid\="show-password-icon" mode\="tertiary" prepend\={<IressIcon name\="fal fa-light fa-eye" screenreaderText\="Show" size\="sm" style\={{width: '18px'}}/>}/>}
+  <ForwardedInput    append={<IressButton data-testid\="show-password-icon" mode\="tertiary" prepend\={<IressIcon name\="fal fa-light fa-eye" screenreaderText\="Show" size\="sm" style\={{width: '18px'}}/>}/>}
     id="name"    name="name"    required  />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| errorMessages | 
+
+array
+
+
+
+ | \- | 
 
-### [](#custom-error)Custom error
+RAW
+
+*   errorMessages :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 1 key
+        
+    
+    \]
+    
+
+
+
+ |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Error message"
+
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Custom error
 
 For more control over the formatting of the error, you can use the `error` prop. This prop accepts any React node, so you can add your own custom mark up (eg. icons) to the error message.
 
-**Note:** `IressField` requires validation to be handled by the consumer. If you want out-of-the-box validation, use [`IressFormField` alongside `IressForm` instead](./?path=/docs/components-form--docs#fields).
+**Note:** `IressField` requires validation to be handled by the consumer. If you want out-of-the-box validation, use [`IressFormField` alongside `IressForm` instead](/docs/components-form--docs#fields).
+
+[](./iframe.html?id=components-field--custom-error)
 
 Custom error
 
@@ -116,41 +291,111 @@ Error:
 
 This is a custom error message
 
-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
   error\={<IressValidationMessage\>This is a custom error message</IressValidationMessage\>}
   label\="Custom error"
 \>
-  <IressInput
+  <ForwardedInput
     id\="name"
     name\="name"
     required
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
 
-### [](#hidden-label)Hidden label
+ReactReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+object
+
+
+
+ | \- | 
+
+RAW
+
+error :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : (props) => /\* @\_\_PURE\_\_ \*/ jsxDEV(ValidationBase, { ...props, as: "div" }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/ValidationMessage/ValidationMessage.tsx", lineNumber: 10, columnNumber: 1 }, this)
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Custom error"
+
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Hidden label
 
 There may be certain situations where you might want to (accessibly) hide the field label (in a search field for instance). This can be done by setting the `hiddenLabel` prop.
 
+[](./iframe.html?id=components-field--hidden-label)
+
 This label is hidden
 
 This hint text is hidden
 
-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
   hiddenLabel
   hint\="This hint text is hidden"
   label\="This label is hidden"
 \>
-  <IressInput
+  <ForwardedInput
     id\="name"
     name\="input1"
     required
@@ -158,7 +403,59 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| hiddenLabel | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| hint | 
+
+string
+
+
+
+ | \- | This hint text is hidden |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This label is hidden"
+
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+[](./iframe.html?id=components-field--hidden-label-with-error)
 
 This label is hidden
 
@@ -168,9 +465,7 @@ Error:
 
 Even fields with hidden labels will show their validation message
 
-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
   error\={<IressValidationMessage\>Even fields with hidden labels will show their validation message</IressValidationMessage\>}
@@ -178,7 +473,7 @@ Hide code
   hint\="This hint text is hidden"
   label\="This label is hidden"
 \>
-  <IressInput
+  <ForwardedInput
     id\="name"
     name\="input1"
     required
@@ -186,23 +481,109 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+object
+
+
+
+ | \- | 
+
+RAW
+
+error :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : (props) => /\* @\_\_PURE\_\_ \*/ jsxDEV(ValidationBase, { ...props, as: "div" }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/ValidationMessage/ValidationMessage.tsx", lineNumber: 10, columnNumber: 1 }, this)
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| hiddenLabel | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| hint | 
+
+string
+
+
+
+ | \- | This hint text is hidden |
+| label\* | 
 
-### [](#required)Required
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This label is hidden"
+
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Required
 
 Fields marked as `required` will have an asterisk prepended to the label.
 
-\*Required This field is required
+[](./iframe.html?id=components-field--required)
 
-Hide code
+\*Required This field is required
 
-\[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
   label\="This field is required"
   required
 \>
-  <IressInput
+  <ForwardedInput
     id\="name"
     name\="input1"
     required
@@ -210,25 +591,68 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
 
-### [](#optional)Optional
+"This field is required"
+
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Optional
 
 Fields marked as `optional` will have optional text appended to the label. This is used in cases where the majority of the fields are required, and you only want to highlight the optional fields and not overwhelm the user.
 
 You can set `optional` to a string to customise the optional text.
 
-This field is optional(optional)
+[](./iframe.html?id=components-field--optional)
 
-Hide code
+This field is optional(optional)
 
-\[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
   label\="This field is optional"
   optional
 \>
-  <IressInput
+  <ForwardedInput
     id\="name"
     name\="input1"
     required
@@ -236,23 +660,66 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This field is optional"
 
-### [](#readonly-data)Readonly data
+ |
+| optional | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Readonly data
 
 Fields can be used to display read-only data. This is useful when you want to display data that the user can't change, but you still want to display it in a form-like layout.
 
 You can also pass `readOnly` prop to remove the asterisk symbol (\*) even when the field is `required`.
 
+[](./iframe.html?id=components-field--readonly-data)
+
 First name
 
 This field is readonly
 
 Luke Skywalker
 
-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\="This field is readonly"
@@ -269,15 +736,67 @@ Hide code
   />
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| hint | 
+
+string
+
+
+
+ | \- | This field is readonly |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
 
-[](#iressfieldgroup)`IressFieldGroup`
--------------------------------------
+
+ | \- | 
+
+"First name"
+
+ |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| required | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+`IressFieldGroup`
+-----------------
 
 The `IressFieldGroup` component is used to group multiple `Field` components together. This is useful when you have multiple fields that are related to each other, and you want to display them together.
 
 Under the hood it uses a `fieldset` and `legend` element to group the fields together, improving the semantics of your form if you use multiple inputs (eg. in the case of a checkbox group) and making it more accessible.
 
+[](./iframe.html?id=components-field-fieldgroup--default)
+
 Full name
 
 Title
@@ -286,16 +805,14 @@ Title
 
 \*Required Last name
 
-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; }
+```
 
 <IressFieldGroup label\="Full name"\>
   <IressField
     htmlFor\="title"
     label\="Title"
   \>
-    <IressInput
+    <ForwardedInput
       id\="title"
       name\="title"
       type\="text"
@@ -307,7 +824,7 @@ Hide code
     label\="First name"
     required
   \>
-    <IressInput
+    <ForwardedInput
       id\="firstName"
       name\="firstName"
       required
@@ -319,7 +836,7 @@ Hide code
     label\="Last name"
     required
   \>
-    <IressInput
+    <ForwardedInput
       id\="lastName"
       name\="lastName"
       required
@@ -328,12 +845,53 @@ Hide code
   </IressField\>
 </IressFieldGroup\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| inline | 
+
+Displays multiple children inline rather than stacked, with a small gap.
+
+boolean
+
+
 
-### [](#inline)Inline
+ | \- | Set boolean |
+| join | 
+
+Displays multiple children inline and removes column gap.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| label | 
+
+string
+
+
+
+ | \- | Full name |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Inline
 
 Multiple fields can be displayed inline using the `inline` prop. On smaller screens, inline elements will wrap on to a new line if there's not enough space for everything on one line.
 
+[](./iframe.html?id=components-field-fieldgroup--inline)
+
 Full name
 
 Title
@@ -342,9 +900,7 @@ Title
 
 \*Required Last name
 
-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; }
+```
 
 <IressFieldGroup
   inline
@@ -354,7 +910,7 @@ Hide code
     htmlFor\="title"
     label\="Title"
   \>
-    <IressInput
+    <ForwardedInput
       id\="title"
       name\="title"
       type\="text"
@@ -366,7 +922,7 @@ Hide code
     label\="First name"
     required
   \>
-    <IressInput
+    <ForwardedInput
       id\="firstName"
       name\="firstName"
       required
@@ -378,7 +934,7 @@ Hide code
     label\="Last name"
     required
   \>
-    <IressInput
+    <ForwardedInput
       id\="lastName"
       name\="lastName"
       required
@@ -387,7 +943,48 @@ Hide code
   </IressField\>
 </IressFieldGroup\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| inline | 
+
+Displays multiple children inline rather than stacked, with a small gap.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| join | 
+
+Displays multiple children inline and removes column gap.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| label | 
+
+string
+
+
+
+ | \- | Full name |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+[](./iframe.html?id=components-field-fieldgroup--inline-sink)
 
 Full name
 
@@ -405,9 +1002,7 @@ Submit
 
 Settings goes here
 
-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; }
+```
 
 <form\>
   <IressFieldGroup
@@ -459,7 +1054,7 @@ Hide code
       label\="First name"
       required
     \>
-      <IressInput
+      <ForwardedInput
         id\="firstName"
         required
       />
@@ -469,7 +1064,7 @@ Hide code
       label\="Last name"
       required
     \>
-      <IressInput
+      <ForwardedInput
         id\="lastName"
         required
       />
@@ -483,14 +1078,55 @@ Hide code
   </IressFieldGroup\>
 </form\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| inline | 
+
+Displays multiple children inline rather than stacked, with a small gap.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| join | 
+
+Displays multiple children inline and removes column gap.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| label | 
 
-### [](#join)Join
+string
+
+
+
+ | \- | Full name |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Join
 
 Elements can also be joined together using the `join` prop. Joined elements won't wrap on to a new line, so make sure you test your designs on small screens; depending on the use case, you may be better off with a standard inline layout (or two separate fields!).
 
 **Note:** The `join` prop works out of the box with IDS components. To enable your custom components to work with the `join` prop, you need to ensure the direct child of `IressFieldGroup` has the class `GlobalCSSClass.FormElement`. If the direct child is not the element with the border, add the class `GlobalCSSClass.FormElementInner` to the element with the border.
 
+[](./iframe.html?id=components-field-fieldgroup--join)
+
 Full name
 
 Title
@@ -499,9 +1135,7 @@ Title
 
 \*Required Last name
 
-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; }
+```
 
 <IressFieldGroup
   join
@@ -511,7 +1145,7 @@ Hide code
     htmlFor\="title"
     label\="Title"
   \>
-    <IressInput
+    <ForwardedInput
       id\="title"
       name\="title"
       type\="text"
@@ -523,7 +1157,7 @@ Hide code
     label\="First name"
     required
   \>
-    <IressInput
+    <ForwardedInput
       id\="firstName"
       name\="firstName"
       required
@@ -535,7 +1169,7 @@ Hide code
     label\="Last name"
     required
   \>
-    <IressInput
+    <ForwardedInput
       id\="lastName"
       name\="lastName"
       required
@@ -544,7 +1178,48 @@ Hide code
   </IressField\>
 </IressFieldGroup\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| inline | 
+
+Displays multiple children inline rather than stacked, with a small gap.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| join | 
+
+Displays multiple children inline and removes column gap.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| label | 
+
+string
+
+
+
+ | \- | Full name |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+[](./iframe.html?id=components-field-fieldgroup--join-sink)
 
 Full name
 
@@ -562,9 +1237,7 @@ Submit
 
 Settings goes here
 
-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; }
+```
 
 <form\>
   <IressFieldGroup
@@ -617,7 +1290,7 @@ Hide code
       label\="First name"
       required
     \>
-      <IressInput
+      <ForwardedInput
         id\="firstName"
         required
       />
@@ -627,7 +1300,7 @@ Hide code
       label\="Last name"
       required
     \>
-      <IressInput
+      <ForwardedInput
         id\="lastName"
         required
       />
@@ -641,10 +1314,49 @@ Hide code
   </IressFieldGroup\>
 </form\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| inline | 
+
+Displays multiple children inline rather than stacked, with a small gap.
+
+boolean
+
 
-[](#iressform-integration)`IressForm` integration
--------------------------------------------------
+
+ | \- | FalseTrue |
+| join | 
+
+Displays multiple children inline and removes column gap.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| label | 
+
+string
+
+
+
+ | \- | Full name |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+`IressForm` integration
+-----------------------
 
 As of version 5, `IressField` is a standalone component and does not handle validation.
 
@@ -655,21 +1367,3 @@ If you want out-of-the-box validation, use the `IressFormField` inside an `Iress
 View forms documentation for fields
 
 ](/?path=/docs/components-form--docs#fields)
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Label](#label)
-    *   [Hint](#hint)
-    *   [Error message](#error-message)
-    *   [Custom error](#custom-error)
-    *   [Hidden label](#hidden-label)
-    *   [Required](#required)
-    *   [Optional](#optional)
-    *   [Readonly data](#readonly-data)
-*   [IressFieldGroup](#iressfieldgroup)
-    *   [Inline](#inline)
-    *   [Join](#join)
-*   [IressForm integration](#iressform-integration)