diff --git a/ee/tabby-ui/components/ui/form.tsx b/ee/tabby-ui/components/ui/form.tsx
index 4603f8b..e173b4d 100644
--- a/ee/tabby-ui/components/ui/form.tsx
+++ b/ee/tabby-ui/components/ui/form.tsx
@@ -43,18 +43,19 @@ const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext)
   const itemContext = React.useContext(FormItemContext)
   const { getFieldState, formState } = useFormContext()
+  const name = fieldContext.name || "root";
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(name, formState)
 
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+  if (!formState) {
+    throw new Error("useFormField should be used within <Form>")
   }
 
   const { id } = itemContext
 
   return {
     id,
-    name: fieldContext.name,
+    name,
     formItemId: `${id}-form-item`,
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,