p-multi-select component is a form-associated custom element that integrates seamlessly with forms. Leveraging the
p-multi-select component. This
attribute establishes the link between the component and the form, enabling the selected values to be included in the
form's data when it's submitted.
p-multi-select does not use a native select internally. As a result, it lacks access to native ValidityState
properties and validationMessage, and it cannot display the native validation popover. This means validation behavior
and error display will need to be implemented separately if required.<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<form>
<p-multi-select name="options" label="Some Label">
<p-multi-select-option value="a">Option A</p-multi-select-option>
<p-multi-select-option value="b">Option B</p-multi-select-option>
<p-multi-select-option value="c">Option C</p-multi-select-option>
<p-multi-select-option value="d">Option D</p-multi-select-option>
<p-multi-select-option value="e">Option E</p-multi-select-option>
<p-multi-select-option value="f">Option F</p-multi-select-option>
</p-multi-select>
<p-button type="submit">Submit</p-button>
<p-button type="reset">Reset</p-button>
</form>
<p-text>Last submitted data: none</p-text>
<script>
const debugElement = document.querySelector('p-text');
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
debugElement.innerText = `Last submitted data: ${Array.from(formData.values()).join(', ') || 'none'}`;
});
</script>
</body>
</html>p-multi-select component is externally controlled. Selected options trigger a custom
update event, allowing you to use the updated value. Internally, the value will be updated automatically but can be
overwritten by passing in a new value.
No results found
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-multi-select name="options" label="Some Label">
<p-multi-select-option value="a">Option A</p-multi-select-option>
<p-multi-select-option value="b">Option B</p-multi-select-option>
<p-multi-select-option value="c">Option C</p-multi-select-option>
<p-multi-select-option value="d">Option D</p-multi-select-option>
<p-multi-select-option value="e">Option E</p-multi-select-option>
<p-multi-select-option value="f">Option F</p-multi-select-option>
</p-multi-select>
<p-text>Selected values: none</p-text>
<script>
const debugElement = document.querySelector('p-text');
const multiSelect = document.querySelector('p-multi-select');
multiSelect.addEventListener('update', (e) => {
e.target.value = e.detail.value;
setDebugText(e.detail.value);
});
function setDebugText(value) {
debugElement.innerText = `Selected values: ${value.join(', ') || 'none'}`;
}
</script>
</body>
</html>p-multi-select component behaves like regular form elements. It updates its value automatically based on user
choices, but can also be changed manually by using the value property. This property takes an array of strings that
represent the selected option values.No results found
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-text-field-wrapper label="Value:"><input name="input-value" type="text" placeholder="e.g. 1,2" /></p-text-field-wrapper>
<p-button id="btn-input-value" type="button" compact="true">Set Value</p-button>
<p-button id="btn-reset" type="button" compact="true">Reset value</p-button>
<p-multi-select name="options" label="Some Label">
<p-multi-select-option value="1">Option 1</p-multi-select-option>
<p-multi-select-option value="2">Option 2</p-multi-select-option>
<p-multi-select-option value="3">Option 3</p-multi-select-option>
</p-multi-select>
<p-button id="btn-add" type="button" compact="true">Add option</p-button>
<p-button id="btn-remove" type="button" compact="true">Remove last option</p-button>
<script>
const input = document.querySelector('input');
const multiSelect = document.querySelector('p-multi-select');
multiSelect.addEventListener('update', () => {
input.value = multiSelect.value.join(',');
});
document.querySelector('#btn-input-value').addEventListener('click', () => {
multiSelect.value = input.value.split(',');
});
document.querySelector('#btn-reset').addEventListener('click', () => {
multiSelect.value = [];
});
document.querySelector('#btn-add').addEventListener('click', () => {
addOption();
});
document.querySelector('#btn-remove').addEventListener('click', () => {
if (multiSelect.children.length > 0) {
multiSelect.lastChild.remove();
}
});
function addOption() {
const child = document.createElement('p-multi-select-option');
child.innerText = `Option ${multiSelect.children.length + 1}`;
child.setAttribute('value', `${multiSelect.children.length + 1}`);
multiSelect.append(child);
}
</script>
</body>
</html>No results found
Some optgroup label 1
Some optgroup label 2
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-multi-select name="options" label="Some Label">
<p-optgroup label="Some optgroup label 1">
<p-multi-select-option value="a">
Option A
</p-multi-select-option>
<p-multi-select-option value="b">
Option B
</p-multi-select-option>
<p-multi-select-option value="c">
Option C
</p-multi-select-option>
<p-multi-select-option value="d">
Option D
</p-multi-select-option>
<p-multi-select-option value="e">
Option E
</p-multi-select-option>
<p-multi-select-option value="f">
Option F
</p-multi-select-option>
</p-optgroup>
<p-optgroup label="Some optgroup label 2">
<p-multi-select-option value="g">
Option G
</p-multi-select-option>
<p-multi-select-option value="h">
Option H
</p-multi-select-option>
<p-multi-select-option value="i">
Option I
</p-multi-select-option>
</p-optgroup>
</p-multi-select>
<script>
</script>
</body>
</html>