Walk Create Community through the Figma screens and restore a chosen logo after reload, so a guest can leave without saving until they reach the email step.

app/components/controls/MultiSelect/MultiSelect.container.tsx

@@ -21,6 +21,8 @@ const MultiSelectContainer = memo<MultiSelectProps>(
     addButton: addButtonProp = true,
     addButtonText,
     formHeader = true,
+    helperText,
+    errorMessage,
     onCustomChipConfirm,
     onCustomChipClose,
     maxSelections,
@@ -49,6 +51,8 @@ const MultiSelectContainer = memo<MultiSelectProps>(
         chipSelectAriaLabel={t("chipSelect")}
         chipDeselectAriaLabel={t("chipDeselect")}
         formHeader={formHeader}
+        helperText={helperText}
+        errorMessage={errorMessage}
         onCustomChipConfirm={onCustomChipConfirm}
         onCustomChipClose={onCustomChipClose}
         maxSelections={maxSelections}

app/components/controls/MultiSelect/MultiSelect.types.ts

@@ -54,6 +54,15 @@ export interface MultiSelectProps {
    * @default true
    */
   formHeader?: boolean;
+  /**
+   * Helper line beside the label (Figma “Pick one”). Wins over
+   * `selectionCountText` in the header.
+   */
+  helperText?: string;
+  /**
+   * Danger hint under the chips for a required question left unanswered.
+   */
+  errorMessage?: string;
   /**
    * Callback when a custom chip is confirmed (check button clicked)
    */
@@ -88,6 +97,8 @@ export interface MultiSelectViewProps {
   chipSelectAriaLabel: string;
   chipDeselectAriaLabel: string;
   formHeader: boolean;
+  helperText?: string;
+  errorMessage?: string;
   onCustomChipConfirm?: (chipId: string, value: string) => void;
   onCustomChipClose?: (chipId: string) => void;
   maxSelections?: number;

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -19,6 +19,8 @@ function MultiSelectView({
   chipSelectAriaLabel,
   chipDeselectAriaLabel,
   formHeader = true,
+  helperText: helperTextProp,
+  errorMessage,
   onCustomChipConfirm,
   onCustomChipClose,
   maxSelections,
@@ -39,7 +41,9 @@ function MultiSelectView({
   const atLimit =
     maxSelections != null && selectedCount >= maxSelections;
   const countCaption = selectionCountText?.trim() ?? "";
-  const helperText = countCaption.length > 0 ? countCaption : false;
+  const headerHelper =
+    helperTextProp?.trim() ||
+    (countCaption.length > 0 ? countCaption : false);
 
   return (
     <div
@@ -51,16 +55,16 @@ function MultiSelectView({
           label={label}
           helpIcon={showHelpIcon}
           asterisk={false}
-          helperText={helperText}
+          helperText={headerHelper}
           size={size}
           palette={palette}
         />
       )}
 
       {!formHeader || !label ? (
-        countCaption.length > 0 ? (
+        headerHelper && typeof headerHelper === "string" ? (
           <p className="w-full text-x-small-paragraph text-[color:var(--color-content-default-tertiary)]">
-            {countCaption}
+            {headerHelper}
           </p>
         ) : null
       ) : null}
@@ -177,6 +181,14 @@ function MultiSelectView({
           </button>
         )}
       </div>
+      {errorMessage ? (
+        <p
+          className="w-full text-x-small-paragraph text-[color:var(--color-content-default-negative-primary)]"
+          role="alert"
+        >
+          {errorMessage}
+        </p>
+      ) : null}
     </div>
   );
 }