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>