JSON Format

Serialize as JSON array - ideal for APIs and complex data

Live Demo
Serialized Value

Select items to see JSON serialization

Usage
JSON Serialization

Perfect for:

  • REST API calls
  • LocalStorage/SessionStorage
  • Complex data structures
const values = select.getValue();
const json = JSON.stringify(values);
// ["js","ts","py"]

CSV Format

Comma-separated values - simple and compact

Live Demo
Serialized Value

Select items to see CSV serialization

Usage
CSV Serialization

Perfect for:

  • URL query parameters
  • Simple string storage
  • Legacy system integration
const values = select.getValue();
const csv = values.join(',');
// "js,ts,py"

Array Format

Native JavaScript array - most flexible

Live Demo
Array Value

Select items to see array value

Usage
Array Format (Default)

Perfect for:

  • Direct JavaScript usage
  • Array operations (map, filter, etc.)
  • SPA state management
  • Any custom processing
const values = select.getValue();
// ['js', 'ts', 'py']

// Use directly in your code
values.forEach(lang => console.log(lang));

Custom Format Callback

Define your own serialization logic

Live Demo
Custom Value

Select items to see custom formatting

Implementation
Custom Callback

Set the getValueFormatCallback property:

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

select.getValueFormatCallback = (values) => {
  // Custom format: "CUSTOM:val1|val2|val3"
  return 'CUSTOM:' + values.join('|');
};

// Use it
const formatted = select.getValueFormatCallback(
  select.getValue()
);

Perfect for specialized formats like XML, Base64, encrypted values, or any custom protocol.

💡 When to Use Each Format

  • JSON: Modern APIs, localStorage, complex data structures
  • CSV: URL parameters, simple storage, legacy systems
  • Array: Direct JavaScript usage, state management, custom processing
  • Custom Callback: Specialized formats, encryption, protocols, or unique requirements

🔗 Related

For HTML form submission with these formats, see Form Integration.

The value-format attribute controls which format is used for hidden form inputs.