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

@@ -0,0 +1,3345 @@
+Field
+=====
+
+Overview
+--------
+
+The field component is used to place label, hint and error information around form controls.
+
+* * *
+
+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-field--default)
+
+First name
+
+```
+
+<IressField label\="First name"\>
+  <IressInput
+    id\="name"
+    name\="input1"
+    required
+    type\="text"
+  />
+</IressField\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"First name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+Examples
+--------
+
+### Label
+
+The `label` prop is required to describe the field.
+
+[](./iframe.html?id=components-field--label)
+
+Find your address
+
+```
+
+<IressField label\={<span\><IressIcon name\="home" />{' '}Find your address</span\>}\>
+  <IressInput
+    id\="name"
+    name\="input1"
+    required
+    type\="text"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | \- |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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
+
+```
+
+<IressField
+  hint\="For us to be able to contact you in the future"
+  label\="Email address"
+\>
+  <IressInput
+    id\="email"
+    name\="email"
+    required
+    type\="email"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | 
+
+"For us to be able to contact you in the future"
+
+ |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Email address"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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](/docs/components-form--docs#fields).
+
+[](./iframe.html?id=components-field--error-message)
+
+Error message
+
+*   This field is required
+    
+
+```
+
+<IressField
+  errorMessages\={\[
+    {
+      message: 'This field is required'
+    }
+  \]}
+  label\="Error message"
+\>
+  <IressInput
+    append\={<IressButton data-testid\="show-password-icon" mode\="tertiary" prepend\={<IressIcon name\="eye" screenreaderText\="Show"/>}/>}
+    id\="name"
+    name\="name"
+    required
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | 
+
+RAW
+
+*   errorMessages :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 1 key
+        
+    
+    \]
+    
+
+
+
+ |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Error message"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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](/docs/components-form--docs#fields).
+
+[](./iframe.html?id=components-field--custom-error)
+
+Custom error
+
+*   This is a custom error message
+    
+
+```
+
+<IressField
+  error\={<IressText color\="colour.system.danger.text" element\="small"\>This is a custom error message</IressText\>}
+  label\="Custom error"
+\>
+  <IressInput
+    id\="name"
+    name\="name"
+    required
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+error :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => { \_s(); const Component = useMemo( () => styled(restProps.element ?? "div", text), \[restProps.element\] ); return /\* @\_\_PURE\_\_ \*/ jsxDEV( Component, { ...restProps, className: cx(className, GlobalCSSClass.Text) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 46, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Custom error"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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
+
+```
+
+<IressField
+  hiddenLabel
+  hint\="This hint text is hidden"
+  label\="This label is hidden"
+\>
+  <IressInput
+    id\="name"
+    name\="input1"
+    required
+    type\="text"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hiddenLabel | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This hint text is hidden"
+
+ |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This label is hidden"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+[](./iframe.html?id=components-field--hidden-label-with-error)
+
+This label is hidden
+
+This hint text is hidden
+
+*   Even fields with hidden labels will show their validation message
+    
+
+```
+
+<IressField
+  error\={<IressText color\="colour.system.danger.text" element\="small"\>Even fields with hidden labels will show their validation message</IressText\>}
+  hiddenLabel
+  hint\="This hint text is hidden"
+  label\="This label is hidden"
+\>
+  <IressInput
+    id\="name"
+    name\="input1"
+    required
+    type\="text"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+error :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => { \_s(); const Component = useMemo( () => styled(restProps.element ?? "div", text), \[restProps.element\] ); return /\* @\_\_PURE\_\_ \*/ jsxDEV( Component, { ...restProps, className: cx(className, GlobalCSSClass.Text) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 46, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hiddenLabel | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This hint text is hidden"
+
+ |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This label is hidden"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Required
+
+Fields marked as `required` will have an asterisk prepended to the label.
+
+[](./iframe.html?id=components-field--required)
+
+\*RequiredThis field is required
+
+```
+
+<IressField
+  label\="This field is required"
+  required
+\>
+  <IressInput
+    id\="name"
+    name\="input1"
+    required
+    type\="text"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This field is required"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| required | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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
+
+```
+
+<IressField
+  hint\="This field is readonly"
+  label\="First name"
+  readOnly
+  required
+\>
+  <IressReadonly
+    id\="name"
+    name\="input1"
+    required
+    type\="text"
+    value\="Luke Skywalker"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This field is readonly"
+
+ |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"First name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| required | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Supplementary
+
+The `supplementary` prop can be used to display additional information about the field.
+
+This is used to display some metadata based on the value of the field in context. Examples include:
+
+*   A trading share field that displays the current price of the share.
+*   A commission percentage field that displays the expected commission based on the value of multiple fields.
+
+#### Notes
+
+*   The `supplementary` prop is not a replacement for the `hint` prop. The `hint` prop should be used to provide additional information about the field itself, while the `supplementary` prop should be used to display additional information about the value of the field.
+*   The `supplementary` prop will only be displayed if the field is not in an error state. If the field is in an error state, the `error` and `errorMessages` prop will be displayed instead.
+
+[](./iframe.html?id=components-field--supplementary)
+
+Show error
+
+First name
+
+I only show if there is no error
+
+```
+
+<IressStack gap\="spacing.500"\>
+  <IressToggle
+    onChange\={(checked) \=> setError(checked ? "This field is required" : void 0)}
+  \>
+    Show error  </IressToggle\>
+  <IressField
+    label\="First name"
+    supplementary\="I only show if there is no error"
+  \>
+    <IressInput
+      id\="name"
+      name\="input1"
+      required
+      type\="text"
+    />
+  </IressField\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | \- |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | \- |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"First name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | 
+
+"I only show if there is no error"
+
+ |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Horizontal layout
+
+Fields can be displayed with a horizontal layout where the label and input are on the same line, which can save vertical space in forms. Use the `horizontal` prop to enable this layout. In horizontal mode, hint text is displayed as a tooltip when hovering over the info icon, rather than being shown below the label as in the default vertical layout.
+
+#### Avoid using horizontal mode for majority of cases
+
+Vertical layout is preferred, it is more accessible in more scenarios by ensuring a consistent layout on different devices and keep the label closer to the input ensuring its relationship and making forms easier to scan. There are studies showing [vertical layouts can be faster to fill out](https://content-and-marketing.com/blog/10-mobile-form-design-best-practices-2024). Here are a few cases where you may use a horizontal layout:
+
+*   On dashboards where space is limited, it may be necessary to display fields in a horizontal layout to make use of the space and give prominence to dashboard visuals.
+*   Collaborative visual tools that require real-time editing and previews, such as Styler, Miro, Figma, where fields are less prominent to give prominence to the intended output.
+
+[](./iframe.html?id=components-field--horizontal)
+
+Email address
+
+We will not share your email with third parties (Supplementary text)
+
+```
+
+<IressField
+  hint\="Enter your email address for contact"
+  horizontal
+  label\="Email address"
+  labelWidth\="250px"
+  supplementary\="We will not share your email with third parties (Supplementary text)"
+\>
+  <IressInput
+    id\="email"
+    name\="email"
+    placeholder\="john.doe@example.com"
+    required
+    type\="email"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Enter your email address for contact"
+
+ |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Email address"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | 250px |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | 
+
+"We will not share your email with third parties (Supplementary text)"
+
+ |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+#### Horizontal with error
+
+Error messages in horizontal layout are displayed below both the label and input field, spanning the full width.
+
+[](./iframe.html?id=components-field--horizontal-with-error)
+
+Email address
+
+*   Please enter a valid email address
+    
+
+```
+
+<IressField
+  errorMessages\={\[
+    {
+      message: 'Please enter a valid email address'
+    }
+  \]}
+  hint\="Enter your email address for contact"
+  horizontal
+  label\="Email address"
+  labelWidth\="250px"
+  supplementary\="We will not share your email with third parties (Supplementary text)"
+\>
+  <IressInput
+    id\="email"
+    name\="email"
+    placeholder\="john.doe@example.com"
+    required
+    type\="email"
+  />
+</IressField\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | 
+
+RAW
+
+*   errorMessages :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 1 key
+        
+    
+    \]
+    
+
+
+
+ |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Enter your email address for contact"
+
+ |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Email address"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | 250px |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | 
+
+"We will not share your email with third parties (Supplementary text)"
+
+ |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+#### Horizontal label width
+
+In horizontal layout, you can control the width of the label using the `labelWidth` prop. This accepts CSS width values like pixels, percentages, or `auto`.
+
+[](./iframe.html?id=components-field--horizontal-label-width-examples)
+
+labelWidth: 100px
+
+labelWidth: 200px
+
+labelWidth: 25%
+
+labelWidth: auto
+
+Default (no labelWidth)
+
+```
+
+<IressStack gap\="spacing.500"\>
+  <IressField
+    horizontal
+    label\="labelWidth: 100px"
+    labelWidth\="100px"
+  \>
+    <IressInput
+      id\="name"
+      name\="input1"
+      placeholder\="Label width: 100px"
+      required
+      type\="text"
+    />
+  </IressField\>
+  <IressField
+    horizontal
+    label\="labelWidth: 200px"
+    labelWidth\="200px"
+  \>
+    <IressInput
+      id\="name"
+      name\="input1"
+      placeholder\="Label width: 200px"
+      required
+      type\="text"
+    />
+  </IressField\>
+  <IressField
+    horizontal
+    label\="labelWidth: 25%"
+    labelWidth\="25%"
+  \>
+    <IressInput
+      id\="name"
+      name\="input1"
+      placeholder\="Label width: 25%"
+      required
+      type\="text"
+    />
+  </IressField\>
+  <IressField
+    horizontal
+    label\="labelWidth: auto"
+    labelWidth\="auto"
+  \>
+    <IressInput
+      id\="name"
+      name\="input1"
+      placeholder\="Label width: auto"
+      required
+      type\="text"
+    />
+  </IressField\>
+  <IressField
+    horizontal
+    label\="Default (no labelWidth)"
+  \>
+    <IressInput
+      id\="name"
+      name\="input1"
+      placeholder\="Default horizontal layout"
+      required
+      type\="text"
+    />
+  </IressField\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Label Width"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Remove error margin
+
+By default, fields reserve space for error messages to maintain consistent spacing. Use the `removeErrorMargin` prop to remove this reserved space, creating tighter field spacing when stacking multiple fields.
+
+This is particularly useful in dense forms or when you want to minimize vertical space usage.
+
+**Note:** When `removeErrorMargin` is enabled, subsequent fields will be pushed down when error or supplementary messages appear, as no space is reserved for these messages. You can use the `IressStack` component to control field gaps and spacing as needed.
+
+[](./iframe.html?id=components-field--remove-error-margin)
+
+Remove error margin (tighter field spacing)
+
+Show error message
+
+### Vertical Label Layout
+
+First Name
+
+Last Name
+
+This is always-displayed supplementary text
+
+Email Address
+
+### Horizontal Label Layout
+
+First Name
+
+Last Name
+
+This is always-displayed supplementary text
+
+Email Address
+
+```
+
+<IressStack gap\="spacing.500"\>
+  <IressInline gap\="spacing.400"\>
+    <IressToggle
+      onChange\={(checked) \=> setRemoveErrorMargin(checked)}
+    \>
+      Remove error margin (tighter field spacing)    </IressToggle\>
+    <IressToggle
+      onChange\={(checked) \=> setShowError(checked)}
+    \>
+      Show error message    </IressToggle\>
+  </IressInline\>
+  <IressRow gutter\="spacing.600"\>
+    <IressCol span\="6"\>
+      <IressStack gap\="spacing.200"\>
+        <IressText
+          element\="h3"
+          textStyle\="typography.body.lg.strong"
+        \>
+          Vertical Label Layout        </IressText\>
+        <IressStack gap\="spacing.000"\>
+          <IressField
+            label\="First Name"
+          \>
+            <IressInput
+              id\="name"
+              name\="input1"
+              placeholder\="Enter first name"
+              required
+              type\="text"
+            />
+          </IressField\>
+          <IressField
+            label\="Last Name"
+            supplementary\="This is always-displayed supplementary text"
+          \>
+            <IressInput
+              id\="name"
+              name\="input1"
+              placeholder\="Enter last name"
+              required
+              type\="text"
+            />
+          </IressField\>
+          <IressField
+            label\="Email Address"
+          \>
+            <IressInput
+              id\="name"
+              name\="input1"
+              placeholder\="Enter email"
+              required
+              type\="email"
+            />
+          </IressField\>
+        </IressStack\>
+      </IressStack\>
+    </IressCol\>
+    <IressCol span\="6"\>
+      <IressStack gap\="spacing.200"\>
+        <IressText
+          element\="h3"
+          textStyle\="typography.body.lg.strong"
+        \>
+          Horizontal Label Layout        </IressText\>
+        <IressStack gap\="spacing.000"\>
+          <IressField
+            horizontal
+            label\="First Name"
+            labelWidth\="120px"
+          \>
+            <IressInput
+              id\="name"
+              name\="input1"
+              placeholder\="Enter first name"
+              required
+              type\="text"
+            />
+          </IressField\>
+          <IressField
+            horizontal
+            label\="Last Name"
+            labelWidth\="120px"
+            supplementary\="This is always-displayed supplementary text"
+          \>
+            <IressInput
+              id\="name"
+              name\="input1"
+              placeholder\="Enter last name"
+              required
+              type\="text"
+            />
+          </IressField\>
+          <IressField
+            horizontal
+            label\="Email Address"
+            labelWidth\="120px"
+          \>
+            <IressInput
+              id\="name"
+              name\="input1"
+              placeholder\="Enter email"
+              required
+              type\="email"
+            />
+          </IressField\>
+        </IressStack\>
+      </IressStack\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Field Label"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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
+
+\*RequiredFirst name
+
+\*RequiredLast name
+
+```
+
+<IressFieldGroup label\="Full name"\>
+  <IressField
+    htmlFor\="title"
+    label\="Title"
+  \>
+    <IressInput
+      id\="title"
+      name\="title"
+      type\="text"
+      width\="2"
+    />
+  </IressField\>
+  <IressField
+    htmlFor\="firstName"
+    label\="First name"
+    required
+  \>
+    <IressInput
+      id\="firstName"
+      name\="firstName"
+      required
+      type\="text"
+    />
+  </IressField\>
+  <IressField
+    htmlFor\="lastName"
+    label\="Last name"
+    required
+  \>
+    <IressInput
+      id\="lastName"
+      name\="lastName"
+      required
+      type\="text"
+    />
+  </IressField\>
+</IressFieldGroup\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| 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
+
+
+
+ | \- | Set boolean |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Full name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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
+
+\*RequiredFirst name
+
+\*RequiredLast name
+
+```
+
+<IressFieldGroup
+  inline
+  label\="Full name"
+\>
+  <IressField
+    htmlFor\="title"
+    label\="Title"
+  \>
+    <IressInput
+      id\="title"
+      name\="title"
+      type\="text"
+      width\="2"
+    />
+  </IressField\>
+  <IressField
+    htmlFor\="firstName"
+    label\="First name"
+    required
+  \>
+    <IressInput
+      id\="firstName"
+      name\="firstName"
+      required
+      type\="text"
+    />
+  </IressField\>
+  <IressField
+    htmlFor\="lastName"
+    label\="Last name"
+    required
+  \>
+    <IressInput
+      id\="lastName"
+      name\="lastName"
+      required
+      type\="text"
+    />
+  </IressField\>
+</IressFieldGroup\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| 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\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Full name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+[](./iframe.html?id=components-field-fieldgroup--inline-sink)
+
+Full name
+
+Emoji
+
+Title
+
+MrMrsMiss
+
+\*RequiredFirst name
+
+\*RequiredLast name
+
+Submit
+
+Settings goes here
+
+```
+
+<form\>
+  <IressFieldGroup
+    inline
+    label\="Full name"
+  \>
+    <IressField
+      htmlFor\="emoji"
+      label\="Emoji"
+    \>
+      <IressRichSelect
+        container\={document.body}
+        id\="emoji"
+        options\={\[
+          {
+            label: '🐶',
+            value: 'dog'
+          },
+          {
+            label: '🐱',
+            value: 'cat'
+          },
+          {
+            label: '🐭',
+            value: 'mouse'
+          }
+        \]}
+        width\="2"
+      />
+    </IressField\>
+    <IressField
+      htmlFor\="title"
+      label\="Title"
+    \>
+      <IressSelect
+        id\="title"
+        width\="2"
+      \>
+        <option value\="mr"\>
+          Mr        </option\>
+        <option value\="mrs"\>
+          Mrs        </option\>
+        <option value\="miss"\>
+          Miss        </option\>
+      </IressSelect\>
+    </IressField\>
+    <IressField
+      htmlFor\="firstName"
+      label\="First name"
+      required
+    \>
+      <IressInput
+        id\="firstName"
+        required
+      />
+    </IressField\>
+    <IressField
+      htmlFor\="lastName"
+      label\="Last name"
+      required
+    \>
+      <IressInput
+        id\="lastName"
+        required
+      />
+    </IressField\>
+    <IressButton type\="submit"\>
+      Submit    </IressButton\>
+    <IressPopover activator\={<IressButton\><IressIcon name\="cog" /></IressButton\>}\>
+      <IressPanel\>
+        Settings goes here      </IressPanel\>
+    </IressPopover\>
+  </IressFieldGroup\>
+</form\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| 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\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Full name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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
+
+\*RequiredFirst name
+
+\*RequiredLast name
+
+```
+
+<IressFieldGroup
+  join
+  label\="Full name"
+\>
+  <IressField
+    htmlFor\="title"
+    label\="Title"
+  \>
+    <IressInput
+      id\="title"
+      name\="title"
+      type\="text"
+      width\="2"
+    />
+  </IressField\>
+  <IressField
+    htmlFor\="firstName"
+    label\="First name"
+    required
+  \>
+    <IressInput
+      id\="firstName"
+      name\="firstName"
+      required
+      type\="text"
+    />
+  </IressField\>
+  <IressField
+    htmlFor\="lastName"
+    label\="Last name"
+    required
+  \>
+    <IressInput
+      id\="lastName"
+      name\="lastName"
+      required
+      type\="text"
+    />
+  </IressField\>
+</IressFieldGroup\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| 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\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Full name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+[](./iframe.html?id=components-field-fieldgroup--join-sink)
+
+Full name
+
+Emoji
+
+Title
+
+MrMrsMiss
+
+\*RequiredFirst name
+
+\*RequiredLast name
+
+Submit
+
+Settings goes here
+
+```
+
+<form\>
+  <IressFieldGroup
+    inline
+    join
+    label\="Full name"
+  \>
+    <IressField
+      htmlFor\="emoji"
+      label\="Emoji"
+    \>
+      <IressRichSelect
+        container\={document.body}
+        id\="emoji"
+        options\={\[
+          {
+            label: '🐶',
+            value: 'dog'
+          },
+          {
+            label: '🐱',
+            value: 'cat'
+          },
+          {
+            label: '🐭',
+            value: 'mouse'
+          }
+        \]}
+        width\="2"
+      />
+    </IressField\>
+    <IressField
+      htmlFor\="title"
+      label\="Title"
+    \>
+      <IressSelect
+        id\="title"
+        width\="2"
+      \>
+        <option value\="mr"\>
+          Mr        </option\>
+        <option value\="mrs"\>
+          Mrs        </option\>
+        <option value\="miss"\>
+          Miss        </option\>
+      </IressSelect\>
+    </IressField\>
+    <IressField
+      htmlFor\="firstName"
+      label\="First name"
+      required
+    \>
+      <IressInput
+        id\="firstName"
+        required
+      />
+    </IressField\>
+    <IressField
+      htmlFor\="lastName"
+      label\="Last name"
+      required
+    \>
+      <IressInput
+        id\="lastName"
+        required
+      />
+    </IressField\>
+    <IressButton type\="submit"\>
+      Submit    </IressButton\>
+    <IressPopover activator\={<IressButton\><IressIcon name\="cog" /></IressButton\>}\>
+      <IressPanel\>
+        Settings goes here      </IressPanel\>
+    </IressPopover\>
+  </IressFieldGroup\>
+</form\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The form control this field is related to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+Validation error to be displayed above the field.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| errorMessages | 
+
+Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+
+ValidationMessageObj\[\]
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id. If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+unknown
+
+
+
+ | \- | Set object |
+| inline | 
+
+Displays multiple children inline rather than stacked, with a small gap.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| join | 
+
+Displays multiple children inline and removes column gap.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| label\* | 
+
+Text to be displayed in the label.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Full name"
+
+ |
+| labelWidth | 
+
+Controls the width of the label container when in horizontal mode. Can be any valid CSS width value (e.g., '200px', '20%', 'auto'). Only applies when `horizontal` is true.
+
+string
+
+
+
+ | \- | Set string |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeErrorMargin | 
+
+Removes the reserved space for error messages, allowing fields to stack with narrower gaps. When true, no margin is reserved for potential error messages.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| 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.
+
+If you want out-of-the-box validation, use the `IressFormField` inside an `IressForm`. This will handle validation for you, and provide a consistent way to handle form state.
+
+[
+
+View forms documentation for fields
+
+](/?path=/docs/components-form--docs#fields)