@@ -28,6 +28,7 @@ import {
2828useContext ,
2929useEffect ,
3030useId ,
31+ useRef ,
3132useState ,
3233} from "react" ;
3334import { getFormHelpers , nameValidator } from "utils/formUtils" ;
@@ -103,6 +104,7 @@ export const CreateWorkspacePageViewExperimental: FC<
103104) ;
104105const [ showPresetParameters , setShowPresetParameters ] = useState ( false ) ;
105106const id = useId ( ) ;
107+ const workspaceNameInputRef = useRef < HTMLInputElement > ( null ) ;
106108const rerollSuggestedName = useCallback ( ( ) => {
107109setSuggestedName ( ( ) => generateWorkspaceName ( ) ) ;
108110} , [ ] ) ;
@@ -140,10 +142,15 @@ export const CreateWorkspacePageViewExperimental: FC<
140142}
141143} , [ error ] ) ;
142144
143- const getFieldHelpers = getFormHelpers < TypesGen . CreateWorkspaceRequest > (
144- form ,
145- error ,
146- ) ;
145+ useEffect ( ( ) => {
146+ if ( form . submitCount > 0 && form . errors ) {
147+ workspaceNameInputRef . current ?. scrollIntoView ( {
148+ behavior :"smooth" ,
149+ block :"center" ,
150+ } ) ;
151+ workspaceNameInputRef . current ?. focus ( ) ;
152+ }
153+ } , [ form . submitCount , form . errors ] ) ;
147154
148155const [ presetOptions , setPresetOptions ] = useState ( [
149156{ label :"None" , value :"" } ,
@@ -333,16 +340,22 @@ export const CreateWorkspacePageViewExperimental: FC<
333340< Label className = "text-sm" htmlFor = { `${ id } } >
334341Workspace name
335342</ Label >
336- < div >
343+ < div className = "flex flex-col" >
337344< Input
338345id = { `${ id } }
346+ ref = { workspaceNameInputRef }
339347value = { form . values . name }
340348onChange = { ( e ) => {
341349form . setFieldValue ( "name" , e . target . value . trim ( ) ) ;
342350resetMutation ( ) ;
343351} }
344352disabled = { creatingWorkspace }
345353/>
354+ { form . touched . name && form . errors . name && (
355+ < div className = "text-content-destructive text-xs mt-2" >
356+ { form . errors . name }
357+ </ div >
358+ ) }
346359< div className = "flex gap-2 text-xs text-content-secondary items-center" >
347360Need a suggestion?
348361< Button
@@ -477,7 +490,6 @@ export const CreateWorkspacePageViewExperimental: FC<
477490
478491return (
479492< DynamicParameter
480- { ...getFieldHelpers ( parameterInputName ) }
481493key = { parameter . name }
482494parameter = { parameter }
483495onChange = { ( value ) =>