Switch - CSS Component
...
Browser support
Construction
Common API
For the basics, check the common specifications.
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.
z-switch
The z-switch parameter is the main parameter used to render the switch component.
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.4.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.0/@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.4.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/Switch.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.0/examples/styles.css" />
<script type="module" src="/0.4.0/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2" colspan="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 rowspan="3">shaped</th>
<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>
<tr>
<th rowspan="3">outlined</th>
<th>-</th>
<td>
<div>
<input z-switch="outlined" type="checkbox" />
</div>
</td>
<td>
<div>
<input z-switch="outlined" type="checkbox" checked />
</div>
</td>
<td>
<div>
<label z-switch="outlined">
<span>Switch</span>
<input type="checkbox" />
</label>
</div>
</td>
<td>
<div>
<label z-switch="outlined">
<span>Switch</span>
<input type="checkbox" checked />
</label>
</div>
</td>
</tr>
<tr>
<th>disabled</th>
<td>
<div>
<input z-switch="outlined" type="checkbox" disabled />
</div>
</td>
<td>
<div>
<input z-switch="outlined" type="checkbox" disabled checked />
</div>
</td>
<td>
<div>
<label z-switch="outlined">
<span>Switch</span>
<input type="checkbox" disabled />
</label>
</div>
</td>
<td>
<div>
<label z-switch="outlined">
<span>Switch</span>
<input type="checkbox" disabled checked />
</label>
</div>
</td>
</tr>
<tr>
<th>invalid</th>
<td>
<div>
<input z-switch="outlined" type="checkbox" data-invalid />
</div>
</td>
<td>
<div>
<input z-switch="outlined" type="checkbox" data-invalid checked />
</div>
</td>
<td>
<div>
<label z-switch="outlined">
<span>Switch</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid />
</label>
</div>
</td>
<td>
<div>
<label z-switch="outlined">
<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>