@iress-oss/ids-mcp-server 5.14.2 → 6.0.0-alpha.0

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

@@ -6,6 +6,14 @@ 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.
+
 First name
 
 Hide code
@@ -23,6 +31,493 @@ Hide code
 
 Copy
 
+[](#props)Props
+---------------
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| bg | 
+**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
+
+We recommend using the following token values for best background contrast:
+
+*   `colour.primary.fill` for primary backgrounds that need to stand out
+*   `colour.primary.surface` for primary backgrounds that need to be less prominent
+*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
+*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
+*   `colour.system.danger.fill` for error backgrounds that need to stand out
+*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
+*   `colour.system.success.fill` for success backgrounds that need to stand out
+*   `colour.system.success.surface` for success backgrounds that need to be less prominent
+*   `colour.system.warning.fill` for warning backgrounds that need to stand out
+*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
+*   `colour.system.info.fill` for info backgrounds that need to stand out
+*   `colour.system.info.surface` for info backgrounds that need to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| borderRadius | 
+
+The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **4** | **4** | **5** | **12** | **9** |
+| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
+
+ResponsiveProp<RadiusToken> | undefined
+
+ | \- | Set object |
+| children | 
+
+\-
+
+ | \- | \- |
+| color | 
+
+The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
+
+We recommend using the following token values for best color contrast:
+
+*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
+*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
+*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
+*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
+*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
+*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
+*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
+*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
+*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
+*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
+*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
+*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| 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\[\] | undefined
+
+ | \- | Set object |
+| focusable | 
+
+The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
+
+"true""within"undefined
+
+
+
+ | \- | Set object |
+| hiddenLabel | 
+
+Visually hides the label text, but still available to screen readers.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| hide | 
+
+Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+Notes:
+
+*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
+*   Consider if you can conditionally render the element instead of hiding it.
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| 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)
+
+stringundefined
+
+
+
+ | \- | 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.
+
+stringundefined
+
+
+
+ | \- | Set object |
+| layerStyle | 
+
+Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
+
+*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
+*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
+*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
+
+ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
+
+ | \- | Set object |
+| m | 
+
+The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| maxWidth | 
+
+The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **7** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+| mb | 
+
+The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| ml | 
+
+The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mr | 
+
+The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mt | 
+
+The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mx | 
+
+The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| my | 
+
+The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| noGutter | 
+
+The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| p | 
+
+The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pb | 
+
+The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pl | 
+
+The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pr | 
+
+The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pt | 
+
+The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| px | 
+
+The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| py | 
+
+The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| 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.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| required | 
+
+When set to true, the 'required asterisk (\*)' is displayed next to the label text.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| rowGap | 
+
+The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
+
+Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **47** | **52** | **10.1** | **16** | No |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| srOnly | 
+
+Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| stretch | 
+
+The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| textAlign | 
+
+The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
+
+ | \- | Set object |
+| textStyle | 
+
+Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
+
+*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
+*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
+*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
+*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
+*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
+*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
+*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
+*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
+*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
+
+ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
+
+ | \- | Set object |
+| width | 
+
+The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
+
+This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **4** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
 [](#examples)Examples
 ---------------------
 
@@ -81,9 +576,7 @@ To display error messages associated with the field, you can use the `errorMessa
 
 Error message
 
-*   Error:
-    
-    This field is required
+*   This field is required
     
 
 Hide code
@@ -98,8 +591,12 @@ 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'}}/>}/>}
-    id="name"    name="name"    required  />
+  <IressInput
+    append\={<IressButton data-testid\="show-password-icon" mode\="tertiary" prepend\={<IressIcon name\="eye" screenreaderText\="Show"/>}/>}
+    id\="name"
+    name\="name"
+    required
+  />
 </IressField\>
 
 Copy
@@ -112,16 +609,15 @@ For more control over the formatting of the error, you can use the `error` prop.
 
 Custom error
 
-Error:
-
-This is a custom error message
+*   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\>}
+  error\={<IressText color\="colour.system.danger.text" element\="small"\>This is a custom error message</IressText\>}
   label\="Custom error"
 \>
   <IressInput
@@ -164,16 +660,15 @@ This label is hidden
 
 This hint text is hidden
 
-Error:
-
-Even fields with hidden labels will show their validation message
+*   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\>}
+  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"
@@ -192,7 +687,7 @@ Copy
 
 Fields marked as `required` will have an asterisk prepended to the label.
 
-\*Required This field is required
+\*RequiredThis field is required
 
 Hide code
 
@@ -212,32 +707,6 @@ Hide code
 
 Copy
 
-### [](#optional)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)
-
-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
-  label\="This field is optional"
-  optional
-\>
-  <IressInput
-    id\="name"
-    name\="input1"
-    required
-    type\="text"
-  />
-</IressField\>
-
-Copy
-
 ### [](#readonly-data)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.
@@ -271,42 +740,395 @@ Hide code
 
 Copy
 
-[](#iressfieldgroup)`IressFieldGroup`
--------------------------------------
+### [](#supplementary)Supplementary
 
-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.
+The `supplementary` prop can be used to display additional information about the field.
 
-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.
+This is used to display some metadata based on the value of the field in context. Examples include:
 
-Full name
+*   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.
 
-Title
+#### [](#notes)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.
 
-\*Required First name
+Show error
 
-\*Required Last name
+First name
+
+I only show if there is no error
 
 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"\>
+<IressStack gap\="spacing.500"\>
+  <IressToggle
+    onChange\={(checked) \=> setError(checked ? "This field is required" : void 0)}
+  \>
+    Show error  </IressToggle\>
   <IressField
-    htmlFor\="title"
-    label\="Title"
+    label\="First name"
+    supplementary\="I only show if there is no error"
   \>
     <IressInput
-      id\="title"
-      name\="title"
+      id\="name"
+      name\="input1"
+      required
       type\="text"
-      width\="2"
     />
   </IressField\>
-  <IressField
-    htmlFor\="firstName"
-    label\="First name"
-    required
-  \>
+</IressStack\>
+
+Copy
+
+### [](#horizontal-layout)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)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.
+
+Email address
+
+We will not share your email with third parties (Supplementary text)
+
+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\="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\>
+
+Copy
+
+#### [](#horizontal-with-error)Horizontal with error
+
+Error messages in horizontal layout are displayed below both the label and input field, spanning the full width.
+
+Email address
+
+*   Please enter a valid email address
+    
+
+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\={\[
+    {
+      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\>
+
+Copy
+
+#### [](#horizontal-label-width)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`.
+
+labelWidth: 100px
+
+labelWidth: 200px
+
+labelWidth: 25%
+
+labelWidth: auto
+
+Default (no labelWidth)
+
+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; }
+
+<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\>
+
+Copy
+
+### [](#remove-error-margin)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.
+
+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
+
+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; }
+
+<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\>
+
+Copy
+
+[](#iressfieldgroup)`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.
+
+Full name
+
+Title
+
+\*RequiredFirst name
+
+\*RequiredLast 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
+      id\="title"
+      name\="title"
+      type\="text"
+      width\="2"
+    />
+  </IressField\>
+  <IressField
+    htmlFor\="firstName"
+    label\="First name"
+    required
+  \>
     <IressInput
       id\="firstName"
       name\="firstName"
@@ -330,6 +1152,514 @@ Hide code
 
 Copy
 
+#### [](#field-group-api)Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| bg | 
+**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
+
+We recommend using the following token values for best background contrast:
+
+*   `colour.primary.fill` for primary backgrounds that need to stand out
+*   `colour.primary.surface` for primary backgrounds that need to be less prominent
+*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
+*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
+*   `colour.system.danger.fill` for error backgrounds that need to stand out
+*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
+*   `colour.system.success.fill` for success backgrounds that need to stand out
+*   `colour.system.success.surface` for success backgrounds that need to be less prominent
+*   `colour.system.warning.fill` for warning backgrounds that need to stand out
+*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
+*   `colour.system.info.fill` for info backgrounds that need to stand out
+*   `colour.system.info.surface` for info backgrounds that need to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| borderRadius | 
+
+The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **4** | **4** | **5** | **12** | **9** |
+| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
+
+ResponsiveProp<RadiusToken> | undefined
+
+ | \- | Set object |
+| children | 
+
+Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| color | 
+
+The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
+
+We recommend using the following token values for best color contrast:
+
+*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
+*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
+*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
+*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
+*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
+*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
+*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
+*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
+*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
+*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
+*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
+*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| 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\[\] | undefined
+
+ | \- | Set object |
+| focusable | 
+
+The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
+
+"true""within"undefined
+
+
+
+ | \- | Set object |
+| hiddenLabel | 
+
+Visually hides the label text, but still available to screen readers.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| hide | 
+
+Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+Notes:
+
+*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
+*   Consider if you can conditionally render the element instead of hiding it.
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| hint | 
+
+Text to be displayed as supporting field description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| horizontal | 
+
+Displays the label and input field inline instead of stacked vertically.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| 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)
+
+undefined
+
+
+
+ | \- | Set object |
+| inline | 
+
+Displays multiple children inline rather than stacked, with a small gap.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| join | 
+
+Displays multiple children inline and removes column gap.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| 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.
+
+stringundefined
+
+
+
+ | \- | Set object |
+| layerStyle | 
+
+Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
+
+*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
+*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
+*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
+
+ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
+
+ | \- | Set object |
+| m | 
+
+The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| maxWidth | 
+
+The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **7** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+| mb | 
+
+The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| ml | 
+
+The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mr | 
+
+The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mt | 
+
+The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mx | 
+
+The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| my | 
+
+The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| noGutter | 
+
+The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| p | 
+
+The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pb | 
+
+The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pl | 
+
+The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pr | 
+
+The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pt | 
+
+The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| px | 
+
+The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| py | 
+
+The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| readOnly | 
+
+Renders the group in a read-only state (no asterisk symbol).
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| 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.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| required | 
+
+When set to true, the 'required asterisk (\*)' is displayed next to the label text.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| rowGap | 
+
+The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
+
+Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **47** | **52** | **10.1** | **16** | No |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| srOnly | 
+
+Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| stretch | 
+
+The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| supplementary | 
+
+Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| textAlign | 
+
+The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
+
+ | \- | Set object |
+| textStyle | 
+
+Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
+
+*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
+*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
+*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
+*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
+*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
+*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
+*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
+*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
+*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
+
+ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
+
+ | \- | Set object |
+| width | 
+
+The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
+
+This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **4** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
 ### [](#inline)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.
