The Switch component displays two mutually exclusive choices. Typically ON and OFF. The switch is frequently used on Settings pages to turn on/off an attribute value. The component has the following elements:
- Label: An optional label for the component.
- Container: The container is pill shaped on iOS, while it is rectangular on Android.
- Segments: There are 2 segments: Selected and Unselected.
- Text: No text is displayed on iOS, while an ON or OFF label is displayed on Android.
Appearance characteristics for this component.
- Label: An optional label may be displayed.
- State: Supports enabled, pressed, disabled and read-only.
- Selection: Supports selected and unselected.
- Background: Supports being displayed on a form, page, panel, popup, etc...
- Shape: It is shaped in a form of a pill or rectangle.
- Read-Only: The switch is black and white.
- Rendered: This component can be shown or hidden.
Common behaviors for this component.
- Press: On iOS, the circle segment grows and highlights on press. On Android, the rectangle segment just highlights on press.
- Select: To toggle the selection, press and release the switch once.
Usage guidelines for this component.
- Switches are often grouped in a Form or Settings types of pages.
- Switches only have two mutually exclusive options.
- Switches should be shown as disabled when the choice is not available to the user, but is necessary to display the choice because it may become available in different contexts.
- Switches should be shown as read-only when data is displayed in a read-only page, such as a printable page, and a value has been selected.
AMX sample code for this component.
<amx:selectBooleanSwitch label="Enabled" id="sbs1" value="true"/>
<amx:selectBooleanSwitch label="Enabled" id="sbs1"/>
<amx:selectBooleanSwitch label="Disabled" id="sbs2" disabled="true"/>
<amx:selectBooleanSwitch label="Read-Only" id="sbs3" readOnly="true"/>
- Used On: Phone, Tablet
- Also Called: On/Off, Toggle
- Related Components: Checkbox
- Resources: None