readme.md

gtc-switch

Overview

A switch is an input widget that allows users to choose one of two values: on or off. Switches are similar to checkboxes and toggle buttons. But switches can only be used for binary input while checkboxes and toggle buttons allow implementations the option of supporting a third middle state. Checkboxes can be checked or not checked and can optionally also allow for a partially checked state. Toggle buttons can be pressed or not pressed and can optionally allow for a partially pressed state.

Specifications:

• switch role
• Switch Pattern
• Switch Example: A switch based on a div element
• ARIA: switch role

gtc-switch custom element implements the switch specification behaviour. It is a stateless controlled component. Please use checked property to control the component's state and attach event listener for custom gtcChange event to be notified about the state changes.

Please note that the field label is mandatory.

Usage

Basic-example

Here is the basic usage example for gtc-switch:

<gtc-switch label="Accessible Label" checked="false" id="my-cool-switch" />
<script>
  let myCoolSwitch = document.getElementById('my-cool-switch');
  myCoolSwitch.addEventListener('gtcChange', (event) => {
    event.preventDefault();
    event.srcElement.checked = event.detail;
  });
</script>

Properties

Property	Attribute	Description	Type	Default
checked	checked	The reflective property that allows to control the state of the switch. If true, the switch is checked.	boolean	false
disabled	disabled	If true, the switch is disabled.	boolean	false
label (required)	label	Text value used for aria-label property. The minimal length is 1.	string	undefined

Events

Event	Description	Type
gtcChange	Is called when the value has changed. Event name is prefixed not to be confused/conflict with the native one.	CustomEvent<boolean>

CSS Custom Properties

Name	Description
--background-color-checked	The background color if checked
--background-color-default	The background color by default
--background-color-disabled	The background color if disabled
--highlight-color-default	The highlight color by default
--marker-color-default	The marker color by default
--marker-color-disabled	The marker color if disabled

---

Built with StencilJS