<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Toggles</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/inter-ui@3.11.0/inter.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<ul>
<li>
<input id="c1" type="checkbox">
<label for="c1">Checkbox</label>
</li>
<li>
<input id="c2" type="checkbox" checked>
<label for="c2">Checkbox</label>
</li>
<li>
<input id="r1" type="radio" name="radio" value="1">
<label for="r1">Radio</label>
</li>
<li>
<input id="r2" type="radio" name="radio" value="2" checked>
<label for="r2">Radio</label>
</li>
<li>
<input id="s1" type="checkbox" class="switch">
<label for="s1">Switch</label>
</li>
<li>
<input id="s2" type="checkbox" class="switch" checked>
<label for="s2">Switch</label>
</li>
</ul>
<ul>
<li>
<input id="c1d" type="checkbox" disabled>
<label for="c1d">Checkbox</label>
</li>
<li>
<input id="c2d" type="checkbox" checked disabled>
<label for="c2d">Checkbox</label>
</li>
<li>
<input id="r1d" type="radio" name="radiod" value="1" disabled>
<label for="r1d">Radio</label>
</li>
<li>
<input id="r2d" type="radio" name="radiod" value="2" checked disabled>
<label for="r2d">Radio</label>
</li>
<li>
<input id="s1d" type="checkbox" class="switch" disabled>
<label for="s1d">Switch</label>
</li>
<li>
<input id="s2d" type="checkbox" class="switch" checked disabled>
<label for="s2d">Switch</label>
</li>
</ul>
</body>
</html>