<vega-toggle-switch
size='default'
label='Label'
disabled=false
>
</vega-toggle-switch>Toggle switches resemble physical switches and are typically used as an indicator that a function is active or inactive. A toggle switch has two basic states: on and off.
| Name | Description | Default |
|---|---|---|
| size | The toggle switch has two sizes: default and small, and should be chosen to fit the context of the specific form. string | default |
| label | This designates the text that will be displayed on the toggle switch. string | "" |
| disabled | This will render the toggle switch to be greyed out and will appear to be disabled. boolean | false |
| checked | This will render the checked status of the toggle switch. boolean | false |
The vegaChange event will be dispatched whenvever the toggleSwitch state is changed.
document.getElementById("toggleswitch_id").addEventListener("vegaChange", (e) => { console.log(e) })For more details, view in Storybook.
In some circumstances the toggle switch may be used to indicate the presence of an item on a list (though in this case it may be preferable to use a checkbox).
A significant difference between a toggle switch and a checkbox is that a toggle switch should take immediate effect. In other words, the user should not be required to save a form for it to be triggered.
You may disable a toggle switch if changing its state is dependent on other factors, however, using the disabled state is not recommended in most circumstances for accessibility and usability reasons. If a toggle switch should not be changeable by the user, consider hiding it or using another method of showing the status.