Switch

Allow the user to switch between two different states.

Switch

When to use

If you need to represent the switching between two states or on-off state.
The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.



Basic usage

When a user toggles a switch, its corresponding action takes effect immediately.



Disabled

Disabled state of Switch.



Text & icon

Avoid adding labels to describe the values of a switch. Switches are either on or off. Providing labels that describe these states is redundant and clutters the interface.



Loading

Because a switch shows the actual status of something, sometimes there is a delay in its change of state. In such cases, a processing status animation can be used.


API

PropertyDescriptionTypeDefault
className
className of Icon
string
-
style
Style properties of icon, like fontSize and color
CSSProperties
-
spin
Rotate icon with animation
boolean
false
rotate
Rotate by n degrees (not working in IE9)
number
-
twoToneColor
Only supports the two-tone icon. Specify the primary color.
string (hex color)
-