{"record":{"id":"d02f4b668ae3f7df","repo":"mantinedev/mantine","slug":"mantine-use-form-form-name-name-is-invalid","errorCode":null,"errorMessage":"[@mantine/use-form] Form name \"${name}\" is invalid, it should contain only letters, numbers and dashes","messagePattern":"\\[@mantine/use-form\\] Form name \"(.+?)\" is invalid, it should contain only letters, numbers and dashes","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/form/src/actions/actions.ts","lineNumber":26,"sourceCode":"  Reset,\n  ResetDirty,\n  ResetStatus,\n  SetErrors,\n  SetFieldError,\n  SetFieldValue,\n  SetFormStatus,\n  SetInitialValues,\n  SetValues,\n  UseFormReturnType,\n} from '../types';\n\nfunction dispatchEvent(type: string, detail?: any): any {\n  window.dispatchEvent(new CustomEvent(type, { detail }));\n}\n\nfunction validateFormName(name: string) {\n  if (!/^[0-9a-zA-Z-]+$/.test(name)) {\n    throw new Error(\n      `[@mantine/use-form] Form name \"${name}\" is invalid, it should contain only letters, numbers and dashes`\n    );\n  }\n}\n\nexport const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport function createFormActions<FormValues extends Record<string, any> = Record<string, any>>(\n  name: string\n) {\n  validateFormName(name);\n\n  const setFieldValue: SetFieldValue<FormValues> = (path, value) =>\n    dispatchEvent(`mantine-form:${name}:set-field-value`, { path, value });\n\n  const setValues: SetValues<FormValues> = (values) =>\n    dispatchEvent(`mantine-form:${name}:set-values`, values);\n","sourceCodeStart":8,"sourceCodeEnd":44,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/form/src/actions/actions.ts#L8-L44","documentation":"@mantine/form actions (createFormActions / useFormActions) require a form name that matches /^[0-9a-zA-Z-]+$/ because the name is used in custom event names dispatched on window. Names with spaces, underscores, dots or other characters are rejected at action creation time.","triggerScenarios":"createFormActions('my form'); createFormActions('user_form'); createFormActions(''); any name containing spaces, underscores, or punctuation other than dashes.","commonSituations":"Using natural-language or snake_case form identifiers; auto-generating names from labels or paths ('profile.email' from a nested path); empty-string names from misconfigured variables.","solutions":["Use only letters, numbers and dashes: createFormActions('user-profile')","If the name derives from user data, sanitize it: name.replace(/[^0-9a-zA-Z-]/g, '-')","Pass a non-empty string"],"exampleFix":"// before\nconst actions = createFormActions('user_form');\n\n// after\nconst actions = createFormActions('user-form');","handlingStrategy":"validation","validationCode":"const safeFormName = (name: string) =>\n  /^[0-9a-zA-Z-]+$/.test(name) ? name : name.replace(/[^0-9a-zA-Z-]/g, '-');\n\nconst actions = createFormActions(safeFormName(rawName));","typeGuard":"function isValidFormName(name: string): boolean {\n  return /^[0-9a-zA-Z-]+$/.test(name);\n}","tryCatchPattern":null,"preventionTips":["Use kebab-case form names by convention","Sanitize generated names (paths, labels) before passing to createFormActions","Assert the regex in a unit test for form-name constants"],"tags":["form","actions","validation","naming"],"backgroundTag":"invalid-identifier-format","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}