Switch
...
Browser support
...
Parameters
The CSS component uses a <input type="checkbox">
tag or a <label>
tag, depending if you want to insert a describing set for the input.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
z-switch | string? | ... |
label | string? | Label of the input |
value | boolean? | Value of the model |
checked | boolean? | Overrides the "value" parameter as in the standard |
disabled | boolean? | Blocks the interaction with the input component. |
required | boolean? | Marks the input component as required. |
name | string? | Identification for the field inside the form |
Invalid input
If you require to make the input invalid, use the native API of the input using setCustomValidity
. If no message is provided, the input is set to valid
.
ts
// Make invalid
input.setCustomValidity('Error message');
input.checkValidity();
Or you can use the data-invalid
attribute if you are using the scripts:
html
<input z-switch="star" type="checkbox" data-invalid />
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.3.6/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Switch.css" />
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 | Chip CSS example</title>
<!-- #region imports -->
<script type="module" src="/0.3.6/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Switch.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.3.6/examples/styles.css" />
<script type="module" src="/0.3.6/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2">No label</th>
<th colspan="2">With label</th>
</tr>
<tr>
<th>-</th>
<th>checked</th>
<th>-</th>
<th>checked</th>
</tr>
</thead>
<tbody>
<tr>
<th>-</th>
<td>
<div>
<input z-switch type="checkbox" />
</div>
</td>
<td>
<div>
<input z-switch type="checkbox" checked />
</div>
</td>
<td>
<div>
<label z-switch>
<span>Switch</span>
<input type="checkbox" />
</label>
</div>
</td>
<td>
<div>
<label z-switch>
<span>Switch</span>
<input type="checkbox" checked />
</label>
</div>
</td>
</tr>
<tr>
<th>disabled</th>
<td>
<div>
<input z-switch type="checkbox" disabled />
</div>
</td>
<td>
<div>
<input z-switch type="checkbox" disabled checked />
</div>
</td>
<td>
<div>
<label z-switch>
<span>Switch</span>
<input type="checkbox" disabled />
</label>
</div>
</td>
<td>
<div>
<label z-switch>
<span>Switch</span>
<input type="checkbox" disabled checked />
</label>
</div>
</td>
</tr>
<tr>
<th>invalid</th>
<td>
<div>
<input z-switch type="checkbox" data-invalid />
</div>
</td>
<td>
<div>
<input z-switch type="checkbox" data-invalid checked />
</div>
</td>
<td>
<div>
<label z-switch>
<span>Switch</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid />
</label>
</div>
</td>
<td>
<div>
<label z-switch>
<span>Switch</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid checked />
</label>
</div>
</td>
</tr>
</tbody>
</table>
<code>
<!-- #region code -->
<!-- Default -->
<input z-switch type="checkbox" checked />
<label z-switch>
<span>Switch</span>
<input type="checkbox" checked />
</label>
<!-- Disabled -->
<input z-switch type="checkbox" disabled checked />
<label z-switch>
<span>Switch</span>
<input type="checkbox" disabled checked />
</label>
<!-- Invalid -->
<input z-switch type="checkbox" data-invalid checked />
<label z-switch>
<span>Switch</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid checked />
</label>
<!-- #endregion code -->
</code>
</body>
</html>