@@ -338,9 +1668,9 @@ Full name
 
 Title
 
-\*Required First name
+\*RequiredFirst name
 
-\*Required Last name
+\*RequiredLast name
 
 Hide code
 
@@ -397,9 +1727,9 @@ Title
 
 MrMrsMiss
 
-\*Required First name
+\*RequiredFirst name
 
-\*Required Last name
+\*RequiredLast name
 
 Submit
 
@@ -495,9 +1825,9 @@ Full name
 
 Title
 
-\*Required First name
+\*RequiredFirst name
 
-\*Required Last name
+\*RequiredLast name
 
 Hide code
 
@@ -554,9 +1884,9 @@ Title
 
 MrMrsMiss
 
-\*Required First name
+\*RequiredFirst name
 
-\*Required Last name
+\*RequiredLast name
 
 Submit
 
@@ -667,8 +1997,10 @@ On this page
     *   [Custom error](#custom-error)
     *   [Hidden label](#hidden-label)
     *   [Required](#required)
-    *   [Optional](#optional)
     *   [Readonly data](#readonly-data)
+    *   [Supplementary](#supplementary)
+    *   [Horizontal layout](#horizontal-layout)
+    *   [Remove error margin](#remove-error-margin)
 *   [IressFieldGroup](#iressfieldgroup)
     *   [Inline](#inline)
     *   [Join](#join)