mantinedev/mantine · error · Error

[@mantine/core] Duplicate options are not supported. Option

Error message

[@mantine/core] Duplicate options are not supported. Option with value "${option.value}" was provided more than once

What it means

Combobox-based components require all option values to be unique. During render, Mantine builds a set of seen values and throws when the same value appears twice, because duplicate values make selection, keyboard navigation and label lookup ambiguous.

Source

Thrown at packages/@mantine/core/src/components/Combobox/OptionsDropdown/validate-options.ts:17

import { isOptionsGroup } from './is-options-group';

export function validateOptions(options: any[], valuesSet = new Set()) {
  if (!Array.isArray(options)) {
    return;
  }

  for (const option of options) {
    if (isOptionsGroup(option)) {
      validateOptions(option.items, valuesSet);
    } else {
      if (typeof option.value === 'undefined') {
        throw new Error('[@mantine/core] Each option must have value property');
      }

      if (valuesSet.has(option.value)) {
        throw new Error(
          `[@mantine/core] Duplicate options are not supported. Option with value "${option.value}" was provided more than once`
        );
      }

      valuesSet.add(option.value);
    }
  }
}

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Deduplicate the data array by value before passing it: const unique = [...new Map(data.map((o) => [o.value, o])).values()]
2. Fix the source data so each option has a distinct value
3. If values come from an API, deduplicate on fetch or fix the backend query

Example fix

// before
const data = [
  { value: 'a', label: 'One' },
  { value: 'a', label: 'Two' },
];

// after
const data = [
  { value: 'a', label: 'One' },
  { value: 'b', label: 'Two' },
];

// or dedupe programmatically
const data = [...new Map(raw.map((o) => [o.value, o])).values()];

const uniqueByValue = (data) =>
  [...new Map(data.map((o) => [o.value, o])).values()];

<Select data={uniqueByValue(rawData)} />;

function hasUniqueValues(data: { value: string }[]): boolean {
  return new Set(data.map((o) => o.value)).size === data.length;
}

When it happens

Trigger: Passing data with two options having the same value string, e.g. [{ value: 'a', label: '1' }, { value: 'a', label: '2' }]; concatenating two API result sets that share ids; grouped data where the same value appears in two different groups.

Common situations: Merging static defaults with server-fetched options that overlap; API returning duplicate records; case differences intended as distinct (values are compared as exact strings); refactoring numbers to strings causing collisions (e.g. 1 and '1' both stringified).

Related errors

• [@mantine/core] Each option must have value property
• Combobox.DropdownTarget component children should be an elem
• Combobox.EventsTarget component children should be an elemen
• Combobox.Target component children should be an element or a

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