toggle/index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="toggle.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>Toggle 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>
            <div script="install toggle" name="thing" value="true" true-text="YES. Do the thing" false-text="NO. Don't do it."></div>
            <div style="height:1em;"></div>
            <div script="install toggle" name="missles" value="false" true-text="ACTIVE. Missles will fire automatically." false-text="PASSIVE. Missles only fire manually"></div>
            <div style="height:1em;"></div>
            <div script="install toggle" name="binary" value="true" true-text="YES. Binary" false-text="NO. Not binary."></div>
            <div style="height:1em;"></div>
            <div script="install toggle" name="correct" value="false" true-text="YES. Hyperscript is awesome." false-text="NO. I must be confused."></div>
            <div style="height:1em;"></div>
            <div script="install toggle" name="missles" value="true" true-text="This is the same label no matter what." false-text="This is the same label no matter what."></div>
            <div style="height:1em;"></div>
            <div script="install toggle" name="missles" value="false"></div>
        </form>
    </main>

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

</body>
</html>