Select - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-select>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
config | string | The main parameter has two components following the pattern:
|
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 |
The available slots for the component are:
Name | Tags | Description |
---|---|---|
default | span |
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/select.js"></script>
Code
html
<z-select label="Input 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-select>