⚙️ 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.

JSON Format (Default)

Hidden input with JSON array value

Live Demo
Form Data

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']
});
How It Works
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.

CSV Format

Hidden input with comma-separated values

Live Demo
Form Data

CSV format creates a simple comma-separated string.

Server-side parsing (PHP):

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

value-format="csv"

Creates a single hidden input:

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

Simple format for basic backends.

Array Format

Multiple hidden inputs for standard array parsing

Live Demo
Form Data

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']
});
How It Works
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.