mantinedev/mantine · error · Error

[@mantine/use-form] Form name

Error message

[@mantine/use-form] Form name "${name}" is invalid, it should contain only letters, numbers and dashes

What it means

@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.

Solutions

1. Use only letters, numbers and dashes: createFormActions('user-profile')
2. If the name derives from user data, sanitize it: name.replace(/[^0-9a-zA-Z-]/g, '-')
3. Pass a non-empty string

Example fix

// before
const actions = createFormActions('user_form');

// after
const actions = createFormActions('user-form');

const safeFormName = (name: string) =>
  /^[0-9a-zA-Z-]+$/.test(name) ? name : name.replace(/[^0-9a-zA-Z-]/g, '-');

const actions = createFormActions(safeFormName(rawName));

function isValidFormName(name: string): boolean {
  return /^[0-9a-zA-Z-]+$/.test(name);
}

When it happens

Trigger: createFormActions('my form'); createFormActions('user_form'); createFormActions(''); any name containing spaces, underscores, or punctuation other than dashes.

Common situations: 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.

Understand the failure class

Background: "invalid id" errors: invalid identifier format — why libraries reject IDs before lookup, and how to fix them — this error's family across 37 libraries.

Related errors

• [@mantine/schedule] WeekView: Duplicated event ids found
• [@mantine/schedule] YearView: Duplicated event ids found
• useFormContext was called outside of FormProvider context

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/d02f4b668ae3f7df. Report an issue: GitHub.

Appendix: source

Thrown at packages/@mantine/form/src/actions/actions.ts:26

  Reset,
  ResetDirty,
  ResetStatus,
  SetErrors,
  SetFieldError,
  SetFieldValue,
  SetFormStatus,
  SetInitialValues,
  SetValues,
  UseFormReturnType,
} from '../types';

function dispatchEvent(type: string, detail?: any): any {
  window.dispatchEvent(new CustomEvent(type, { detail }));
}

function validateFormName(name: string) {
  if (!/^[0-9a-zA-Z-]+$/.test(name)) {
    throw new Error(
      `[@mantine/use-form] Form name "${name}" is invalid, it should contain only letters, numbers and dashes`
    );
  }
}

export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export function createFormActions<FormValues extends Record<string, any> = Record<string, any>>(
  name: string
) {
  validateFormName(name);

  const setFieldValue: SetFieldValue<FormValues> = (path, value) =>
    dispatchEvent(`mantine-form:${name}:set-field-value`, { path, value });

  const setValues: SetValues<FormValues> = (values) =>
    dispatchEvent(`mantine-form:${name}:set-values`, values);

View on GitHub (pinned to 8a284e2c2c)