mantinedev/mantine · error · Error

[@mantine/core] Each option must have value property

Error message

[@mantine/core] Each option must have value property

What it means

Combobox-based components (Select, MultiSelect, Autocomplete, TagsInput, etc.) validate their data before rendering. Every option object passed in the data prop must include a value property (string). This error is thrown during render when an option is missing value, which almost always means the data array contains malformed objects (e.g. only label, or wrong property names).

Source

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

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. Add a value property to every option in the data array
2. Map API data to ensure value is always a string: data.map((i) => ({ value: String(i.id), label: i.name }))
3. Filter out malformed records before passing data: data.filter((o) => o.value !== undefined)
4. If using grouped data, verify each item inside items arrays also has value

Example fix

// before
const data = [{ label: 'Foo' }, { label: 'Bar' }];

// after
const data = [
  { value: 'foo', label: 'Foo' },
  { value: 'bar', label: 'Bar' },
];

const hasValidOptions = (data) =>
  data.every((o) => !o.items || hasValidOptions(o.items)) &&
  data.every((o) => o.items || typeof o.value !== 'undefined');

if (!hasValidOptions(data)) {
  // log and fall back to empty data
}

type ComboboxItem = { value: string; label?: string };
type OptionsGroup = { group: string; items: ComboboxItem[] };

function isComboboxData(v: unknown): v is (ComboboxItem | OptionsGroup)[] {
  return (
    Array.isArray(v) &&
    v.every(
      (o) =>
        (typeof o === 'object' && o !== null && typeof (o as ComboboxItem).value === 'string') ||
        (typeof (o as OptionsGroup).items !== 'undefined')
    )
  );
}

When it happens

Trigger: Passing data like [{ label: 'Foo' }] (no value), mapping API results to objects that omit value, or spreading objects where value is undefined (e.g. { ...item, value: item.id } when item.id is undefined).

Common situations: Fetching options from an API where some records lack the id/name field being used as value; renaming fields during a refactor; using Combobox.Option directly (which is fine) vs raw data with wrong shape; TypeScript types bypassed with any.

Related errors

• [@mantine/core] Duplicate options are not supported. Option
• 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/50bf54c586ea1eec. Report an issue: GitHub.