@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

package/dist/types/components.d.ts

@@ -20,6 +20,7 @@ import { ColumnSize } from "./components/col/col";
 import { ContentHeaderVariant } from "./components/content-header/content-header";
 import { CssGridTemplateType } from "./components/css-grid/css-grid";
 import { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown";
+import { DateFieldValidityState } from "./components/date-field/date-field";
 import { DateTimeCardCorners } from "./components/date-time-card/date-time-card";
 import { DateChangeEvent } from "./components/date-picker/date-picker";
 import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
@@ -28,6 +29,7 @@ import { CloseBehavior } from "./components/dropdown/dropdown-controller";
 import { AlignedPlacement, Side } from "./components/dropdown/placement";
 import { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
 import { EmptyStateLayout } from "./components/empty-state/empty-state";
+import { MakeRef } from "./components/utils/make-ref";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { IconButtonVariant } from "./components/icon-button/icon-button";
 import { ButtonVariant as ButtonVariant1 } from "./components/button/button";
@@ -60,6 +62,7 @@ export { ColumnSize } from "./components/col/col";
 export { ContentHeaderVariant } from "./components/content-header/content-header";
 export { CssGridTemplateType } from "./components/css-grid/css-grid";
 export { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown";
+export { DateFieldValidityState } from "./components/date-field/date-field";
 export { DateTimeCardCorners } from "./components/date-time-card/date-time-card";
 export { DateChangeEvent } from "./components/date-picker/date-picker";
 export { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
@@ -68,6 +71,7 @@ export { CloseBehavior } from "./components/dropdown/dropdown-controller";
 export { AlignedPlacement, Side } from "./components/dropdown/placement";
 export { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
 export { EmptyStateLayout } from "./components/empty-state/empty-state";
+export { MakeRef } from "./components/utils/make-ref";
 export { FlipTileState } from "./components/flip-tile/flip-tile-state";
 export { IconButtonVariant } from "./components/icon-button/icon-button";
 export { ButtonVariant as ButtonVariant1 } from "./components/button/button";
@@ -418,6 +422,72 @@ export namespace Components {
         "suggestions": string[];
         "tmpDisableScrollIntoView": boolean;
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxCheckbox {
+        /**
+          * Checked state of the checkbox component
+         */
+        "checked": boolean;
+        /**
+          * Disabled state of the checkbox component
+         */
+        "disabled": boolean;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        "hasValidValue": () => Promise<boolean>;
+        /**
+          * Indeterminate state of the checkbox component
+         */
+        "indeterminate": boolean;
+        /**
+          * Label for the checkbox component
+         */
+        "label"?: string;
+        /**
+          * Name of the checkbox component
+         */
+        "name"?: string;
+        /**
+          * Required state of the checkbox component.  If true, checkbox needs to be checked to be valid
+         */
+        "required": boolean;
+        /**
+          * Value of the checkbox component
+         */
+        "value": string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxCheckboxGroup {
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     interface IxChip {
         /**
           * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation) will be possible and also the close button will not be present.
@@ -516,6 +586,43 @@ export namespace Components {
          */
         "itemName": string;
     }
+    /**
+     * @since 2.4.0
+     */
+    interface IxCustomField {
+        /**
+          * Show text below the field component which show additional information
+         */
+        "helperText"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * A value is required or must be checked for the form to be submittable
+         */
+        "required": boolean;
+        /**
+          * Show helper, info, warning, error and valid text as tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     /**
      * @since 2.1.0
      */
@@ -580,6 +687,79 @@ export namespace Components {
         "to": string;
         "today": string;
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxDateField {
+        /**
+          * disabled attribute
+         */
+        "disabled": boolean;
+        /**
+          * Date format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         */
+        "format": string;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        /**
+          * Get the native input element
+         */
+        "getNativeInputElement": () => Promise<HTMLInputElement>;
+        "getValidityState": () => Promise<ValidityState>;
+        "hasValidValue": () => Promise<boolean>;
+        /**
+          * helper text below the input field
+         */
+        "helperText"?: string;
+        /**
+          * i18n string for the error message when the date is not parsable
+         */
+        "i18nErrorDateUnparsable": string;
+        /**
+          * info text below the input field
+         */
+        "infoText"?: string;
+        /**
+          * error text below the input field
+         */
+        "invalidText"?: string;
+        /**
+          * label of the input field
+         */
+        "label"?: string;
+        /**
+          * name of the input element
+         */
+        "name"?: string;
+        /**
+          * placeholder of the input element
+         */
+        "placeholder"?: string;
+        /**
+          * readonly attribute
+         */
+        "readonly": boolean;
+        /**
+          * required attribute
+         */
+        "required"?: boolean;
+        /**
+          * show text as tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * valid text below the input field
+         */
+        "validText"?: string;
+        /**
+          * value of the input element
+         */
+        "value": string;
+        /**
+          * warning text below the input field
+         */
+        "warningText"?: string;
+    }
     interface IxDatePicker {
         /**
           * Corner style
@@ -660,7 +840,7 @@ export namespace Components {
           * set styles
          */
         "individual": boolean;
-        "standaloneAppearance": any;
+        "standaloneAppearance"?: boolean;
     }
     interface IxDatetimePicker {
         /**
@@ -1011,6 +1191,75 @@ export namespace Components {
          */
         "value": string;
     }
+    interface IxFieldLabel {
+        "controlRef"?: MakeRef<HTMLElement>;
+        /**
+          * The id of the form element that the label is associated with
+         */
+        "htmlFor"?: string;
+        /**
+          * A value is required or must be checked for the form to be submittable
+         */
+        "required"?: boolean;
+    }
+    interface IxFieldWrapper {
+        /**
+          * The control element that the label is associated with
+         */
+        "controlRef"?: MakeRef<HTMLElement>;
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * The id of the form element that the label is associated with
+         */
+        "htmlForLabel"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Is the field component info
+         */
+        "isInfo": boolean;
+        /**
+          * Is the field component invalid
+         */
+        "isInvalid": boolean;
+        /**
+          * Is the field component valid
+         */
+        "isValid": boolean;
+        /**
+          * Is the field component warning
+         */
+        "isWarning": boolean;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * Show label as required
+         */
+        "required": boolean;
+        /**
+          * Show helper, error, info, warning text as tooltip
+         */
+        "showTextAsTooltip": boolean;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     interface IxFilterChip {
         /**
           * If true the filter chip will be in disabled state
@@ -1044,12 +1293,6 @@ export namespace Components {
          */
         "contentVisible": boolean;
     }
-    interface IxFormField {
-        /**
-          * Label
-         */
-        "label": string;
-    }
     interface IxGroup {
         /**
           * Whether the group is collapsed or expanded. Defaults to true.
@@ -1112,6 +1355,32 @@ export namespace Components {
          */
         "text": string;
     }
+    interface IxHelperText {
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * The id of the form element that the label is associated with
+         */
+        "htmlFor"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     interface IxIconButton {
         /**
           * Accessibility label for the icon button Will be set as aria-label on the nested HTML button element
@@ -1243,6 +1512,15 @@ export namespace Components {
         "unit": string;
         "value": string | number;
     }
+    interface IxLayoutForm {
+        /**
+          * Defines the layout of the form.
+         */
+        "layout": {
+    minWidth: string;
+    columns: number;
+  }[];
+    }
     /**
      * @since 2.0.0
      */
@@ -1674,6 +1952,90 @@ export namespace Components {
     }
     interface IxModalLoading {
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxNumberField {
+        /**
+          * The allowed characters pattern for the input field
+         */
+        "allowedCharactersPattern"?: string;
+        /**
+          * Disables the input field
+         */
+        "disabled": boolean;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        /**
+          * Returns the native input element used under the hood
+         */
+        "getNativeInputElement": () => Promise<HTMLInputElement>;
+        "hasValidValue": () => Promise<boolean>;
+        /**
+          * The helper text for the input field
+         */
+        "helperText"?: string;
+        /**
+          * The info text for the input field
+         */
+        "infoText"?: string;
+        /**
+          * The error text for the input field
+         */
+        "invalidText"?: string;
+        /**
+          * The label for the input field
+         */
+        "label"?: string;
+        /**
+          * The maximum value for the input field
+         */
+        "max"?: string | number;
+        /**
+          * The minimum value for the input field
+         */
+        "min"?: string | number;
+        /**
+          * name of the input element
+         */
+        "name"?: string;
+        /**
+          * The pattern for the input field
+         */
+        "pattern"?: string;
+        /**
+          * placeholder of the input element
+         */
+        "placeholder"?: string;
+        /**
+          * Indicates if the field is read-only
+         */
+        "readonly": boolean;
+        /**
+          * Indicates if the field is required
+         */
+        "required": boolean;
+        /**
+          * Indicates if the stepper buttons should be shown
+         */
+        "showStepperButtons"?: boolean;
+        /**
+          * Indicates if the text should be shown as a tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * The valid text for the input field
+         */
+        "validText"?: string;
+        /**
+          * The value of the input field
+         */
+        "value": number;
+        /**
+          * The warning text for the input field
+         */
+        "warningText"?: string;
+    }
     /**
      * @since 1.5.0
      */
@@ -1843,11 +2205,80 @@ export namespace Components {
          */
         "variant": PushCardVariant;
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxRadio {
+        /**
+          * Checked state of the radio component
+         */
+        "checked": boolean;
+        /**
+          * Disabled state of the radio component
+         */
+        "disabled": boolean;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        "hasValidValue": () => Promise<boolean>;
+        /**
+          * Label for the radio component
+         */
+        "label"?: string;
+        /**
+          * Name of the radio component
+         */
+        "name"?: string;
+        /**
+          * Value of the radio component
+         */
+        "value"?: string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxRadioGroup {
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * Show helper, info, warning, error and valid text as tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Value of the radiobutton group component
+         */
+        "value"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     /**
      * @since 2.0.0
      */
     interface IxRow {
     }
+    /**
+     * @form-ready 2.4.0
+     */
     interface IxSelect {
         /**
           * Show clear button
@@ -1861,6 +2292,17 @@ export namespace Components {
           * Select is extendable
          */
         "editable": boolean;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        /**
+          * Returns the native input element used in the component.
+         */
+        "getNativeInputElement": () => Promise<HTMLInputElement>;
+        "hasValidValue": () => Promise<boolean>;
+        /**
+          * Helper text for the select component
+          * @since 2.4.0
+         */
+        "helperText"?: string;
         /**
           * Hide list header
           * @since 1.5.0
@@ -1884,23 +2326,63 @@ export namespace Components {
          */
         "i18nSelectListHeader": string;
         /**
-          * Selection mode
+          * Info text for the select component
+          * @since 2.4.0
          */
-        "mode": 'single' | 'multiple';
+        "infoText"?: string;
         /**
-          * If true the select will be in readonly mode
+          * Error text for the select component
+          * @since 2.4.0
          */
-        "readonly": boolean;
+        "invalidText"?: string;
         /**
-          * Indices of selected items. This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.
-          * @deprecated since 2.0.0. Use the `value` property instead.
+          * Label for the select component
+          * @since 2.4.0
+         */
+        "label"?: string;
+        /**
+          * Selection mode
+         */
+        "mode": 'single' | 'multiple';
+        /**
+          * A string that represents the element's name attribute, containing a name that identifies the element when submitting the form.
+          * @since 2.4.0
+         */
+        "name"?: string;
+        /**
+          * If true the select will be in readonly mode
+         */
+        "readonly": boolean;
+        /**
+          * A Boolean attribute indicating that an option with a non-empty string value must be selected
+          * @since 2.4.0
+         */
+        "required": boolean;
+        /**
+          * Indices of selected items. This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.
+          * @deprecated since 2.0.0. Use the `value` property instead.
          */
         "selectedIndices"?: string | string[];
+        /**
+          * Show helper, error, info, warning text as tooltip
+          * @since 2.4.0
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * Valid text for the select component
+          * @since 2.4.0
+         */
+        "validText"?: string;
         /**
           * Current selected value. This corresponds to the value property of ix-select-items
           * @since 2.0.0
          */
-        "value"?: string | string[];
+        "value": string | string[];
+        /**
+          * Warning text for the select component
+          * @since 2.4.0
+         */
+        "warningText"?: string;
     }
     interface IxSelectItem {
         "getDropdownItemElement": () => Promise<HTMLIxDropdownItemElement>;
@@ -1977,6 +2459,11 @@ export namespace Components {
         "variant": 'primary' | 'secondary';
     }
     interface IxSplitButton {
+        /**
+          * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+          * @since 2.3.0
+         */
+        "closeBehavior": CloseBehavior;
         /**
           * Disabled
          */
@@ -2080,6 +2567,182 @@ export namespace Components {
          */
         "small": boolean;
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxTextField {
+        /**
+          * The allowed characters pattern for the text field.
+         */
+        "allowedCharactersPattern"?: string;
+        /**
+          * Specifies whether the text field is disabled.
+         */
+        "disabled": boolean;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        /**
+          * Returns the native input element used in the text field.
+         */
+        "getNativeInputElement": () => Promise<HTMLInputElement>;
+        "hasValidValue": () => Promise<boolean>;
+        /**
+          * The helper text for the text field.
+         */
+        "helperText"?: string;
+        /**
+          * The info text for the text field.
+         */
+        "infoText"?: string;
+        /**
+          * The error text for the text field.
+         */
+        "invalidText"?: string;
+        /**
+          * The label for the text field.
+         */
+        "label"?: string;
+        /**
+          * The maximum length of the text field.
+         */
+        "maxLength"?: number;
+        /**
+          * The minimum length of the text field.
+         */
+        "minLength"?: number;
+        /**
+          * The name of the text field.
+         */
+        "name"?: string;
+        /**
+          * The pattern for the text field.
+         */
+        "pattern"?: string;
+        /**
+          * The placeholder text for the text field.
+         */
+        "placeholder"?: string;
+        /**
+          * Specifies whether the text field is readonly.
+         */
+        "readonly": boolean;
+        /**
+          * Specifies whether the text field is required.
+         */
+        "required": boolean;
+        /**
+          * Specifies whether to show the text as a tooltip.
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * The type of the text field. Possible values are 'text', 'email', or 'password'.
+         */
+        "type": 'text' | 'email' | 'password';
+        /**
+          * The valid text for the text field.
+         */
+        "validText"?: string;
+        /**
+          * The value of the text field.
+         */
+        "value": string;
+        /**
+          * The warning text for the text field.
+         */
+        "warningText"?: string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxTextareaField {
+        /**
+          * Determines if the textarea field is disabled.
+         */
+        "disabled": boolean;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        /**
+          * Get the native textarea element.
+         */
+        "getNativeInputElement": () => Promise<HTMLTextAreaElement>;
+        "hasValidValue": () => Promise<boolean>;
+        /**
+          * The helper text for the textarea field.
+         */
+        "helperText"?: string;
+        /**
+          * The info text for the textarea field.
+         */
+        "infoText"?: string;
+        /**
+          * The error text for the textarea field.
+         */
+        "invalidText"?: string;
+        /**
+          * The label for the textarea field.
+         */
+        "label"?: string;
+        /**
+          * The maximum length of the textarea field.
+         */
+        "maxLength"?: number;
+        /**
+          * The minimum length of the textarea field.
+         */
+        "minLength"?: number;
+        /**
+          * The name of the textarea field.
+         */
+        "name"?: string;
+        /**
+          * The placeholder text for the textarea field.
+         */
+        "placeholder"?: string;
+        /**
+          * Determines if the textarea field is readonly.
+         */
+        "readonly": boolean;
+        /**
+          * Determines if the textarea field is required.
+         */
+        "required": boolean;
+        /**
+          * Determines the resize behavior of the textarea field. 'dimensions' means the textarea will be resized based on textareaHeight and textareaWidth. 'rowsCols' means the textarea will be resized based on textareaRows and textareaCols.
+         */
+        "resizeBehavior": 'dimensions' | 'rowsCols';
+        /**
+          * Determines if the text should be displayed as a tooltip.
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * The height of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaCols": string;
+        /**
+          * The height of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaHeight": string;
+        /**
+          * The number of rows of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaRows": string;
+        /**
+          * The height of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaWidth": string;
+        /**
+          * The valid text for the textarea field.
+         */
+        "validText"?: string;
+        /**
+          * The value of the textarea field.
+         */
+        "value": string;
+        /**
+          * The warning text for the textarea field.
+         */
+        "warningText"?: string;
+    }
     interface IxTile {
         /**
           * Size of the tile - one of 'small', 'medium' or 'large'
@@ -2182,6 +2845,9 @@ export namespace Components {
          */
         "showToast": (config: ToastConfig) => Promise<ShowToastResult>;
     }
+    /**
+     * @form-ready 2.4.0
+     */
     interface IxToggle {
         /**
           * Whether the slide-toggle element is checked or not.
@@ -2191,6 +2857,8 @@ export namespace Components {
           * Whether the slide-toggle element is disabled or not.
          */
         "disabled": boolean;
+        "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
+        "hasValidValue": () => Promise<boolean>;
         /**
           * Hide `on` and `off` text
          */
@@ -2199,6 +2867,14 @@ export namespace Components {
           * If true the control is in indeterminate state
          */
         "indeterminate": boolean;
+        /**
+          * Name of the checkbox component
+         */
+        "name"?: string;
+        /**
+          * Required state of the checkbox component.  If true, checkbox needs to be checked to be valid
+         */
+        "required": boolean;
         /**
           * Text for indeterminate state
          */
@@ -2211,6 +2887,10 @@ export namespace Components {
           * Text for on state
          */
         "textOn": string;
+        /**
+          * Value of the checkbox component
+         */
+        "value": string;
     }
     /**
      * @since 2.0.0
@@ -2472,6 +3152,10 @@ export interface IxCategoryFilterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxCategoryFilterElement;
 }
+export interface IxCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxCheckboxElement;
+}
 export interface IxChipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxChipElement;
@@ -2484,6 +3168,10 @@ export interface IxDateDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxDateDropdownElement;
 }
+export interface IxDateFieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxDateFieldElement;
+}
 export interface IxDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxDatePickerElement;
@@ -2588,6 +3276,10 @@ export interface IxModalHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxModalHeaderElement;
 }
+export interface IxNumberFieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxNumberFieldElement;
+}
 export interface IxPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxPaginationElement;
@@ -2596,6 +3288,14 @@ export interface IxPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxPaneElement;
 }
+export interface IxRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxRadioElement;
+}
+export interface IxRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxRadioGroupElement;
+}
 export interface IxSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxSelectElement;
@@ -2624,6 +3324,14 @@ export interface IxTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxTabsElement;
 }
+export interface IxTextFieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxTextFieldElement;
+}
+export interface IxTextareaFieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxTextareaFieldElement;
+}
 export interface IxTimePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxTimePickerElement;
@@ -2862,6 +3570,38 @@ declare global {
         prototype: HTMLIxCategoryFilterElement;
         new (): HTMLIxCategoryFilterElement;
     };
+    interface HTMLIxCheckboxElementEventMap {
+        "checkedChange": boolean;
+        "valueChange": string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxCheckboxElement extends Components.IxCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxCheckboxElementEventMap>(type: K, listener: (this: HTMLIxCheckboxElement, ev: IxCheckboxCustomEvent<HTMLIxCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxCheckboxElementEventMap>(type: K, listener: (this: HTMLIxCheckboxElement, ev: IxCheckboxCustomEvent<HTMLIxCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIxCheckboxElement: {
+        prototype: HTMLIxCheckboxElement;
+        new (): HTMLIxCheckboxElement;
+    };
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxCheckboxGroupElement extends Components.IxCheckboxGroup, HTMLStencilElement {
+    }
+    var HTMLIxCheckboxGroupElement: {
+        prototype: HTMLIxCheckboxGroupElement;
+        new (): HTMLIxCheckboxGroupElement;
+    };
     interface HTMLIxChipElementEventMap {
         "closeChip": any;
     }
@@ -2926,6 +3666,15 @@ declare global {
         prototype: HTMLIxCssGridItemElement;
         new (): HTMLIxCssGridItemElement;
     };
+    /**
+     * @since 2.4.0
+     */
+    interface HTMLIxCustomFieldElement extends Components.IxCustomField, HTMLStencilElement {
+    }
+    var HTMLIxCustomFieldElement: {
+        prototype: HTMLIxCustomFieldElement;
+        new (): HTMLIxCustomFieldElement;
+    };
     interface HTMLIxDateDropdownElementEventMap {
         "dateRangeChange": DateRangeChangeEvent;
     }
@@ -2946,6 +3695,30 @@ declare global {
         prototype: HTMLIxDateDropdownElement;
         new (): HTMLIxDateDropdownElement;
     };
+    interface HTMLIxDateFieldElementEventMap {
+        "valueChange": string;
+        "validityStateChange": DateFieldValidityState;
+        "ixFocus": void;
+        "ixBlur": void;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxDateFieldElement extends Components.IxDateField, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxDateFieldElementEventMap>(type: K, listener: (this: HTMLIxDateFieldElement, ev: IxDateFieldCustomEvent<HTMLIxDateFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxDateFieldElementEventMap>(type: K, listener: (this: HTMLIxDateFieldElement, ev: IxDateFieldCustomEvent<HTMLIxDateFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIxDateFieldElement: {
+        prototype: HTMLIxDateFieldElement;
+        new (): HTMLIxDateFieldElement;
+    };
     interface HTMLIxDatePickerElementEventMap {
         "dateChange": DateChangeEvent;
         "dateRangeChange": DateChangeEvent;
@@ -3140,6 +3913,18 @@ declare global {
         prototype: HTMLIxExpandingSearchElement;
         new (): HTMLIxExpandingSearchElement;
     };
+    interface HTMLIxFieldLabelElement extends Components.IxFieldLabel, HTMLStencilElement {
+    }
+    var HTMLIxFieldLabelElement: {
+        prototype: HTMLIxFieldLabelElement;
+        new (): HTMLIxFieldLabelElement;
+    };
+    interface HTMLIxFieldWrapperElement extends Components.IxFieldWrapper, HTMLStencilElement {
+    }
+    var HTMLIxFieldWrapperElement: {
+        prototype: HTMLIxFieldWrapperElement;
+        new (): HTMLIxFieldWrapperElement;
+    };
     interface HTMLIxFilterChipElementEventMap {
         "closeClick": void;
     }
@@ -3169,12 +3954,6 @@ declare global {
         prototype: HTMLIxFlipTileContentElement;
         new (): HTMLIxFlipTileContentElement;
     };
-    interface HTMLIxFormFieldElement extends Components.IxFormField, HTMLStencilElement {
-    }
-    var HTMLIxFormFieldElement: {
-        prototype: HTMLIxFormFieldElement;
-        new (): HTMLIxFormFieldElement;
-    };
     interface HTMLIxGroupElementEventMap {
         "selectGroup": boolean;
         "selectItem": number;
@@ -3217,6 +3996,12 @@ declare global {
         prototype: HTMLIxGroupItemElement;
         new (): HTMLIxGroupItemElement;
     };
+    interface HTMLIxHelperTextElement extends Components.IxHelperText, HTMLStencilElement {
+    }
+    var HTMLIxHelperTextElement: {
+        prototype: HTMLIxHelperTextElement;
+        new (): HTMLIxHelperTextElement;
+    };
     interface HTMLIxIconButtonElement extends Components.IxIconButton, HTMLStencilElement {
     }
     var HTMLIxIconButtonElement: {
@@ -3273,6 +4058,12 @@ declare global {
         prototype: HTMLIxKpiElement;
         new (): HTMLIxKpiElement;
     };
+    interface HTMLIxLayoutFormElement extends Components.IxLayoutForm, HTMLStencilElement {
+    }
+    var HTMLIxLayoutFormElement: {
+        prototype: HTMLIxLayoutFormElement;
+        new (): HTMLIxLayoutFormElement;
+    };
     /**
      * @since 2.0.0
      */
@@ -3581,6 +4372,29 @@ declare global {
         prototype: HTMLIxModalLoadingElement;
         new (): HTMLIxModalLoadingElement;
     };
+    interface HTMLIxNumberFieldElementEventMap {
+        "valueChange": number;
+        "validityStateChange": ValidityState;
+        "ixBlur": void;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxNumberFieldElement extends Components.IxNumberField, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxNumberFieldElementEventMap>(type: K, listener: (this: HTMLIxNumberFieldElement, ev: IxNumberFieldCustomEvent<HTMLIxNumberFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxNumberFieldElementEventMap>(type: K, listener: (this: HTMLIxNumberFieldElement, ev: IxNumberFieldCustomEvent<HTMLIxNumberFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIxNumberFieldElement: {
+        prototype: HTMLIxNumberFieldElement;
+        new (): HTMLIxNumberFieldElement;
+    };
     interface HTMLIxPaginationElementEventMap {
         "pageSelected": number;
         "itemCountChanged": number;
@@ -3656,6 +4470,49 @@ declare global {
         prototype: HTMLIxPushCardElement;
         new (): HTMLIxPushCardElement;
     };
+    interface HTMLIxRadioElementEventMap {
+        "checkedChange": boolean;
+        "valueChange": string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxRadioElement extends Components.IxRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxRadioElementEventMap>(type: K, listener: (this: HTMLIxRadioElement, ev: IxRadioCustomEvent<HTMLIxRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxRadioElementEventMap>(type: K, listener: (this: HTMLIxRadioElement, ev: IxRadioCustomEvent<HTMLIxRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIxRadioElement: {
+        prototype: HTMLIxRadioElement;
+        new (): HTMLIxRadioElement;
+    };
+    interface HTMLIxRadioGroupElementEventMap {
+        "valueChange": string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxRadioGroupElement extends Components.IxRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxRadioGroupElementEventMap>(type: K, listener: (this: HTMLIxRadioGroupElement, ev: IxRadioGroupCustomEvent<HTMLIxRadioGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxRadioGroupElementEventMap>(type: K, listener: (this: HTMLIxRadioGroupElement, ev: IxRadioGroupCustomEvent<HTMLIxRadioGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIxRadioGroupElement: {
+        prototype: HTMLIxRadioGroupElement;
+        new (): HTMLIxRadioGroupElement;
+    };
     /**
      * @since 2.0.0
      */
@@ -3670,7 +4527,11 @@ declare global {
         "itemSelectionChange": string[];
         "inputChange": string;
         "addItem": string;
+        "ixBlur": void;
     }
+    /**
+     * @form-ready 2.4.0
+     */
     interface HTMLIxSelectElement extends Components.IxSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxSelectElementEventMap>(type: K, listener: (this: HTMLIxSelectElement, ev: IxSelectCustomEvent<HTMLIxSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3799,33 +4660,79 @@ declare global {
         prototype: HTMLIxTabsElement;
         new (): HTMLIxTabsElement;
     };
-    interface HTMLIxTileElement extends Components.IxTile, HTMLStencilElement {
-    }
-    var HTMLIxTileElement: {
-        prototype: HTMLIxTileElement;
-        new (): HTMLIxTileElement;
-    };
-    interface HTMLIxTimePickerElementEventMap {
-        "timeSelect": string;
-        "done": string;
-        "timeChange": string;
+    interface HTMLIxTextFieldElementEventMap {
+        "valueChange": string;
+        "validityStateChange": ValidityState;
+        "ixBlur": void;
     }
-    interface HTMLIxTimePickerElement extends Components.IxTimePicker, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIxTimePickerElementEventMap>(type: K, listener: (this: HTMLIxTimePickerElement, ev: IxTimePickerCustomEvent<HTMLIxTimePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxTextFieldElement extends Components.IxTextField, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxTextFieldElementEventMap>(type: K, listener: (this: HTMLIxTextFieldElement, ev: IxTextFieldCustomEvent<HTMLIxTextFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIxTimePickerElementEventMap>(type: K, listener: (this: HTMLIxTimePickerElement, ev: IxTimePickerCustomEvent<HTMLIxTimePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxTextFieldElementEventMap>(type: K, listener: (this: HTMLIxTextFieldElement, ev: IxTextFieldCustomEvent<HTMLIxTextFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLIxTimePickerElement: {
-        prototype: HTMLIxTimePickerElement;
-        new (): HTMLIxTimePickerElement;
+    var HTMLIxTextFieldElement: {
+        prototype: HTMLIxTextFieldElement;
+        new (): HTMLIxTextFieldElement;
     };
-    interface HTMLIxToastElementEventMap {
-        "closeToast": any;
+    interface HTMLIxTextareaFieldElementEventMap {
+        "valueChange": string;
+        "validityStateChange": ValidityState;
+        "ixBlur": void;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface HTMLIxTextareaFieldElement extends Components.IxTextareaField, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxTextareaFieldElementEventMap>(type: K, listener: (this: HTMLIxTextareaFieldElement, ev: IxTextareaFieldCustomEvent<HTMLIxTextareaFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxTextareaFieldElementEventMap>(type: K, listener: (this: HTMLIxTextareaFieldElement, ev: IxTextareaFieldCustomEvent<HTMLIxTextareaFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIxTextareaFieldElement: {
+        prototype: HTMLIxTextareaFieldElement;
+        new (): HTMLIxTextareaFieldElement;
+    };
+    interface HTMLIxTileElement extends Components.IxTile, HTMLStencilElement {
+    }
+    var HTMLIxTileElement: {
+        prototype: HTMLIxTileElement;
+        new (): HTMLIxTileElement;
+    };
+    interface HTMLIxTimePickerElementEventMap {
+        "timeSelect": string;
+        "done": string;
+        "timeChange": string;
+    }
+    interface HTMLIxTimePickerElement extends Components.IxTimePicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxTimePickerElementEventMap>(type: K, listener: (this: HTMLIxTimePickerElement, ev: IxTimePickerCustomEvent<HTMLIxTimePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxTimePickerElementEventMap>(type: K, listener: (this: HTMLIxTimePickerElement, ev: IxTimePickerCustomEvent<HTMLIxTimePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIxTimePickerElement: {
+        prototype: HTMLIxTimePickerElement;
+        new (): HTMLIxTimePickerElement;
+    };
+    interface HTMLIxToastElementEventMap {
+        "closeToast": any;
     }
     interface HTMLIxToastElement extends Components.IxToast, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxToastElementEventMap>(type: K, listener: (this: HTMLIxToastElement, ev: IxToastCustomEvent<HTMLIxToastElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3849,7 +4756,11 @@ declare global {
     };
     interface HTMLIxToggleElementEventMap {
         "checkedChange": boolean;
+        "valueChange": string;
     }
+    /**
+     * @form-ready 2.4.0
+     */
     interface HTMLIxToggleElement extends Components.IxToggle, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxToggleElementEventMap>(type: K, listener: (this: HTMLIxToggleElement, ev: IxToggleCustomEvent<HTMLIxToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4015,13 +4926,17 @@ declare global {
         "ix-card-list": HTMLIxCardListElement;
         "ix-card-title": HTMLIxCardTitleElement;
         "ix-category-filter": HTMLIxCategoryFilterElement;
+        "ix-checkbox": HTMLIxCheckboxElement;
+        "ix-checkbox-group": HTMLIxCheckboxGroupElement;
         "ix-chip": HTMLIxChipElement;
         "ix-col": HTMLIxColElement;
         "ix-content": HTMLIxContentElement;
         "ix-content-header": HTMLIxContentHeaderElement;
         "ix-css-grid": HTMLIxCssGridElement;
         "ix-css-grid-item": HTMLIxCssGridItemElement;
+        "ix-custom-field": HTMLIxCustomFieldElement;
         "ix-date-dropdown": HTMLIxDateDropdownElement;
+        "ix-date-field": HTMLIxDateFieldElement;
         "ix-date-picker": HTMLIxDatePickerElement;
         "ix-date-time-card": HTMLIxDateTimeCardElement;
         "ix-datetime-picker": HTMLIxDatetimePickerElement;
@@ -4036,19 +4951,22 @@ declare global {
         "ix-event-list": HTMLIxEventListElement;
         "ix-event-list-item": HTMLIxEventListItemElement;
         "ix-expanding-search": HTMLIxExpandingSearchElement;
+        "ix-field-label": HTMLIxFieldLabelElement;
+        "ix-field-wrapper": HTMLIxFieldWrapperElement;
         "ix-filter-chip": HTMLIxFilterChipElement;
         "ix-flip-tile": HTMLIxFlipTileElement;
         "ix-flip-tile-content": HTMLIxFlipTileContentElement;
-        "ix-form-field": HTMLIxFormFieldElement;
         "ix-group": HTMLIxGroupElement;
         "ix-group-context-menu": HTMLIxGroupContextMenuElement;
         "ix-group-item": HTMLIxGroupItemElement;
+        "ix-helper-text": HTMLIxHelperTextElement;
         "ix-icon-button": HTMLIxIconButtonElement;
         "ix-icon-toggle-button": HTMLIxIconToggleButtonElement;
         "ix-input-group": HTMLIxInputGroupElement;
         "ix-key-value": HTMLIxKeyValueElement;
         "ix-key-value-list": HTMLIxKeyValueListElement;
         "ix-kpi": HTMLIxKpiElement;
+        "ix-layout-form": HTMLIxLayoutFormElement;
         "ix-layout-grid": HTMLIxLayoutGridElement;
         "ix-link-button": HTMLIxLinkButtonElement;
         "ix-map-navigation": HTMLIxMapNavigationElement;
@@ -4071,12 +4989,15 @@ declare global {
         "ix-modal-footer": HTMLIxModalFooterElement;
         "ix-modal-header": HTMLIxModalHeaderElement;
         "ix-modal-loading": HTMLIxModalLoadingElement;
+        "ix-number-field": HTMLIxNumberFieldElement;
         "ix-pagination": HTMLIxPaginationElement;
         "ix-pane": HTMLIxPaneElement;
         "ix-pane-layout": HTMLIxPaneLayoutElement;
         "ix-pill": HTMLIxPillElement;
         "ix-playground-internal": HTMLIxPlaygroundInternalElement;
         "ix-push-card": HTMLIxPushCardElement;
+        "ix-radio": HTMLIxRadioElement;
+        "ix-radio-group": HTMLIxRadioGroupElement;
         "ix-row": HTMLIxRowElement;
         "ix-select": HTMLIxSelectElement;
         "ix-select-item": HTMLIxSelectItemElement;
@@ -4086,6 +5007,8 @@ declare global {
         "ix-split-button-item": HTMLIxSplitButtonItemElement;
         "ix-tab-item": HTMLIxTabItemElement;
         "ix-tabs": HTMLIxTabsElement;
+        "ix-text-field": HTMLIxTextFieldElement;
+        "ix-textarea-field": HTMLIxTextareaFieldElement;
         "ix-tile": HTMLIxTileElement;
         "ix-time-picker": HTMLIxTimePickerElement;
         "ix-toast": HTMLIxToastElement;
@@ -4463,6 +5386,78 @@ declare namespace LocalJSX {
          */
         "suggestions"?: string[];
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxCheckbox {
+        /**
+          * Checked state of the checkbox component
+         */
+        "checked"?: boolean;
+        /**
+          * Disabled state of the checkbox component
+         */
+        "disabled"?: boolean;
+        /**
+          * Indeterminate state of the checkbox component
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Label for the checkbox component
+         */
+        "label"?: string;
+        /**
+          * Name of the checkbox component
+         */
+        "name"?: string;
+        /**
+          * Event emitted when the checked state of the checkbox changes
+         */
+        "onCheckedChange"?: (event: IxCheckboxCustomEvent<boolean>) => void;
+        /**
+          * Event emitted when the value of the checkbox changes
+         */
+        "onValueChange"?: (event: IxCheckboxCustomEvent<string>) => void;
+        /**
+          * Required state of the checkbox component.  If true, checkbox needs to be checked to be valid
+         */
+        "required"?: boolean;
+        /**
+          * Value of the checkbox component
+         */
+        "value"?: string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxCheckboxGroup {
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     interface IxChip {
         /**
           * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation) will be possible and also the close button will not be present.
@@ -4570,6 +5565,43 @@ declare namespace LocalJSX {
          */
         "itemName"?: string;
     }
+    /**
+     * @since 2.4.0
+     */
+    interface IxCustomField {
+        /**
+          * Show text below the field component which show additional information
+         */
+        "helperText"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * A value is required or must be checked for the form to be submittable
+         */
+        "required"?: boolean;
+        /**
+          * Show helper, info, warning, error and valid text as tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     /**
      * @since 2.1.0
      */
@@ -4633,6 +5665,80 @@ declare namespace LocalJSX {
          */
         "to"?: string;
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxDateField {
+        /**
+          * disabled attribute
+         */
+        "disabled"?: boolean;
+        /**
+          * Date format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         */
+        "format"?: string;
+        /**
+          * helper text below the input field
+         */
+        "helperText"?: string;
+        /**
+          * i18n string for the error message when the date is not parsable
+         */
+        "i18nErrorDateUnparsable"?: string;
+        /**
+          * info text below the input field
+         */
+        "infoText"?: string;
+        /**
+          * error text below the input field
+         */
+        "invalidText"?: string;
+        /**
+          * label of the input field
+         */
+        "label"?: string;
+        /**
+          * name of the input element
+         */
+        "name"?: string;
+        /**
+          * Validation state change event.
+         */
+        "onValidityStateChange"?: (event: IxDateFieldCustomEvent<DateFieldValidityState>) => void;
+        /**
+          * Input change event.
+         */
+        "onValueChange"?: (event: IxDateFieldCustomEvent<string>) => void;
+        /**
+          * placeholder of the input element
+         */
+        "placeholder"?: string;
+        /**
+          * readonly attribute
+         */
+        "readonly"?: boolean;
+        /**
+          * required attribute
+         */
+        "required"?: boolean;
+        /**
+          * show text as tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * valid text below the input field
+         */
+        "validText"?: string;
+        /**
+          * value of the input element
+         */
+        "value"?: string;
+        /**
+          * warning text below the input field
+         */
+        "warningText"?: string;
+    }
     interface IxDatePicker {
         /**
           * Corner style
@@ -5090,6 +6196,74 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface IxFieldLabel {
+        /**
+          * The id of the form element that the label is associated with
+         */
+        "htmlFor"?: string;
+        /**
+          * A value is required or must be checked for the form to be submittable
+         */
+        "required"?: boolean;
+    }
+    interface IxFieldWrapper {
+        /**
+          * The control element that the label is associated with
+         */
+        "controlRef"?: MakeRef<HTMLElement>;
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * The id of the form element that the label is associated with
+         */
+        "htmlForLabel"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Is the field component info
+         */
+        "isInfo"?: boolean;
+        /**
+          * Is the field component invalid
+         */
+        "isInvalid"?: boolean;
+        /**
+          * Is the field component valid
+         */
+        "isValid"?: boolean;
+        /**
+          * Is the field component warning
+         */
+        "isWarning"?: boolean;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * Show label as required
+         */
+        "required"?: boolean;
+        /**
+          * Show helper, error, info, warning text as tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     interface IxFilterChip {
         /**
           * If true the filter chip will be in disabled state
@@ -5123,12 +6297,6 @@ declare namespace LocalJSX {
     }
     interface IxFlipTileContent {
     }
-    interface IxFormField {
-        /**
-          * Label
-         */
-        "label"?: string;
-    }
     interface IxGroup {
         /**
           * Whether the group is collapsed or expanded. Defaults to true.
@@ -5207,6 +6375,32 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    interface IxHelperText {
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * The id of the form element that the label is associated with
+         */
+        "htmlFor"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     interface IxIconButton {
         /**
           * Accessibility label for the icon button Will be set as aria-label on the nested HTML button element
@@ -5342,6 +6536,15 @@ declare namespace LocalJSX {
         "unit"?: string;
         "value"?: string | number;
     }
+    interface IxLayoutForm {
+        /**
+          * Defines the layout of the form.
+         */
+        "layout"?: {
+    minWidth: string;
+    columns: number;
+  }[];
+    }
     /**
      * @since 2.0.0
      */
@@ -5787,6 +6990,96 @@ declare namespace LocalJSX {
     }
     interface IxModalLoading {
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxNumberField {
+        /**
+          * The allowed characters pattern for the input field
+         */
+        "allowedCharactersPattern"?: string;
+        /**
+          * Disables the input field
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text for the input field
+         */
+        "helperText"?: string;
+        /**
+          * The info text for the input field
+         */
+        "infoText"?: string;
+        /**
+          * The error text for the input field
+         */
+        "invalidText"?: string;
+        /**
+          * The label for the input field
+         */
+        "label"?: string;
+        /**
+          * The maximum value for the input field
+         */
+        "max"?: string | number;
+        /**
+          * The minimum value for the input field
+         */
+        "min"?: string | number;
+        /**
+          * name of the input element
+         */
+        "name"?: string;
+        /**
+          * Event emitted when the input field loses focus
+         */
+        "onIxBlur"?: (event: IxNumberFieldCustomEvent<void>) => void;
+        /**
+          * Event emitted when the validity state of the input field changes
+         */
+        "onValidityStateChange"?: (event: IxNumberFieldCustomEvent<ValidityState>) => void;
+        /**
+          * Event emitted when the value of the input field changes
+         */
+        "onValueChange"?: (event: IxNumberFieldCustomEvent<number>) => void;
+        /**
+          * The pattern for the input field
+         */
+        "pattern"?: string;
+        /**
+          * placeholder of the input element
+         */
+        "placeholder"?: string;
+        /**
+          * Indicates if the field is read-only
+         */
+        "readonly"?: boolean;
+        /**
+          * Indicates if the field is required
+         */
+        "required"?: boolean;
+        /**
+          * Indicates if the stepper buttons should be shown
+         */
+        "showStepperButtons"?: boolean;
+        /**
+          * Indicates if the text should be shown as a tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * The valid text for the input field
+         */
+        "validText"?: string;
+        /**
+          * The value of the input field
+         */
+        "value"?: number;
+        /**
+          * The warning text for the input field
+         */
+        "warningText"?: string;
+    }
     /**
      * @since 1.5.0
      */
@@ -5974,11 +7267,90 @@ declare namespace LocalJSX {
          */
         "variant"?: PushCardVariant;
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxRadio {
+        /**
+          * Checked state of the radio component
+         */
+        "checked"?: boolean;
+        /**
+          * Disabled state of the radio component
+         */
+        "disabled"?: boolean;
+        /**
+          * Label for the radio component
+         */
+        "label"?: string;
+        /**
+          * Name of the radio component
+         */
+        "name"?: string;
+        /**
+          * Event emitted when the checked state of the radio changes
+         */
+        "onCheckedChange"?: (event: IxRadioCustomEvent<boolean>) => void;
+        /**
+          * Event emitted when the value of the radio changes
+         */
+        "onValueChange"?: (event: IxRadioCustomEvent<string>) => void;
+        /**
+          * Value of the radio component
+         */
+        "value"?: string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxRadioGroup {
+        /**
+          * Show text below the field component
+         */
+        "helperText"?: string;
+        /**
+          * Info text for the field component
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the field component
+         */
+        "invalidText"?: string;
+        /**
+          * Label for the field component
+         */
+        "label"?: string;
+        /**
+          * Event emitted when the value of the radiobutton group changes
+         */
+        "onValueChange"?: (event: IxRadioGroupCustomEvent<string>) => void;
+        /**
+          * Show helper, info, warning, error and valid text as tooltip
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * Valid text for the field component
+         */
+        "validText"?: string;
+        /**
+          * Value of the radiobutton group component
+         */
+        "value"?: string;
+        /**
+          * Warning text for the field component
+         */
+        "warningText"?: string;
+    }
     /**
      * @since 2.0.0
      */
     interface IxRow {
     }
+    /**
+     * @form-ready 2.4.0
+     */
     interface IxSelect {
         /**
           * Show clear button
@@ -5992,6 +7364,11 @@ declare namespace LocalJSX {
           * Select is extendable
          */
         "editable"?: boolean;
+        /**
+          * Helper text for the select component
+          * @since 2.4.0
+         */
+        "helperText"?: string;
         /**
           * Hide list header
           * @since 1.5.0
@@ -6014,10 +7391,30 @@ declare namespace LocalJSX {
           * Select list header
          */
         "i18nSelectListHeader"?: string;
+        /**
+          * Info text for the select component
+          * @since 2.4.0
+         */
+        "infoText"?: string;
+        /**
+          * Error text for the select component
+          * @since 2.4.0
+         */
+        "invalidText"?: string;
+        /**
+          * Label for the select component
+          * @since 2.4.0
+         */
+        "label"?: string;
         /**
           * Selection mode
          */
         "mode"?: 'single' | 'multiple';
+        /**
+          * A string that represents the element's name attribute, containing a name that identifies the element when submitting the form.
+          * @since 2.4.0
+         */
+        "name"?: string;
         /**
           * Item added to selection
          */
@@ -6032,6 +7429,10 @@ declare namespace LocalJSX {
           * @deprecated since 2.0.0. Use `valueChange` instead.
          */
         "onItemSelectionChange"?: (event: IxSelectCustomEvent<string[]>) => void;
+        /**
+          * Blur input
+         */
+        "onIxBlur"?: (event: IxSelectCustomEvent<void>) => void;
         /**
           * Value changed
           * @since 2.0.0
@@ -6041,16 +7442,36 @@ declare namespace LocalJSX {
           * If true the select will be in readonly mode
          */
         "readonly"?: boolean;
+        /**
+          * A Boolean attribute indicating that an option with a non-empty string value must be selected
+          * @since 2.4.0
+         */
+        "required"?: boolean;
         /**
           * Indices of selected items. This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.
           * @deprecated since 2.0.0. Use the `value` property instead.
          */
         "selectedIndices"?: string | string[];
+        /**
+          * Show helper, error, info, warning text as tooltip
+          * @since 2.4.0
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * Valid text for the select component
+          * @since 2.4.0
+         */
+        "validText"?: string;
         /**
           * Current selected value. This corresponds to the value property of ix-select-items
           * @since 2.0.0
          */
         "value"?: string | string[];
+        /**
+          * Warning text for the select component
+          * @since 2.4.0
+         */
+        "warningText"?: string;
     }
     interface IxSelectItem {
         /**
@@ -6125,6 +7546,11 @@ declare namespace LocalJSX {
         "variant"?: 'primary' | 'secondary';
     }
     interface IxSplitButton {
+        /**
+          * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+          * @since 2.3.0
+         */
+        "closeBehavior"?: CloseBehavior;
         /**
           * Disabled
          */
@@ -6245,6 +7671,194 @@ declare namespace LocalJSX {
          */
         "small"?: boolean;
     }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxTextField {
+        /**
+          * The allowed characters pattern for the text field.
+         */
+        "allowedCharactersPattern"?: string;
+        /**
+          * Specifies whether the text field is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text for the text field.
+         */
+        "helperText"?: string;
+        /**
+          * The info text for the text field.
+         */
+        "infoText"?: string;
+        /**
+          * The error text for the text field.
+         */
+        "invalidText"?: string;
+        /**
+          * The label for the text field.
+         */
+        "label"?: string;
+        /**
+          * The maximum length of the text field.
+         */
+        "maxLength"?: number;
+        /**
+          * The minimum length of the text field.
+         */
+        "minLength"?: number;
+        /**
+          * The name of the text field.
+         */
+        "name"?: string;
+        /**
+          * Event emitted when the text field loses focus.
+         */
+        "onIxBlur"?: (event: IxTextFieldCustomEvent<void>) => void;
+        /**
+          * Event emitted when the validity state of the text field changes.
+         */
+        "onValidityStateChange"?: (event: IxTextFieldCustomEvent<ValidityState>) => void;
+        /**
+          * Event emitted when the value of the text field changes.
+         */
+        "onValueChange"?: (event: IxTextFieldCustomEvent<string>) => void;
+        /**
+          * The pattern for the text field.
+         */
+        "pattern"?: string;
+        /**
+          * The placeholder text for the text field.
+         */
+        "placeholder"?: string;
+        /**
+          * Specifies whether the text field is readonly.
+         */
+        "readonly"?: boolean;
+        /**
+          * Specifies whether the text field is required.
+         */
+        "required"?: boolean;
+        /**
+          * Specifies whether to show the text as a tooltip.
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * The type of the text field. Possible values are 'text', 'email', or 'password'.
+         */
+        "type"?: 'text' | 'email' | 'password';
+        /**
+          * The valid text for the text field.
+         */
+        "validText"?: string;
+        /**
+          * The value of the text field.
+         */
+        "value"?: string;
+        /**
+          * The warning text for the text field.
+         */
+        "warningText"?: string;
+    }
+    /**
+     * @since 2.4.0
+     * @form-ready 2.4.0
+     */
+    interface IxTextareaField {
+        /**
+          * Determines if the textarea field is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text for the textarea field.
+         */
+        "helperText"?: string;
+        /**
+          * The info text for the textarea field.
+         */
+        "infoText"?: string;
+        /**
+          * The error text for the textarea field.
+         */
+        "invalidText"?: string;
+        /**
+          * The label for the textarea field.
+         */
+        "label"?: string;
+        /**
+          * The maximum length of the textarea field.
+         */
+        "maxLength"?: number;
+        /**
+          * The minimum length of the textarea field.
+         */
+        "minLength"?: number;
+        /**
+          * The name of the textarea field.
+         */
+        "name"?: string;
+        /**
+          * Event emitted when the textarea field loses focus.
+         */
+        "onIxBlur"?: (event: IxTextareaFieldCustomEvent<void>) => void;
+        /**
+          * Event emitted when the validity state of the textarea field changes.
+         */
+        "onValidityStateChange"?: (event: IxTextareaFieldCustomEvent<ValidityState>) => void;
+        /**
+          * Event emitted when the value of the textarea field changes.
+         */
+        "onValueChange"?: (event: IxTextareaFieldCustomEvent<string>) => void;
+        /**
+          * The placeholder text for the textarea field.
+         */
+        "placeholder"?: string;
+        /**
+          * Determines if the textarea field is readonly.
+         */
+        "readonly"?: boolean;
+        /**
+          * Determines if the textarea field is required.
+         */
+        "required"?: boolean;
+        /**
+          * Determines the resize behavior of the textarea field. 'dimensions' means the textarea will be resized based on textareaHeight and textareaWidth. 'rowsCols' means the textarea will be resized based on textareaRows and textareaCols.
+         */
+        "resizeBehavior"?: 'dimensions' | 'rowsCols';
+        /**
+          * Determines if the text should be displayed as a tooltip.
+         */
+        "showTextAsTooltip"?: boolean;
+        /**
+          * The height of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaCols"?: string;
+        /**
+          * The height of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaHeight"?: string;
+        /**
+          * The number of rows of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaRows"?: string;
+        /**
+          * The height of the textarea field. Helpful if you want to set an initial height for the textarea.
+         */
+        "textareaWidth"?: string;
+        /**
+          * The valid text for the textarea field.
+         */
+        "validText"?: string;
+        /**
+          * The value of the textarea field.
+         */
+        "value"?: string;
+        /**
+          * The warning text for the textarea field.
+         */
+        "warningText"?: string;
+    }
     interface IxTile {
         /**
           * Size of the tile - one of 'small', 'medium' or 'large'
@@ -6355,6 +7969,9 @@ declare namespace LocalJSX {
         "containerId"?: string;
         "position"?: 'bottom-right' | 'top-right';
     }
+    /**
+     * @form-ready 2.4.0
+     */
     interface IxToggle {
         /**
           * Whether the slide-toggle element is checked or not.
@@ -6372,10 +7989,18 @@ declare namespace LocalJSX {
           * If true the control is in indeterminate state
          */
         "indeterminate"?: boolean;
+        /**
+          * Name of the checkbox component
+         */
+        "name"?: string;
         /**
           * An event will be dispatched each time the slide-toggle changes its value.
          */
         "onCheckedChange"?: (event: IxToggleCustomEvent<boolean>) => void;
+        /**
+          * Required state of the checkbox component.  If true, checkbox needs to be checked to be valid
+         */
+        "required"?: boolean;
         /**
           * Text for indeterminate state
          */
@@ -6388,6 +8013,10 @@ declare namespace LocalJSX {
           * Text for on state
          */
         "textOn"?: string;
+        /**
+          * Value of the checkbox component
+         */
+        "value"?: string;
     }
     /**
      * @since 2.0.0
@@ -6661,13 +8290,17 @@ declare namespace LocalJSX {
         "ix-card-list": IxCardList;
         "ix-card-title": IxCardTitle;
         "ix-category-filter": IxCategoryFilter;
+        "ix-checkbox": IxCheckbox;
+        "ix-checkbox-group": IxCheckboxGroup;
         "ix-chip": IxChip;
         "ix-col": IxCol;
         "ix-content": IxContent;
         "ix-content-header": IxContentHeader;
         "ix-css-grid": IxCssGrid;
         "ix-css-grid-item": IxCssGridItem;
+        "ix-custom-field": IxCustomField;
         "ix-date-dropdown": IxDateDropdown;
+        "ix-date-field": IxDateField;
         "ix-date-picker": IxDatePicker;
         "ix-date-time-card": IxDateTimeCard;
         "ix-datetime-picker": IxDatetimePicker;
@@ -6682,19 +8315,22 @@ declare namespace LocalJSX {
         "ix-event-list": IxEventList;
         "ix-event-list-item": IxEventListItem;
         "ix-expanding-search": IxExpandingSearch;
+        "ix-field-label": IxFieldLabel;
+        "ix-field-wrapper": IxFieldWrapper;
         "ix-filter-chip": IxFilterChip;
         "ix-flip-tile": IxFlipTile;
         "ix-flip-tile-content": IxFlipTileContent;
-        "ix-form-field": IxFormField;
         "ix-group": IxGroup;
         "ix-group-context-menu": IxGroupContextMenu;
         "ix-group-item": IxGroupItem;
+        "ix-helper-text": IxHelperText;
         "ix-icon-button": IxIconButton;
         "ix-icon-toggle-button": IxIconToggleButton;
         "ix-input-group": IxInputGroup;
         "ix-key-value": IxKeyValue;
         "ix-key-value-list": IxKeyValueList;
         "ix-kpi": IxKpi;
+        "ix-layout-form": IxLayoutForm;
         "ix-layout-grid": IxLayoutGrid;
         "ix-link-button": IxLinkButton;
         "ix-map-navigation": IxMapNavigation;
@@ -6717,12 +8353,15 @@ declare namespace LocalJSX {
         "ix-modal-footer": IxModalFooter;
         "ix-modal-header": IxModalHeader;
         "ix-modal-loading": IxModalLoading;
+        "ix-number-field": IxNumberField;
         "ix-pagination": IxPagination;
         "ix-pane": IxPane;
         "ix-pane-layout": IxPaneLayout;
         "ix-pill": IxPill;
         "ix-playground-internal": IxPlaygroundInternal;
         "ix-push-card": IxPushCard;
+        "ix-radio": IxRadio;
+        "ix-radio-group": IxRadioGroup;
         "ix-row": IxRow;
         "ix-select": IxSelect;
         "ix-select-item": IxSelectItem;
@@ -6732,6 +8371,8 @@ declare namespace LocalJSX {
         "ix-split-button-item": IxSplitButtonItem;
         "ix-tab-item": IxTabItem;
         "ix-tabs": IxTabs;
+        "ix-text-field": IxTextField;
+        "ix-textarea-field": IxTextareaField;
         "ix-tile": IxTile;
         "ix-time-picker": IxTimePicker;
         "ix-toast": IxToast;
@@ -6793,6 +8434,16 @@ declare module "@stencil/core" {
              */
             "ix-card-title": LocalJSX.IxCardTitle & JSXBase.HTMLAttributes<HTMLIxCardTitleElement>;
             "ix-category-filter": LocalJSX.IxCategoryFilter & JSXBase.HTMLAttributes<HTMLIxCategoryFilterElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-checkbox": LocalJSX.IxCheckbox & JSXBase.HTMLAttributes<HTMLIxCheckboxElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-checkbox-group": LocalJSX.IxCheckboxGroup & JSXBase.HTMLAttributes<HTMLIxCheckboxGroupElement>;
             "ix-chip": LocalJSX.IxChip & JSXBase.HTMLAttributes<HTMLIxChipElement>;
             /**
              * @since 2.0.0
@@ -6805,10 +8456,19 @@ declare module "@stencil/core" {
             "ix-content-header": LocalJSX.IxContentHeader & JSXBase.HTMLAttributes<HTMLIxContentHeaderElement>;
             "ix-css-grid": LocalJSX.IxCssGrid & JSXBase.HTMLAttributes<HTMLIxCssGridElement>;
             "ix-css-grid-item": LocalJSX.IxCssGridItem & JSXBase.HTMLAttributes<HTMLIxCssGridItemElement>;
+            /**
+             * @since 2.4.0
+             */
+            "ix-custom-field": LocalJSX.IxCustomField & JSXBase.HTMLAttributes<HTMLIxCustomFieldElement>;
             /**
              * @since 2.1.0
              */
             "ix-date-dropdown": LocalJSX.IxDateDropdown & JSXBase.HTMLAttributes<HTMLIxDateDropdownElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-date-field": LocalJSX.IxDateField & JSXBase.HTMLAttributes<HTMLIxDateFieldElement>;
             "ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes<HTMLIxDatePickerElement>;
             "ix-date-time-card": LocalJSX.IxDateTimeCard & JSXBase.HTMLAttributes<HTMLIxDateTimeCardElement>;
             "ix-datetime-picker": LocalJSX.IxDatetimePicker & JSXBase.HTMLAttributes<HTMLIxDatetimePickerElement>;
@@ -6838,13 +8498,15 @@ declare module "@stencil/core" {
             "ix-event-list": LocalJSX.IxEventList & JSXBase.HTMLAttributes<HTMLIxEventListElement>;
             "ix-event-list-item": LocalJSX.IxEventListItem & JSXBase.HTMLAttributes<HTMLIxEventListItemElement>;
             "ix-expanding-search": LocalJSX.IxExpandingSearch & JSXBase.HTMLAttributes<HTMLIxExpandingSearchElement>;
+            "ix-field-label": LocalJSX.IxFieldLabel & JSXBase.HTMLAttributes<HTMLIxFieldLabelElement>;
+            "ix-field-wrapper": LocalJSX.IxFieldWrapper & JSXBase.HTMLAttributes<HTMLIxFieldWrapperElement>;
             "ix-filter-chip": LocalJSX.IxFilterChip & JSXBase.HTMLAttributes<HTMLIxFilterChipElement>;
             "ix-flip-tile": LocalJSX.IxFlipTile & JSXBase.HTMLAttributes<HTMLIxFlipTileElement>;
             "ix-flip-tile-content": LocalJSX.IxFlipTileContent & JSXBase.HTMLAttributes<HTMLIxFlipTileContentElement>;
-            "ix-form-field": LocalJSX.IxFormField & JSXBase.HTMLAttributes<HTMLIxFormFieldElement>;
             "ix-group": LocalJSX.IxGroup & JSXBase.HTMLAttributes<HTMLIxGroupElement>;
             "ix-group-context-menu": LocalJSX.IxGroupContextMenu & JSXBase.HTMLAttributes<HTMLIxGroupContextMenuElement>;
             "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes<HTMLIxGroupItemElement>;
+            "ix-helper-text": LocalJSX.IxHelperText & JSXBase.HTMLAttributes<HTMLIxHelperTextElement>;
             "ix-icon-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes<HTMLIxIconButtonElement>;
             /**
              * @since 2.0.0
@@ -6860,6 +8522,7 @@ declare module "@stencil/core" {
              */
             "ix-key-value-list": LocalJSX.IxKeyValueList & JSXBase.HTMLAttributes<HTMLIxKeyValueListElement>;
             "ix-kpi": LocalJSX.IxKpi & JSXBase.HTMLAttributes<HTMLIxKpiElement>;
+            "ix-layout-form": LocalJSX.IxLayoutForm & JSXBase.HTMLAttributes<HTMLIxLayoutFormElement>;
             /**
              * @since 2.0.0
              */
@@ -6900,6 +8563,11 @@ declare module "@stencil/core" {
              */
             "ix-modal-header": LocalJSX.IxModalHeader & JSXBase.HTMLAttributes<HTMLIxModalHeaderElement>;
             "ix-modal-loading": LocalJSX.IxModalLoading & JSXBase.HTMLAttributes<HTMLIxModalLoadingElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-number-field": LocalJSX.IxNumberField & JSXBase.HTMLAttributes<HTMLIxNumberFieldElement>;
             /**
              * @since 1.5.0
              */
@@ -6918,10 +8586,23 @@ declare module "@stencil/core" {
              * @since 1.6.0
              */
             "ix-push-card": LocalJSX.IxPushCard & JSXBase.HTMLAttributes<HTMLIxPushCardElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-radio": LocalJSX.IxRadio & JSXBase.HTMLAttributes<HTMLIxRadioElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-radio-group": LocalJSX.IxRadioGroup & JSXBase.HTMLAttributes<HTMLIxRadioGroupElement>;
             /**
              * @since 2.0.0
              */
             "ix-row": LocalJSX.IxRow & JSXBase.HTMLAttributes<HTMLIxRowElement>;
+            /**
+             * @form-ready 2.4.0
+             */
             "ix-select": LocalJSX.IxSelect & JSXBase.HTMLAttributes<HTMLIxSelectElement>;
             "ix-select-item": LocalJSX.IxSelectItem & JSXBase.HTMLAttributes<HTMLIxSelectItemElement>;
             /**
@@ -6936,10 +8617,23 @@ declare module "@stencil/core" {
             "ix-split-button-item": LocalJSX.IxSplitButtonItem & JSXBase.HTMLAttributes<HTMLIxSplitButtonItemElement>;
             "ix-tab-item": LocalJSX.IxTabItem & JSXBase.HTMLAttributes<HTMLIxTabItemElement>;
             "ix-tabs": LocalJSX.IxTabs & JSXBase.HTMLAttributes<HTMLIxTabsElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-text-field": LocalJSX.IxTextField & JSXBase.HTMLAttributes<HTMLIxTextFieldElement>;
+            /**
+             * @since 2.4.0
+             * @form-ready 2.4.0
+             */
+            "ix-textarea-field": LocalJSX.IxTextareaField & JSXBase.HTMLAttributes<HTMLIxTextareaFieldElement>;
             "ix-tile": LocalJSX.IxTile & JSXBase.HTMLAttributes<HTMLIxTileElement>;
             "ix-time-picker": LocalJSX.IxTimePicker & JSXBase.HTMLAttributes<HTMLIxTimePickerElement>;
             "ix-toast": LocalJSX.IxToast & JSXBase.HTMLAttributes<HTMLIxToastElement>;
             "ix-toast-container": LocalJSX.IxToastContainer & JSXBase.HTMLAttributes<HTMLIxToastContainerElement>;
+            /**
+             * @form-ready 2.4.0
+             */
             "ix-toggle": LocalJSX.IxToggle & JSXBase.HTMLAttributes<HTMLIxToggleElement>;
             /**
              * @since 2.0.0