Switch (1.2.0 - 1.3.0)
(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.
Import the alexa-layouts package
To use AlexaSwitch
, import the alexa-layouts package.
The latest version of the alexa-layouts
package is 1.7.0. AlexaSwitch
was introduced in version 1.2.0.
AlexaSwitch Parameters
All parameters except type
are optional.
Name | Type | Default | Description | Version added/updated |
---|---|---|---|---|
|
String |
— |
A string describing the switch. Voice over reads this string when the user selects the switch. |
1.2.0 |
|
A blue color. The specific shade depends on the specified |
Color to use for the switch when the switch is in the "on" position ( |
1.2.0 |
|
|
Array |
— |
Array of entity data to bind to this component. |
1.2.0 |
|
— |
The action to trigger when the user selects the switch. |
1.2.0 |
|
|
Height based on the viewport |
Height of the switch |
1.2.0 |
|
|
Width based on the viewport |
Width of the switch. |
1.2.0 |
|
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
1.2.0 |
|
String |
— |
Always set to |
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
totrue
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 setschecked
tofalse
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
.

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
.

AlexaSwitch examples
Switches in different colors and sizes
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.

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.
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.
{
"type": "Alexa.Presentation.APL.UserEvent",
"requestId": "amzn1.echo-api.request.1",
"timestamp": "2020-10-12T20:25:57Z",
"locale": "en-US",
"arguments": [
"AlexaSwitch changed",
"exampleSwitch2"
],
"components": {
"exampleSwitch2": true,
"exampleSwitch1": true
},
"source": {
"type": "VectorGraphic",
"handler": "Press",
"id": "exampleSwitch2",
"value": false
},
"token": "switchSendEventCheckedStateExampleToken"
}

Related topics
Last updated: Nov 28, 2023