[portal][ui] add error message to checkbox input

packages/ui/src/CheckboxInput/CheckboxInput.tsx

@@ -7,6 +7,7 @@ type Props = Readonly<{
   defaultValue?: boolean;
   description?: string;
   disabled?: boolean;
+  errorMessage?: string;
   label: string;
   name?: string;
   onChange?: (
@@ -21,6 +22,7 @@ function CheckboxInput(
     defaultValue,
     description,
     disabled = false,
+    errorMessage,
     label,
     name,
     value,
@@ -30,8 +32,10 @@ function CheckboxInput(
 ) {
   const id = useId();
   const descriptionId = useId();
+  const errorId = useId();
 
   return (
+    <div>
       <div
         className={clsx(
           'relative flex',
@@ -54,13 +58,13 @@ function CheckboxInput(
             id={id}
             name={name}
             type="checkbox"
-          onChange={
-            onChange != null
-              ? (event) => {
-                  onChange?.(event.target.checked, event);
-                }
-              : undefined
+            onChange={(event) => {
+              if (!onChange) {
+                return;
               }
+
+              onChange(event.target.checked, event);
+            }}
           />
         </div>
         <div className="ml-3 text-sm">
@@ -84,6 +88,12 @@ function CheckboxInput(
           )}
         </div>
       </div>
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
+    </div>
   );
 }