Open each core value as a card of meaning and signals steps, so groups write their own words from an empty field with Generate draft, skip values without blocking the flow, and Customize without keeping helper text as the description.

app/(app)/create/components/ModalTextAreaField.tsx

@@ -16,6 +16,8 @@ export interface ModalTextAreaFieldProps {
   label: string;
   /** Show the help "?" icon next to the label. Off until tooltip behavior ships. */
   helpIcon?: boolean;
+  /** Hide the label when the modal title already asks the question. */
+  hideLabel?: boolean;
   /** Current text value. */
   value: string;
   /** Fired on every change with the new value (no event). */
@@ -35,6 +37,12 @@ export interface ModalTextAreaFieldProps {
   generateDraftLabel?: string;
   /** Hint beside Generate draft. */
   generateDraftHint?: string;
+  /**
+   * Shown under a filled field instead of Generate draft (picked value
+   * field view).
+   */
+  filledHint?: string;
+  autoFocus?: boolean;
   className?: string;
 }
 
@@ -63,6 +71,7 @@ function PlusGlyph() {
 function ModalTextAreaFieldComponent({
   label,
   helpIcon = false,
+  hideLabel = false,
   value,
   onChange,
   rows = 4,
@@ -71,26 +80,34 @@ function ModalTextAreaFieldComponent({
   generateDraftText,
   generateDraftLabel,
   generateDraftHint,
+  filledHint,
+  autoFocus = false,
   className = "",
 }: ModalTextAreaFieldProps) {
   const labelId = useId();
   const draftSource = generateDraftText?.trim() ?? "";
+  const filled = value.trim().length > 0;
+  const showFilledHint = filled && Boolean(filledHint) && !disabled;
   const showGenerateDraft =
-    draftSource.length > 0 && Boolean(generateDraftLabel);
-  const compose = showGenerateDraft;
+    !showFilledHint &&
+    draftSource.length > 0 &&
+    Boolean(generateDraftLabel);
+  const compose = showGenerateDraft || showFilledHint || hideLabel;
 
   return (
     <div
       className={`flex flex-col ${compose ? "gap-[12px]" : "gap-2"} ${className}`.trim()}
     >
-      <div id={labelId}>
-        <InputLabel
-          label={label}
-          helpIcon={helpIcon}
-          size="s"
-          palette="default"
-        />
-      </div>
+      {hideLabel ? null : (
+        <div id={labelId}>
+          <InputLabel
+            label={label}
+            helpIcon={helpIcon}
+            size="s"
+            palette="default"
+          />
+        </div>
+      )}
       <TextArea
         formHeader={false}
         value={value}
@@ -100,7 +117,9 @@ function ModalTextAreaFieldComponent({
         appearance={compose ? "compose" : "embedded"}
         placeholder={placeholder}
         disabled={disabled}
-        aria-labelledby={labelId}
+        autoFocus={autoFocus}
+        aria-label={hideLabel ? label : undefined}
+        aria-labelledby={hideLabel ? undefined : labelId}
       />
       {showGenerateDraft && !disabled ? (
         <div className="flex items-center">
@@ -119,6 +138,11 @@ function ModalTextAreaFieldComponent({
           ) : null}
         </div>
       ) : null}
+      {showFilledHint ? (
+        <p className="text-[length:var(--sizing-300)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
+          {filledHint}
+        </p>
+      ) : null}
     </div>
   );
 }