diff --git a/changes/16345-disabled-checkbox-tooltip b/changes/16345-disabled-checkbox-tooltip new file mode 100644 index 0000000000..5e83ded1e1 --- /dev/null +++ b/changes/16345-disabled-checkbox-tooltip @@ -0,0 +1 @@ +- UI fix: users can see a tooltip on a disabled checkbox diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.tsx b/frontend/components/forms/fields/Checkbox/Checkbox.tsx index 8380b4279c..83ddcb43be 100644 --- a/frontend/components/forms/fields/Checkbox/Checkbox.tsx +++ b/frontend/components/forms/fields/Checkbox/Checkbox.tsx @@ -55,21 +55,26 @@ const Checkbox = (props: ICheckboxProps) => { className, baseClass ); + + const checkBoxTickClass = classnames(`${baseClass}__tick`, { + [`${baseClass}__tick--disabled`]: disabled, + [`${baseClass}__tick--indeterminate`]: indeterminate, + }); + + const checkBoxLabelClass = classnames(checkBoxClass, { + [`${baseClass}__label--disabled`]: disabled, + }); + const formFieldProps = { ...pick(props, ["helpText", "label", "error", "name"]), className: wrapperClassName, type: "checkbox", } as IFormFieldProps; - const checkBoxTickClass = classnames(`${checkBoxClass}__tick`, { - [`${checkBoxClass}__tick--disabled`]: disabled, - [`${checkBoxClass}__tick--indeterminate`]: indeterminate, - }); - return ( <> -