(This is not the most recent version of AlexaSwitch. Use the Other Versions option to see the documentation for the most recent version of AlexaSwitch)
The Alexa switch responsive component (AlexaSwitch) displays a switch the user can slide between on and off. You can control the switch size, colors, and commands to run when the user interacts with the switch.
Set the dark or light color theme. The selected theme controls the colors used for the component.
1.2.0
type
String
—
Always set to AlexaSwitch
1.2.0
checked state
AlexaSwitch uses the standard checked component state to determine whether to show the component in the on or off position. When you place the component in your document, initialize checked to true or false:
Set checked to true to show the switch in the on position with the thumb indicator on the right.
Set to false to display the switch in the off position with the thumb indicator on the left. The component sets checked to false by default.
When the user interacts with the switch, the component automatically toggles checked state. You don't need to track or update the checked state yourself.
The following example displays four switches in two rows. In the first row, the switches initialize checked to true. In the second row, they leave checked set to the default false.
Examples of the default switch with the checked state on and off
disabled state
AlexaSwitch uses the standard disabled component state to determine whether to show the component enabled or disabled. When disabled is true, the switch doesn't respond to any user interactions such as touch or a remote.
The disabled state is independent of checked, so you can display the disabled switch in the on or off position.
The following example displays four disabled switches in two rows. In the first row, the switches set checked to true. In the second row, they leave checked set to the default false.
The following example shows a complete document that displays multiple switches with different colors and sizes. The switches are provided in a data source. Each row shows the same switch in the dark and light themes. When you select a switch, the switch runs a user-defined command that updates the header subtitle with information about the selected switch. The command gets the current checked state for the AlexaCheckbox from the event.source.checked property.
{"type":"APL","version":"2024.3","import":[{"name":"alexa-layouts","version":"1.7.0"}],"layouts":{"SwitchRow":{"parameters":["switchText","switchId","checked","disabled","switchHeight","switchWidth","activeColor","theme"],"item":{"type":"Container","direction":"row","width":"100vw","paddingLeft":"@marginHorizontal","paddingRight":"@marginHorizontal","items":[{"type":"Text","text":"${switchText}","textAlignVertical":"center","width":"100%","shrink":1},{"type":"AlexaSwitch","id":"${switchId}","switchHeight":"${switchHeight}","switchWidth":"${switchWidth}","activeColor":"${activeColor}","checked":"${checked}","disabled":"${disabled}","isIndeterminate":"${isIndeterminate}","primaryAction":[{"type":"ShowSwitchResult"}]},{"type":"AlexaSwitch","id":"${switchId}_light","switchHeight":"${switchHeight}","switchWidth":"${switchWidth}","activeColor":"${activeColor}","checked":"${checked}","disabled":"${disabled}","theme":"light","primaryAction":[{"type":"ShowSwitchResult"}]}]}}},"mainTemplate":{"parameters":["switchExampleData"],"item":{"type":"Container","width":"100vw","height":"100vh","items":[{"type":"AlexaHeader","id":"headerId","headerTitle":"${switchExampleData.headerTitle}","headerSubtitle":"${switchExampleData.headerSubtitle}"},{"type":"Sequence","height":"80%","data":"${switchExampleData.arrayOfSwitches}","paddingBottom":"@spacing3XLarge","items":[{"type":"SwitchRow","switchId":"${data.switchId}","switchText":"${data.switchText}","switchHeight":"${data.switchHeight}","switchWidth":"${data.switchWidth}","activeColor":"${data.activeColor}","checked":"${data.checked}","disabled":"${data.disabled}","theme":"${data.theme}"}]}]}},"commands":{"ShowSwitchResult":{"commands":[{"type":"SetValue","componentId":"headerId","property":"headerSubtitle","value":"You changed ${event.source.id} to ${event.source.checked}"}]}}}
{"switchExampleData":{"headerTitle":"Switch examples, dark and light themes","headerSubtitle":"Select the switch and see <code>checked</code> state here","arrayOfSwitches":[{"switchId":"defaultExample","switchText":"Default switch","checked":true},{"switchId":"largeRedExample","switchText":"Large, red switch","switchHeight":"144dp","switchWidth":"216dp","activeColor":"red","checked":true},{"switchId":"disabledExample","switchText":"Disabled switch","checked":true,"disabled":true},{"switchId":"orangeExample","switchText":"Orange switch","activeColor":"orange","checked":true}]}}
Examples of AlexaSwitch with different colors and sizes
Send the switch checked state to your skill
The following example shows a full document with two AlexaSwitch components. When the user selects a switch, the switch runs the SendEvent command to send a UserEvent request to the skill. Because the SendEvent includes the components property, the UserEvent request includes the ID and current checked state of the two switches.
{"type":"APL","version":"2024.3","import":[{"name":"alexa-layouts","version":"1.7.0"}],"layouts":{"SwitchRow":{"parameters":["switchId","checked","disabled"],"items":{"type":"Container","direction":"row","items":[{"type":"Text","text":"${switchId}:","textAlignVertical":"center"},{"type":"AlexaSwitch","id":"${switchId}","checked":"${checked}","disabled":"${disabled}","primaryAction":{"type":"SendEvent","components":["exampleSwitch1","exampleSwitch2"],"arguments":["AlexaSwitch changed","${event.source.id}"]}}]}}},"mainTemplate":{"item":{"type":"Container","width":"100vw","height":"100vh","alignItems":"center","justifyContent":"center","paddingLeft":"@marginHorizontal","paddingRight":"@marginHorizontal","items":[{"type":"Text","text":"This example runs a <code>SendEvent</code> command when you select a switch. The <code>UserEvent</code> request sent to your skill includes the <code>checked</code> state for both switches."},{"type":"SwitchRow","switchId":"exampleSwitch1","checked":true},{"type":"SwitchRow","switchId":"exampleSwitch2"}]}}}
The following example shows the UserEvent the skill receives when the user toggles the second switch (exampleSwitch2) from off to on. The components property in the request includes the current checked state for both of the AlexaSwitch components.
