<switch> is a checkbox-like UI component.

Note: The appearance of switch component is a bit of different in three ends (iOS, Android, Web) in consideration of different platform styles.

Android Web iOS
Android Web iOS

Note: Layout style attributes listed below such as width, height, margin are not supported.

Basic Usage#


See the example.


Attribute Type Value Default Value
checked Boolean true / false false
disabled Boolean true / false false


Indicates this component’s status is set to true or false.


Indicates this component is not available for interaction.

Component Methods#



Parameters of events’ object for onchange event:#

  • value: the value of the component who dispatched this event, which is the boolean value true or false.
  • timestamp: the time stamp of the event.


Notes: There are several style properties that you mustn’t use on this component. And here are all the invalid properties:

  • width
  • height
  • min-width
  • min-height
  • margin and margin-xxx
  • padding and padding-xxx
  • border and border-xxx

Notes: If the container of <switch> is not set to align-items:flex-start, the switch in android will be stretched.

common styles: check out common styles for components

Usage Notes#

  • The width and height in the styles of <switch> won’t effect the component’s apparence and layout.
  • <switch> can not have any nested child component.


Edit this page on GitHub