elastic · kibanamachine · Jul 18, 2025 · Jul 18, 2025
@@ -420,6 +420,7 @@ export const AlertDeleteModal = ({
             isInvalid={!validations.isDeleteConfirmationValid}
           >
             <EuiFieldText
+              isInvalid={!validations.isDeleteConfirmationValid}
               value={deleteConfirmation}
               disabled={isDisabled || !currentSettingsWouldDeleteAlerts}
               onChange={onChangeDeleteConfirmation}

@@ -101,6 +101,7 @@ export const RuleConsumerSelection = (props: RuleConsumerSelectionProps) => {
       aria-label={CONSUMER_SELECT_TITLE}
     >
       <EuiComboBox
+        isInvalid={!!baseErrors?.consumer?.length}
         fullWidth
         data-test-subj="ruleConsumerSelectionInput"
         aria-label={CONSUMER_SELECT_COMBO_BOX_TITLE}

@@ -127,6 +127,7 @@ export const RuleDetails = () => {
             error={baseErrors?.tags}
           >
             <EuiComboBox
+              isInvalid={!!baseErrors?.tags?.length}
               fullWidth
               noSuggestions
               placeholder={RULE_TAG_PLACEHOLDER}

@@ -276,6 +276,7 @@ export function ImageEditorFlyout(props: ImageEditorFlyoutProps) {
               error={srcUrlError}
             >
               <EuiTextArea
+                isInvalid={!!srcUrlError}
                 data-test-subj={'imageEmbeddableEditorUrlInput'}
                 fullWidth
                 compressed={true}

@@ -13,7 +13,6 @@ import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 interface NumberInputOptionProps<ParamName extends string> {
   disabled?: boolean;
   error?: ReactNode;
-  isInvalid?: boolean;
   label?: React.ReactNode;
   max?: number;
   min?: number;
@@ -34,7 +33,6 @@ interface NumberInputOptionProps<ParamName extends string> {
 function RequiredNumberInputOption<ParamName extends string>({
   disabled,
   error,
-  isInvalid,
   label,
   max,
   min,
@@ -60,7 +58,7 @@ function RequiredNumberInputOption<ParamName extends string>({
   );
 
   return (
-    <EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth display="rowCompressed">
+    <EuiFormRow label={label} error={error} isInvalid={!isValid} fullWidth display="rowCompressed">
       <EuiFieldNumber
         compressed
         fullWidth

@@ -223,6 +223,7 @@ export class UrlFormatEditor extends DefaultFormatEditor<
           error={error}
         >
           <EuiFieldText
+            isInvalid={!!error}
             data-test-subj="urlEditorUrlTemplate"
             value={formatParams.urlTemplate || ''}
             onChange={(e) => {
@@ -253,6 +254,7 @@ export class UrlFormatEditor extends DefaultFormatEditor<
           error={error}
         >
           <EuiFieldText
+            isInvalid={!!error}
             data-test-subj="urlEditorLabelTemplate"
             value={formatParams.labelTemplate || ''}
             onChange={(e) => {

@@ -82,6 +82,7 @@ export const ComboBoxField = ({ field, euiFieldProps = {}, idAria, ...rest }: Pr
       {...rest}
     >
       <EuiComboBox
+        isInvalid={isInvalid}
         noSuggestions
         placeholder={i18n.translate('esUi.forms.comboBoxField.placeHolderText', {
           defaultMessage: 'Type and then hit "ENTER"',

@@ -93,7 +93,9 @@ export const DestinationIndexForm: FC<DestinationIndexFormProps> = ({
               defaultMessage: 'Choose a unique destination index name.',
             }
           )}
-          isInvalid={!destinationIndexNameEmpty && !destinationIndexNameValid}
+          isInvalid={
+            destinationIndexNameEmpty || (!destinationIndexNameEmpty && !destinationIndexNameValid)
+          }
           data-test-subj="mlCreationWizardUtilsDestinationIndexInput"
         />
       </EuiFormRow>

@@ -255,6 +255,7 @@ export const AdditionalOptionsFields: React.FC<AdditionalOptionsFieldsProps> = (
                 }
               >
                 <EuiFieldText
+                  isInvalid={isInvalid}
                   data-test-subj="inference-endpoint-input-field"
                   fullWidth
                   disabled={isEdit}

@@ -170,6 +170,7 @@ export const SemanticTextForm: FC<Props> = ({ addCombinedField, hasNameCollision
           error={[fieldError]}
         >
           <EuiFieldText
+            isInvalid={fieldError !== undefined}
             placeholder={i18n.translate(
               'xpack.dataVisualizer.file.semanticTextForm.copyFieldLabel.placeholder',
               {

@@ -80,6 +80,7 @@ export const IndexInput: FC<Props> = ({
       )}
     >
       <EuiFieldText
+        isInvalid={indexNameError !== ''}
         fullWidth
         value={indexNameLocal}
         onChange={(e) => setIndexNameLocal(e.target.value)}

@@ -151,6 +151,7 @@ export class GeoFilePicker extends Component<Props, State> {
           helpText={this._renderHelpText()}
         >
           <EuiFilePicker
+            isInvalid={!!this.state.error}
             initialPromptText={i18n.translate('xpack.fileUpload.geoFilePicker.filePicker', {
               defaultMessage: 'Select or drag and drop a file',
             })}

@@ -180,6 +180,7 @@ export const AddPolicyToTemplateConfirmModal: React.FunctionComponent<Props> = (
               }
             >
               <EuiComboBox
+                isInvalid={!!templateError}
                 isLoading={isLoading}
                 placeholder={i18n.translate(
                   'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.chooseTemplateMessage',

@@ -206,6 +206,7 @@ export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
           }
         >
           <EuiSelect
+            isInvalid={!!policyErrorMessage}
             options={options}
             value={selectedPolicyName}
             onChange={(e) => {

@@ -21,6 +21,7 @@ export const AlertParamNumber: React.FC<Props> = (props: Props) => {
   return (
     <EuiFormRow label={details.label as string} error={errors} isInvalid={errors?.length > 0}>
       <EuiFieldNumber
+        isInvalid={errors?.length > 0}
         compressed
         value={value}
         append={details.append as string}

@@ -22,6 +22,7 @@ export const AlertParamPercentage: React.FC<Props> = (props: Props) => {
   return (
     <EuiFormRow label={label} error={errors} isInvalid={errors.length > 0}>
       <EuiFieldNumber
+        isInvalid={errors.length > 0}
         compressed
         value={value}
         append={

@@ -22,6 +22,7 @@ export const AlertParamTextField: React.FC<Props> = (props: Props) => {
   return (
     <EuiFormRow label={label} error={errors} isInvalid={errors?.length > 0}>
       <EuiFieldText
+        isInvalid={errors?.length > 0}
         compressed
         placeholder={placeholder}
         value={value}

@@ -111,6 +111,7 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
         fullWidth
       >
         <EuiFieldText
+          isInvalid={touched.name && Boolean(errors.name)}
           defaultValue={policy.name}
           fullWidth
           onBlur={() => setTouched({ ...touched, name: true })}
@@ -412,6 +413,7 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
             fullWidth
           >
             <EuiFieldText
+              isInvalid={touched.schedule && Boolean(errors.schedule)}
               defaultValue={policy.schedule}
               fullWidth
               onChange={(e) => {

@@ -170,6 +170,7 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
             fullWidth
           >
             <EuiFieldNumber
+              isInvalid={touched.minCount && Boolean(errors.minCount)}
               fullWidth
               value={retention.minCount || ''}
               onBlur={() => setTouched({ ...touched, minCount: true })}
@@ -197,6 +198,7 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
             fullWidth
           >
             <EuiFieldNumber
+              isInvalid={touched.maxCount && Boolean(errors.maxCount)}
               fullWidth
               value={retention.maxCount || ''}
               onBlur={() => setTouched({ ...touched, maxCount: true })}

@@ -115,6 +115,7 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
         fullWidth
       >
         <EuiFieldText
+          isInvalid={Boolean(hasValidationErrors && validation.errors.name)}
           defaultValue={repository.name}
           fullWidth
           onChange={(e) => {

@@ -335,6 +335,7 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
           error={settingErrors.locationMode}
         >
           <EuiSelect
+            isInvalid={Boolean(hasErrors && settingErrors.locationMode)}
             options={locationModeOptions}
             value={locationMode || locationModeOptions[0].value}
             onChange={(e) => {

@@ -67,6 +67,7 @@ export const ChunkSizeField: React.FunctionComponent<Props> = ({
         }
       >
         <EuiFieldText
+          isInvalid={isInvalid}
           defaultValue={defaultValue}
           fullWidth
           onChange={(e) => updateSettings('chunkSize', e.target.value)}

@@ -67,6 +67,7 @@ export const MaxRestoreField: React.FunctionComponent<Props> = ({
         }
       >
         <EuiFieldText
+          isInvalid={isInvalid}
           defaultValue={defaultValue}
           fullWidth
           onChange={(e) => updateSettings('maxRestoreBytesPerSec', e.target.value)}

@@ -68,6 +68,7 @@ export const MaxSnapshotsField: React.FunctionComponent<Props> = ({
         }
       >
         <EuiFieldText
+          isInvalid={isInvalid}
           defaultValue={defaultValue}
           fullWidth
           onChange={(e) => updateSettings('maxSnapshotBytesPerSec', e.target.value)}

@@ -89,6 +89,7 @@ export const FSSettings: React.FunctionComponent<Props> = ({
           error={settingErrors.location}
         >
           <EuiFieldText
+            isInvalid={Boolean(hasErrors && settingErrors.location)}
             defaultValue={location || ''}
             fullWidth
             onChange={(e) => {

@@ -97,6 +97,7 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
           error={settingErrors.uri}
         >
           <EuiFieldText
+            isInvalid={Boolean(hasErrors && settingErrors.uri)}
             prepend={
               <EuiText size="s" id="hdfsRepositoryUriProtocolDescription">
                 {/* Wrap as string due to prettier not parsing `//` inside JSX correctly (prettier/prettier#2347) */}
@@ -148,6 +149,7 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
           error={settingErrors.path}
         >
           <EuiFieldText
+            isInvalid={Boolean(hasErrors && settingErrors.path)}
             defaultValue={path || ''}
             fullWidth
             onChange={(e) => {
@@ -286,6 +288,7 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
           error={settingErrors.securityPrincipal}
         >
           <EuiFieldText
+            isInvalid={Boolean(hasErrors && settingErrors.securityPrincipal)}
             defaultValue={securityPrincipal || ''}
             fullWidth
             onChange={(e) => {

@@ -150,6 +150,7 @@ export const ReadonlySettings: React.FunctionComponent<Props> = ({
                 error={settingErrors.url}
               >
                 <EuiFieldText
+                  isInvalid={Boolean(hasErrors && settingErrors.url)}
                   defaultValue={url ? url.split('://')[1] : ''}
                   fullWidth
                   onChange={(e) => {

@@ -393,6 +393,7 @@ export const S3Settings: React.FunctionComponent<Props> = ({
           }
         >
           <EuiFieldText
+            isInvalid={Boolean(hasErrors && settingErrors.bufferSize)}
             defaultValue={bufferSize || ''}
             fullWidth
             onChange={(e) => {
@@ -437,6 +438,7 @@ export const S3Settings: React.FunctionComponent<Props> = ({
           error={settingErrors.cannedAcl}
         >
           <EuiSelect
+            isInvalid={Boolean(hasErrors && settingErrors.cannedAcl)}
             options={cannedAclOptions}
             value={cannedAcl || cannedAclOptions[0].value}
             onChange={(e) => {
@@ -482,6 +484,7 @@ export const S3Settings: React.FunctionComponent<Props> = ({
           error={settingErrors.storageClass}
         >
           <EuiSelect
+            isInvalid={Boolean(hasErrors && settingErrors.storageClass)}
             options={storageClassOptions}
             value={storageClass || storageClassOptions[0].value}
             onChange={(e) => {

@@ -502,6 +502,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
                       error={errors.renamePattern}
                     >
                       <EuiFieldText
+                        isInvalid={Boolean(errors.renamePattern)}
                         value={renamePattern}
                         placeholder="data_(.+)"
                         onChange={(e) => {
@@ -529,6 +530,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
                       error={errors.renameReplacement}
                     >
                       <EuiFieldText
+                        isInvalid={Boolean(errors.renameReplacement)}
                         value={renameReplacement}
                         placeholder="restored_data_$1"
                         onChange={(e) => {

@@ -281,6 +281,7 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
                   error={errors.ignoreIndexSettings}
                 >
                   <EuiComboBox
+                    isInvalid={Boolean(errors.ignoreIndexSettings)}
                     placeholder={i18n.translate(
                       'xpack.snapshotRestore.restoreForm.stepSettings.ignoreIndexSettingsPlaceholder',
                       {

@@ -201,6 +201,7 @@ export const RetentionSettingsUpdateModalProvider: React.FunctionComponent<Props
                 fullWidth
               >
                 <EuiFieldText
+                  isInvalid={isInvalid}
                   defaultValue={retentionSchedule}
                   fullWidth
                   onChange={(e) => setRetentionSchedule(e.target.value)}

@@ -302,6 +302,7 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
           })}
         >
           <EuiComboBox
+            isInvalid={!timeZoneValid}
             options={TIMEZONE_OPTIONS}
             onChange={(opt) => setSelectedTimeZone(opt)}
             selectedOptions={selectedTimeZone}

@@ -31,6 +31,7 @@ export const TermsAggForm: IPivotAggsConfigTerms['AggFormComponent'] = ({
         isInvalid={!isValid}
       >
         <EuiFieldNumber
+          isInvalid={!isValid}
           value={aggConfig.size}
           onChange={(e) => {
             onChange({ size: Number(e.target.value) });

@@ -826,7 +826,7 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
                     defaultMessage: 'Choose a maximum page search size.',
                   }
                 )}
-                isInvalid={!isTransformFrequencyValid}
+                isInvalid={!isTransformSettingsMaxPageSearchSizeValid}
                 data-test-subj="transformMaxPageSearchSizeInput"
               />
             </EuiFormRow>

@@ -140,6 +140,7 @@ export const EditTransformRetentionPolicy: FC = () => {
                 )}
               >
                 <EuiSelect
+                  isInvalid={retentionPolicyField.errorMessages.length > 0}
                   aria-label={i18n.translate(
                     'xpack.transform.transformList.editFlyoutFormRetentionPolicyFieldSelectAriaLabel',
                     {

@@ -198,7 +198,7 @@ export const DataStreamStep = React.memo<DataStreamStepProps>(
                     data-test-subj="nameInput"
                     value={name}
                     onChange={onChange.name}
-                    isInvalid={invalidFields.name}
+                    isInvalid={!!nameInputError || invalidFields.name}
                     isLoading={isLoadingPackageNames}
                     disabled={isLoadingPackageNames}
                   />

@@ -182,6 +182,7 @@ const AssigneesFieldComponent: React.FC<FieldProps> = React.memo(
         data-test-subj="caseAssignees"
       >
         <EuiComboBox
+          isInvalid={isInvalid}
           fullWidth
           async
           isLoading={isLoading}

@@ -96,6 +96,7 @@ const ResilientFieldsComponent: React.FunctionComponent<ConnectorFieldsProps> =
               error={errorMessage}
             >
               <EuiComboBox
+                isInvalid={isInvalid}
                 data-test-subj="incidentTypeComboBox"
                 fullWidth
                 isClearable={true}

@@ -277,6 +277,7 @@ export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) =>
             isInvalid={!!error}
           >
             <EuiComboBox
+              isInvalid={!!error}
               placeholder={i18n.translate(
                 'xpack.searchConnectorsattachIndexBox.euiFormRow.indexSelector.placeholder',
                 { defaultMessage: 'Select or create an index' }