Switchitem Formitem component
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
Name |
Default value |
Derived value |
Computed value |
Comment |
|---|---|---|---|---|
| $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. |