A switch form Web Component utilising the latest ES6 and other web technologies to create reusable custom elements. While not explicitly extending the HTML checkbox element () the underlying state management uses a standard checkbox in order to keep track of the "checked""unchecked" state and allow for a value to be sent via submissions[1].
The component is reactive in size - the handle will grow/shrink with respect to the set width/height (which can be configured either via the width/height attributes or using CSS styling).
Listeners are attached to work as other standard HTML elements of similar functionality. The click, spacebar and enter keyboard events (once having focus) will all change the state of the switch.
Additionally all custom attributes also have the same named properties and are kept in sync for any Javascript manipulation.
-
Add the
switch-component.jsfile to your/jsfolder. -
Include the javascript file into the page you're wanting to use it in. It's recommended not to use the async keyword so that the file loads as soon as possible.
<script charset="utf-8" defer src="js/switch-component.js" type="module"></script>
It is also recommended to include the web components polyfill for the older browsers unable to understand the new ES6 functions.
<!-- The web component polyfill -->
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/edf84e6e/webcomponents-sd-ce.js"></script> <cloud-switch
name="cloudSwitch"
value="1"
></cloud-switch> <!-- Minimum required code, additional attributes are defined below. -->| Attribute | Property | Default | Value(s) | Required | Description |
|---|---|---|---|---|---|
| name | name | - | string |
✔️ | The name which will be sent upon form submission. |
| value | value | "1" | string |
✔️ | The value to be send upon form submission. |
| disabled | disabled | false |
boolean |
❌ | Prevents the element from obtaining focus or sending it's value. |
| readonly | readonly | false |
boolean |
❌ | The element can still obtain focus, and value submitted but unable to have it's value changed. |
| checked | checked | true |
boolean |
❌ | Sets by default as the switch in "on" mode. |
| width | width | - | [integer, double] |
❌ | Sets the width of the switch. |
| height | width | - | [integer, double] |
❌ | Sets the height of the switch. |
| on-text | onText | "ON" | string |
❌ | Sets the text which is displayed when the switch is in it's "on" mode. |
| off-text | offText | "OFF" | string |
❌ | Sets the text which is displayed when the switch is in it's "off" mode. |
| role | role | "checkbox" | string |
❌ | The correct value for WAI-ARIA accecssable-compliant components. |
| color | color | "info" | ["success", "primary", "secondary", "danger", "warning", "info", "dark"] | ❌ | Changes the color of the switch. The names and values are taken from Bootstrap 4.0. See below for a list of possible colors and their hex values. |
| Color | Background | Border | Example |
|---|---|---|---|
| "success" | #4dbd74 | #3a9d5d |  |
| "primary" | #20a8d8 | #1985ac |  |
| "secondary" | #c8ced3 | #acb5bc |  |
| "danger" | #f86c6b | #f63c3a |  |
| "warning" | #ffc107 | #d39e00 |  |
| "info" | #63c2de | #39b2d5 |  |
| "dark" | #181b1e | #181b1e |  |
<!-- Minimal example -->
<cloud-switch>
</cloud-switch>
<!-- Example -->
<cloud-switch
name="Send Value?"
on-text="Hell Yea"
off-text="No, no!"
color="primary"
value="Yes"
></cloud-switch>
<!-- Verbose example -->
<cloud-switch
name="cloudSwitch"
value="1"
color="info"
id="customerChkbox"
role="checkbox"
width="96"
height="48"
></cloud-switch>
- Provide values which will be submitted whether the switch is "on" or "off".
- Allow any color to be set (and complementary border/gradient auto-generated).
[1] The current state of web components prevent custom form inputs from being able to be submitted. Offical thread here[closed]