Switchitem Formitem component

Switch item

The switch item allows the user to input a logic value. The item is displayed as a switch, that can be switched left to right. By default, this is a rectangular switch, that has ON and OFF written on it. This text can be customized, and the switch itself can be set to be rounded. If the user switches this, it will have a true value, if switches it off, it will be false. The component cannot have a null value, thus if the component doesn't get a value, it will have a false value.

The switch component is a form item, that can be placed on a Form component, and the form handles it as well. The component can be used on its own, but in that case, the handling of its events and values must be provided by the program code.

Supported events:

Show, Hide, Change, Focus, Animations, Click, MouseEvents, Touch, HotKey, Drag&Drop

Style customization


Default value

Derived value

Computed value


$switch-on-color $white $switch-on-color-->$white-->#fff #fff Text color when enabled.
$switch-off-color $primary $switch-off-color-->$primary-->#079e97 #079e97 Text color when disabled.
$switch-on-bg-color $primary $switch-on-bg-color-->$primary-->#079e97 #079e97 Background color when enabled.
$switch-off-bg-color $white $switch-off-bg-color-->$white-->#fff #fff Background color when disabled.
$switch-border-color $primary $switch-border-color-->$primary-->#079e97 #079e97 Toggle switch frame color.
$switch-font-family Trebuchet Arial sans-serif Trebuchet Arial sans-serif Font used.
$switch-width 3.7rem 3.7rem Toggle switch width.
$switch-border-width $border-width $switch-border-width-->$border-width-->1px 1px Toggle switch frame width.
$switch-border-radius $border-radius $switch-border-radius-->$border-radius-->0.25rem 0.25rem Rounded corners for toggle switch frame.
$switch-on-content-padding-left ($spacer * 0.5) $switch-on-content-padding-left-->($spacer * 0.5)-->0.5rem 0.5rem Position of the “on” label, starting from the left side.

Related pages