mantinedev/mantine · error · Error

[@mantine/use-form] Form name "${name}" is invalid, it shoul

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.

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)

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.

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.