This example uses custom property names from user objects:

{
  userId: 1,
  fullName: 'John Doe',
  email: 'john@example.com',
  role: 'Admin'
}

Member attributes tell the component which properties to use for values, display text, and subtitles.

Provide an array of [key, value] tuples - no configuration needed!

[
  [1, 'Option One'],
  [2, 'Option Two'],
  [3, 'Option Three']
]

The first element is used as the value, the second as display text.

This example uses deeply nested objects with complex structure:

{
  data: {
    id: 'usr_1',
    info: {
      name: 'Product A',
      price: 99.99,
      category: 'Electronics'
    }
  }
}

How to use callbacks:

const select = document.querySelector('web-multiselect');
select.options = complexData;

select.getValueCallback = (item) => {
  return item.data.id;
};

select.getDisplayValueCallback = (item) => {
  return item.data.info.name;
};

select.getSubtitleCallback = (item) => {
  return `$${item.data.info.price} - ${item.data.info.category}`;
};

select.getIconCallback = (item) => {
  return item.data.info.category === 'Electronics' ? '🔌' : '📚';
};

select.getBadgeDisplayCallback = (item) => {
  return `${item.data.info.name} ($${item.data.info.price})`;
};