Form Components
toggle-switch
Overview
The toggle-switch component is a UI component that allows users to toggle a switch.
This component is used in the scheduling form to input toggle switch type inputs.
Use it as a replacement for checkboxes when you want to present a switch in the UI.
| Version | 1.1.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { ToggleSwitch } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/toggle-switch/toggle-switch.es.js";
defineCustomElement();
</script> |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checked | The default value of the toggle switch. This is the value that is displayed when the toggle switch is rendered. | boolean | false | |
label | The label of the toggle switch. This is displayed next to the toggle switch. | string | '' | |
name | The name of the toggle switch. This is used to identify the toggle switch when submitting a form. | string | 'toggle-switch' |
Events
| Event | Description | Type |
|---|---|---|
nylasFormSwitchToggled | This event is fired when the toggle switch is toggled. | CustomEvent<{ checked: boolean; name: string; label: string; }> |
Shadow Parts
| Part | Description |
|---|---|
"ts_input" | The input of the toggle switch |
"ts_label" | The label of the toggle switch |
"ts_slider" | The slider of the toggle switch |
Graph
Built with StencilJS