Multiselect - Web Component
Browser support
Parameters
The Web component uses the <z-multiselect> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
config | string | ... |
label | string | Label of the input |
readonly(optional) | boolean | Transforms the input into an output |
value(optional) | string[] | Value of the model |
disabled(optional) | boolean | Blocks the interaction with the input component. |
required(optional) | boolean | Marks the input component as required. |
name(optional) | string | Identification for the field inside the form |
invalid(optional) | boolean | The forced state for set the input as invalid |
help-text(optional) | string | The forced message to be shown under the input |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
onchange | string[] | Returns the new value of the "value" attribute |
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.4.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.1/@zurich/web-components/multiselect.js"></script>Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDS | Link Web Component example</title>
<!-- #region imports -->
<link rel="stylesheet" href="/0.4.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.1/@zurich/web-components/multiselect.js"></script>
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.1/examples/styles.css" />
<script type="module" src="/0.4.1/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>line</th>
<th>shaped</th>
</tr>
</thead>
<tbody>
<tr>
<th>-</th>
<td>
<div>
<z-multiselect label="Select label"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
<td>
<div>
<z-multiselect label="Select label" config="shaped"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
</tr>
<tr>
<th>with value</th>
<td>
<div>
<z-multiselect label="Select label" value='["a"]'
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
<td>
<div>
<z-multiselect label="Select label" value='["a"]' config="shaped"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
</tr>
<tr>
<th>disabled</th>
<td>
<div>
<z-multiselect label="Select label" disabled
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
<td>
<div>
<z-multiselect label="Select label" disabled config="shaped"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
</tr>
<tr>
<th>readonly</th>
<td>
<div>
<z-multiselect label="Select label" readonly value='["a"]'
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
<td>
<div>
<z-multiselect label="Select label" readonly value='["a"]' config="shaped"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
</tr>
<tr>
<th>with help text</th>
<td>
<div>
<z-multiselect label="Select label" help-text="Help text"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
<td>
<div>
<z-multiselect label="Select label" help-text="Help text" config="shaped"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
</tr>
<tr>
<th>invalid</th>
<td>
<div>
<z-multiselect label="Select label" help-text="Invalid input" invalid
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
<td>
<div>
<z-multiselect label="Select label" help-text="Invalid input" invalid config="shaped"
options='[{ "text": "Option A", "value": "a" },{ "text": "Option B", "value": "b" },{ "text": "Option C", "value": "c", "disabled": true},{ "text": "Option D", "value": "d" }]'>
</z-multiselect>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>