esm.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>form-required-checkboxes via esm.sh</title>
		<link rel="stylesheet" href="./styles.css" />
	</head>
	<body>
		<h1>esm.sh CDN sanity check</h1>
		<p>
			This page loads the component class from <code>esm.sh</code> and
			registers it manually.
		</p>

		<form>
			<form-required-checkboxes required="2-3">
				<fieldset>
					<legend>Select 2 or 3 toppings</legend>
					<label
						><input
							type="checkbox"
							name="toppings"
							value="pepperoni"
						/>
						Pepperoni</label
					>
					<label
						><input
							type="checkbox"
							name="toppings"
							value="mushroom"
						/>
						Mushroom</label
					>
					<label
						><input type="checkbox" name="toppings" value="olive" />
						Olive</label
					>
					<label
						><input type="checkbox" name="toppings" value="onion" />
						Onion</label
					>
				</fieldset>
			</form-required-checkboxes>
			<button type="submit">Submit</button>
			<button type="reset">Reset</button>
		</form>

		<script type="module">
			import { FormRequiredCheckboxesElement } from 'https://esm.sh/@aarongustafson/form-required-checkboxes@3.2.4/form-required-checkboxes.js?bundle&target=es2022';

			if (!customElements.get('form-required-checkboxes')) {
				customElements.define(
					'form-required-checkboxes',
					FormRequiredCheckboxesElement,
				);
			}

			// Prevent actual form submission for demo purposes
			document.body.addEventListener('submit', (e) => {
				if (e.target.checkValidity()) {
					e.preventDefault();
					alert('Form is valid and would have been submitted!');
				}
			});
		</script>
	</body>
</html>