Switch - Web Component
...
Browser support
Parameters
The Web component uses a <z-switch>
tag.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
config | string? | ... |
label (optional) | string | Label of the input |
value (optional) | boolean | Value of the model |
checked (optional) | boolean | Overrides the "value" parameter as in the standard |
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 |
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/switch.js"></script>
Code
html
<!-- Default -->
<z-switch checked></z-switch>
<z-switch checked label="Switch"></z-switch>
<!-- Disabled -->
<z-switch disabled checked></z-switch>
<z-switch disabled checked label="Switch"></z-switch>
<!-- Invalid -->
<z-switch invalid-text="Invalid input" checked></z-switch>
<z-switch invalid-text="Invalid input" checked label="Switch"></z-switch>