Give builder fields persistent labels, treat description as optional, and validate save-progress email with a real form.

Name stays required; description is a labelled optional textarea. Email uses native validity and form submit. Drop the dead workshop link and fix a few copy errors.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/screens/createFlowScreenComponents.tsx

@@ -115,6 +115,7 @@ export function renderCreateFlowScreen(screenId: CreateFlowStep): ReactNode {
           messageNamespace="create.community.communityName"
           stateField="title"
           maxLength={48}
+          required
         />
       );
     case "community-structure":
@@ -126,6 +127,7 @@ export function renderCreateFlowScreen(screenId: CreateFlowStep): ReactNode {
           stateField="communityContext"
           maxLength={200}
           mainAlign="center"
+          multiline
         />
       );
     case "community-size":

app/(app)/create/screens/informational/InformationalScreen.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { ReactNode } from "react";
 import NumberedList from "../../../../components/type/NumberedList";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
@@ -31,22 +30,6 @@ export function InformationalScreen() {
     },
   ];
 
-  const description: ReactNode = (
-    <>
-      {copy.descriptionLead}{" "}
-      <a
-        href="#"
-        className="font-normal text-[var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] cursor-pointer"
-        onClick={(e) => {
-          e.preventDefault();
-        }}
-      >
-        {copy.workshopLabel}
-      </a>{" "}
-      {copy.descriptionTrail}
-    </>
-  );
-
   return (
     <CreateFlowStepShell
       variant="centeredNarrow"
@@ -57,7 +40,7 @@ export function InformationalScreen() {
       >
         <CreateFlowHeaderLockup
           title={copy.title}
-          description={description}
+          description={copy.description}
           justification="left"
         />
         <NumberedList items={items} size={mdUp ? "M" : "S"} />

app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, type HTMLInputTypeAttribute } from "react";
 import TextInput from "../../../../components/controls/TextInput";
+import TextArea from "../../../../components/controls/TextArea";
 import type { HeaderLockupJustificationValue } from "../../../../components/type/HeaderLockup/HeaderLockup.types";
 import { useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
@@ -12,6 +13,7 @@ import {
   type CreateFlowContentTopBelowMd,
 } from "../../components/CreateFlowStepShell";
 import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import { CREATE_FLOW_COMMUNITY_SAVE_FORM_ID } from "../../utils/createFlowPaths";
 import type { CreateFlowTextStateField } from "../../types";
 
 type Props = {
@@ -21,6 +23,10 @@ type Props = {
   /** Figma Flow — Text (`20094:41243`): main column `items-center` + horizontal padding token. */
   mainAlign?: "start" | "center";
   inputType?: HTMLInputTypeAttribute;
+  /** Multi-line control (community description). */
+  multiline?: boolean;
+  /** Native `required` (community name and save-progress email). */
+  required?: boolean;
   showCharacterCount?: boolean;
   headerJustification?: HeaderLockupJustificationValue;
   /** Top spacing under top chrome (`CreateFlowStepShell` / `CreateFlowContentTopBelowMd`). */
@@ -28,7 +34,7 @@ type Props = {
 };
 
 /**
- * Shared narrow-column + TextInput pattern for Create Community text frames.
+ * Shared narrow-column + labelled field pattern for Create Community text frames.
  */
 export function CreateFlowTextFieldScreen({
   messageNamespace,
@@ -36,6 +42,8 @@ export function CreateFlowTextFieldScreen({
   maxLength,
   mainAlign = "start",
   inputType = "text",
+  multiline = false,
+  required = false,
   showCharacterCount = true,
   headerJustification = "left",
   contentTopBelowMd = "space-1400",
@@ -69,6 +77,15 @@ export function CreateFlowTextFieldScreen({
   const mainItems =
     mainAlign === "center" ? "items-center" : "items-start";
 
+  const isEmail = inputType === "email";
+  const persistValue = (next: string) => {
+    setValue(next);
+    markCreateFlowInteraction();
+    updateState({ [stateField]: next } as Record<string, string>);
+  };
+
+  const fieldLabel = t("inputLabel");
+
   return (
     <CreateFlowStepShell
       variant="centeredNarrow"
@@ -85,22 +102,60 @@ export function CreateFlowTextFieldScreen({
           />
         </div>
         <div className="w-full">
-          <TextInput
-            className="!transition-none"
-            type={inputType}
-            placeholder={t("placeholder")}
-            value={value}
-            onChange={(e) => {
-              const v = e.target.value;
-              setValue(v);
-              markCreateFlowInteraction();
-              updateState({ [stateField]: v } as Record<string, string>);
-            }}
-            inputSize={mdUp ? "medium" : "small"}
-            formHeader={false}
-            textHint={hint}
-            maxLength={maxLength}
-          />
+          {multiline ? (
+            <TextArea
+              className="!transition-none"
+              label={fieldLabel}
+              placeholder={t("placeholder")}
+              value={value}
+              onChange={(e) => persistValue(e.target.value)}
+              onBlur={() => {
+                const trimmed = value.trim();
+                if (trimmed !== value) persistValue(trimmed);
+              }}
+              size={mdUp ? "medium" : "small"}
+              formHeader={false}
+              showHelpIcon={false}
+              textHint={hint}
+              maxLength={maxLength}
+              required={required}
+              rows={4}
+            />
+          ) : (
+            <TextInput
+              className="!transition-none"
+              type={inputType}
+              name={isEmail ? "email" : undefined}
+              label={fieldLabel}
+              placeholder={t("placeholder")}
+              value={value}
+              onChange={(e) => persistValue(e.target.value)}
+              onBlur={() => {
+                const trimmed = isEmail
+                  ? value.trim().toLowerCase()
+                  : value.trim();
+                if (trimmed !== value) persistValue(trimmed);
+              }}
+              onKeyDown={
+                isEmail
+                  ? (e) => {
+                      if (e.key !== "Enter") return;
+                      e.preventDefault();
+                      e.currentTarget.form?.requestSubmit();
+                    }
+                  : undefined
+              }
+              inputSize={mdUp ? "medium" : "small"}
+              formHeader={false}
+              showHelpIcon={false}
+              textHint={hint}
+              maxLength={maxLength}
+              required={required || isEmail}
+              autoComplete={isEmail ? "email" : undefined}
+              inputMode={isEmail ? "email" : undefined}
+              form={isEmail ? CREATE_FLOW_COMMUNITY_SAVE_FORM_ID : undefined}
+            />
+          )}
         </div>
       </div>
     </CreateFlowStepShell>