mantinedev/mantine · error · Error

${errorMessage}

Error message

${errorMessage}

What it means

getSafeId builds element ids for components like Accordion and Tabs from a uid plus the control value. If the value passed to get:controlId is not a non-empty string (after trimming), Mantine throws the caller-supplied error message (e.g. Accordion: Item with value="..."...), because ids must be deterministic and non-empty.

Source

Thrown at packages/@mantine/core/src/core/utils/get-safe-id/get-safe-id.ts:4

export function getSafeId(uid: string, errorMessage: string) {
  return (value: string) => {
    if (typeof value !== 'string' || value.trim().length === 0) {
      throw new Error(errorMessage);
    }

    return `${uid}-${value}`;
  };
}

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Ensure every Accordion.Item/Tabs.Tab has a unique non-empty string value
2. For dynamic data, guard: items.filter((i) => i.value?.trim()) or default the value

Example fix

// before
<Tabs.Tab label="Settings">...</Tabs.Tab> // no value

// after
<Tabs.Tab value="settings">Settings</Tabs.Tab>

const safeValue = (v?: string) =>
  typeof v === 'string' && v.trim().length > 0 ? v : `fallback-${nanoid()}`;

<Tabs.Tab value={safeValue(item.slug)}>...</Tabs.Tab>;

function isNonEmptyValue(v: unknown): v is string {
  return typeof v === 'string' && v.trim().length > 0;
}

When it happens

Trigger: Accordion.Item or Tabs.Tab without a value prop (undefined); value={''} or value={' '} on a tab/accordion item; dynamic values that evaluate to empty strings.

Common situations: Dynamically generating items where the key field is missing for some records; refactoring from children-based Tabs.Item (no value needed) to value-based Tabs.Tab; whitespace-only values from user input.

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