⚙️ Setup for Form Integration

To integrate the multiselect with HTML forms, you need to set the name attribute:

<form action="/submit" method="POST">
  <web-multiselect
    name="languages"         <!-- Required: form field name -->
    value-format="json"      <!-- Optional: json (default), csv, or array -->
    value-member="value"
    display-value-member="label">
  </web-multiselect>
  <button type="submit">Submit</button>
</form>

What happens: Hidden input(s) are automatically created and updated as you select/deselect items. The hidden inputs are submitted with your form using the specified name.

FI01 JSON Format (Default)

Hidden input with JSON array value

Demo
Controls

Select items to see how the hidden input updates.

Click "Submit Form" to see standard form submission.

Server-side parsing (Node.js):

app.post('/submit', (req, res) => {
  const langs = JSON.parse(req.body.languages);
  // langs = ['js', 'ts', 'py']
});
Description
JSON Format

value-format="json"

Creates a single hidden input:

<input type="hidden"
       name="languages"
       value='["js","ts","py"]'>

Best for modern backends that expect JSON.

FI02 CSV Format

Hidden input with comma-separated values

Demo
Controls

CSV format creates a simple comma-separated string.

Server-side parsing (PHP):

<?php
$techs = $_POST['technologies'];
$array = explode(',', $techs);
// $array = ['js', 'ts', 'py']
?>
Description
CSV Format

value-format="csv"

Creates a single hidden input:

<input type="hidden"
       name="technologies"
       value="js,ts,py">

Simple format for basic backends.

FI03 Array Format

Multiple hidden inputs for standard array parsing

Demo
Controls

Array format creates multiple inputs - one per selected item.

Server-side parsing (Express):

app.post('/submit', (req, res) => {
  const skills = req.body['skills[]'];
  // skills = ['js', 'ts', 'py']
});
Description
Array Format

value-format="array"

Creates multiple hidden inputs:

<input type="hidden" name="skills[]" value="js">
<input type="hidden" name="skills[]" value="ts">
<input type="hidden" name="skills[]" value="py">

Standard HTML form array convention.

📌 How It Works

  • name attribute (Required): Set name="fieldname" to specify the form field name. This is what your server will use to access the value (e.g., req.body.fieldname).
  • value-format attribute (Optional): Choose json (default), csv, or array to control how values are serialized in the hidden input(s).
  • Automatic Updates: Hidden inputs are created and updated automatically when selection changes - no JavaScript needed!
  • Light DOM: Hidden inputs are appended to the component's light DOM (outside Shadow DOM) so FormData can access them.
  • Standard Forms: Works with traditional HTML form submission (POST/GET), AJAX form submission, or FormData API.

🔗 Related

For SPA usage and value serialization without forms, see Value Formatting.

The same formats (json/csv/array/custom) can be used outside of form contexts.