multiselect/index.html

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="multiselect.css"/>
	<style>
		* {font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
		main {font-weight: 300;}
	</style>
</head>
<body>
	
	<h1>Multiselect Widget</h1>

	<main>
		<p>This is a simple toggle widget that can replace checkboxes most cases.  It adds a hidden input to the form that will contain the value TRUE or FALSE.

		<form style="max-width:400px;">
			<div class="multiselect" style="max-height:160px;" script="install multiselect">
				<div class="options">

					<!-- Options can be styled any way you like -->
					<label for="id1">
						<input type="checkbox" id="id1" name="options" value="first">
						First Option
					</label>

					<label for="id2">
						<input type="checkbox" id="id2" name="options" value="second">
						Second Option
					</label>

					<label for="id3">
						<input type="checkbox" id="id3" name="options" value="third">
						Third Option
					</label>
					
					<label for="id4">
						<input type="checkbox" id="id4" name="options" value="fourth">
						Fourth Option
					</label>

					<label for="id5">
						<input type="checkbox" id="id5" name="options" value="fifth">
						Fifth Option
					</label>

					<label for="id6">
						<input type="checkbox" id="id6" name="options" value="sixth">
						Sixth Option
					</label>

					<label for="id7">
						<input type="checkbox" id="id7" name="options" value="seventh">
						Seventh Option
					</label>

					<label for="id8">
						<input type="checkbox" id="id8" name="options" value="eighth">
						Eighth Option
					</label>

					<label for="id9">
						<input type="checkbox" id="id9" name="options" value="ninth">
						Ninth Option
					</label>
				</div>

				<!-- Sort buttons are optional.  If present, then users can change option order -->
				<div class="buttons">
					<button type="button" data-sort="up">⇧</button>
					<button type="button" data-sort="down">⇩</button>
				</div>
			</div>
		</form>
	</main>

	<script src="multiselect._hs" type="text/hyperscript"></script>
	<script src="https://unpkg.com/hyperscript.org"></script>

	<!-- Sortable is optional.  If included, then select options will automatically be draggable -->
	<script src="https://www.unpkg.com/sortablejs@1.14.0/Sortable.min.js"></script>

</body>
</html>