From c5783872613fd08e3e10adda8e2d52519b41e5ea Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 5 Aug 2026 11:51:20 -0700
Subject: [PATCH] fix label and description regression

---
 .../Components/inputs/forms/FormMultiSelectField.tsx | 12 ++++++++++++
 client/src/Pages/CreateMonitor/index.tsx             |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/client/src/Components/inputs/forms/FormMultiSelectField.tsx b/client/src/Components/inputs/forms/FormMultiSelectField.tsx
index 02aec4c95..e23981d87 100644
--- a/client/src/Components/inputs/forms/FormMultiSelectField.tsx
+++ b/client/src/Components/inputs/forms/FormMultiSelectField.tsx
@@ -23,6 +23,7 @@ interface FormMultiSelectFieldProps<T extends FieldValues, O extends MultiSelect
 	name: FieldPath<T>;
 	options: O[];
 	fieldLabel?: string;
+	description?: string;
 	renderRow?: (option: O) => React.ReactNode;
 	renderOptionContent?: (option: O) => React.ReactNode;
 }
@@ -31,6 +32,7 @@ export const FormMultiSelectField = <T extends FieldValues, O extends MultiSelec
 	name,
 	options,
 	fieldLabel,
+	description,
 	renderRow,
 	renderOptionContent,
 }: FormMultiSelectFieldProps<T, O>) => {
@@ -47,6 +49,7 @@ export const FormMultiSelectField = <T extends FieldValues, O extends MultiSelec
 					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Autocomplete
 							multiple
+							autoHighlight
 							options={options}
 							value={selected}
 							getOptionLabel={(option) => option.name}
@@ -59,6 +62,15 @@ export const FormMultiSelectField = <T extends FieldValues, O extends MultiSelec
 							error={!!fieldState.error}
 							helperText={fieldState.error?.message ?? ""}
 						/>
+						{description && (
+							<Typography
+								component="span"
+								color={theme.palette.text.secondary}
+								sx={{ opacity: 0.8 }}
+							>
+								{description}
+							</Typography>
+						)}
 						{selected.map((option, index) => (
 							<Stack
 								direction="row"
diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx
index 6989cd7a6..e0180095c 100644
--- a/client/src/Pages/CreateMonitor/index.tsx
+++ b/client/src/Pages/CreateMonitor/index.tsx
@@ -929,6 +929,12 @@ const CreateMonitorPage = () => {
 								<FormMultiSelectField
 									name="customUpCodes"
 									options={ALL_HTTP_STATUS_CODES}
+									fieldLabel={t(
+										"pages.createMonitor.form.advanced.option.customUpCodes.label"
+									)}
+									description={t(
+										"pages.createMonitor.form.advanced.option.customUpCodes.description"
+									)}
 								/>
 
 								{watchedMethod !== "HEAD" && (