FlexToggle Documentation

The FlexToggle design is controlled using data- attributes

Attribute Values Description
class flextoggle Mandatory. The flextoggle class is what turns an ordinary checkbox into a FlexToggle.
data-color-on #[hex-color] Default #2196F3. The background color of the toggle UX when set to true.
data-color-off #[hex-color] Default: #ccc. The background color of the toggle UX when set to false.
data-label any text Default empty.
data-label-position left | right Default: left. Whether to position the label to the left or the right of the toggle UX (if any label is defined).
data-shape round | rect Default round. Whether the ends of the toggle UX is rounded or squared.
data-width number Default 48. The width of the toggle UX in pixels. If width is set but not height, the height will be set to half the width.
data-height number Default 24. The height of the toggle UX in pixels. If height is set but not width, the width will be set to double the height.