From c12661ca9dd37e6c5116fcc4aa7678998bdcad10 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Mon, 20 Oct 2025 16:42:31 -0700
Subject: [PATCH] improvement: add helper text and slug validation to create
 sub org form

---
 .../components/NavBar/NewSubOrganizationForm.tsx      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/NewSubOrganizationForm.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/NewSubOrganizationForm.tsx
index 32c557735..6ffed5578 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/NewSubOrganizationForm.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/NewSubOrganizationForm.tsx
@@ -7,14 +7,14 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { useCreateSubOrganization } from "@app/hooks/api";
-import { GenericResourceNameSchema } from "@app/lib/schemas";
+import { GenericResourceNameSchema, slugSchema } from "@app/lib/schemas";
 
 type ContentProps = {
   onClose: () => void;
 };
 
 const AddOrgSchema = z.object({
-  name: GenericResourceNameSchema.nonempty("Suborganization name required")
+  name: slugSchema()
 });
 
 type FormData = z.infer<typeof AddOrgSchema>;
@@ -67,7 +67,12 @@ export const NewSubOrganizationForm = ({ onClose }: ContentProps) => {
     <form onSubmit={handleSubmit(onSubmit)}>
       <Controller
         render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl isError={Boolean(error)} errorText={error?.message} label="Name">
+          <FormControl
+            isError={Boolean(error)}
+            helperText="Must be slug-friendly"
+            errorText={error?.message}
+            label="Name"
+          >
             <Input autoFocus value={value} onChange={onChange} placeholder="My Organization" />
           </FormControl>
         )}