@purpurds/checkbox 7.5.1 → 7.6.0

package/src/checkbox.tsx

@@ -1,5 +1,6 @@
 import React, { type ForwardedRef, forwardRef } from "react";
 import { FieldErrorText } from "@purpurds/field-error-text";
+import { FieldHelperText } from "@purpurds/field-helper-text";
 import { Icon } from "@purpurds/icon";
 import { checkmarkBold } from "@purpurds/icon/assets/checkmark-bold";
 import { minusBold } from "@purpurds/icon/assets/minus-bold";
@@ -54,6 +55,10 @@ export type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "onCha
    * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
    * */
   name?: string;
+  /**
+   * The helper text displayed below the checkbox.
+   */
+  helperText?: string;
   /**
    * Event handler called when the checked state of the checkbox changes.
    * */
@@ -78,6 +83,7 @@ const CheckboxComponent = (
     error = false,
     errorText,
     label,
+    helperText,
     onChange,
     ...props
   }: CheckboxProps,
@@ -121,19 +127,30 @@ const CheckboxComponent = (
             </RadixCheckbox.Indicator>
           </span>
         </RadixCheckbox.Root>
-        {label && (
-          <Label
-            htmlFor={props.id}
-            data-testid={dataTestId && `${dataTestId}-label`}
-            disabled={props.disabled}
-            className={cx(`${rootClassName}__label`)}
-          >
-            <Paragraph variant="paragraph-100" disabled={props.disabled}>
-              {props.required && <span aria-hidden>{"* "}</span>}
-              {label}
-            </Paragraph>
-          </Label>
-        )}
+        <span className={cx(`${rootClassName}__label-container`)}>
+          {label && (
+            <Label
+              htmlFor={props.id}
+              data-testid={dataTestId && `${dataTestId}-label`}
+              disabled={props.disabled}
+            >
+              <Paragraph variant="paragraph-100" disabled={props.disabled}>
+                {props.required && <span aria-hidden>{"* "}</span>}
+                {label}
+              </Paragraph>
+            </Label>
+          )}
+          {helperText && (
+            <FieldHelperText
+              className={cx(`${rootClassName}__helper`)}
+              data-testid={dataTestId && `${dataTestId}-helper-text`}
+              disabled={props.disabled}
+              id={`${props.id}-helper-text`}
+            >
+              {helperText}
+            </FieldHelperText>
+          )}
+        </span>
       </div>
       {isError && (
         <FieldErrorText data-testid={dataTestId && `${dataTestId}-error-text`}>