Checkbox Styling

The Checkbox element is a field that allows a user to make multiple selections from a provided list of items.

We have three types of checkboxes, namely, single, static, and dynamic values. The single value offers one item to select. The static value option offers multiple items to select from a static list that you create manually. The dynamic value also offers multiple items to select from, however the items in this list are pulled dynamically from Salesforce.

This element can be broken down into several parts, which can be styled individually, for example, the label, font, size, color, or the input fill color. You also have the option to style the element as a whole using the “Root” option. This element can be edited on both the Element Style Level and the Project Style Level.

#	Option	Function	Available in Project or Element
1	Root	This option enables you to set general properties that affect the Checkbox element as a whole.
2	Label	The Label option allows you to control the style of the descriptive text above the input. For example, its font size, color, and type.
3	Caption	This refers to the text next to the checkbox icon. You can change the default or selected text’s font color, padding, margin, and alignment using the Caption option.
4	Input	This option allows you to adjust the Checkbox’s selection fill color (which is taken from the primary color by default). It also enables you, when using a custom icon (instead of the checkbox), to adjust its size.
5	Messages	The Messages option enables you to style the color and font of the error messages that appear under the checkbox when  a valid or invalid selection is made by the user.

1. Root

The Root option enables you to set general properties that affect the Checkbox element as a whole, such as primary color, element size, position, and alignment.

#	Option	Function	Available in Project or Element
1	Primary	The Primary color given to the input fields affects its fill color when selected.
2	Spacing	In a multiple selection checkbox (either Static or Dynamic) you can display the items horizontally or vertically by setting columns.  The Spacing property enables you to set the horizontal (column gap) or vertical (row gap) space between the checkbox items.
3	Position	You can use this option to change the Checkbox element’s location on the x and y-axis of the strip (left/right/top/bottom). The Position option also allows you to make the Checkbox element float over its parent container or over the entire page. Float over Parent allows you to set the location of the input within the box containing it, for instance, the container or strip. Float over Page allows you to set the location of the Checkbox element inside the entire page and have it stay in the same location even when the user scrolls over it.
4	Size	This option allows you to change the width and height of the Checkbox container.
5	Alignment	This option allows you to set the checkbox element to a vertical or horizontal position in relation to its container (left/center/right/top/middle/bottom). It also allows you to set the position of a few elements in relation to each other.
6	User CSS	Cascading Style Sheets (CSS) allows a user to apply styles on a checkbox via CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article.
7	Input Variant	These properties allow you to adjust the size of the checkbox to be medium or small in size.

2. Label

The Label option allows you to control the style of the descriptive text above the input. For example, its font type, font size, and color.

#	Option	Function	Available in Project or Element
1	Font	The Font option enables you to change the typography style, for instance, font family, weight, color, and size.
2	Margin	This option allows you to set the outer space between the label and the adjacent element parts.
3	Asterisk	When a checkbox is mandatory, an asterisk (*) is added to the element. You can style the asterisk using this option.

3. Default or Selected Caption

This option refers to the text next to the checkbox. It allows you to set the style for the caption’s default and selected states. It enables you to change the text’s font style, padding, margin, and alignment.

#	Option	Function	Available in Project or Element
1	Font	The Font option enables you to change the style of the checkbox caption typography, for instance, font family, weight, color, and size.
2	Padding	The Padding option allows you to add inner space inside the caption container, making the text in it move (for example, adding 10 px top padding will push the caption text 10 px down).
3	Margin	This option allows you to set the outer space between the caption and the adjacent element parts.
4	Alignment	The Alignment option enables you to set the caption’s vertical position (top, center, bottom) in relation to the checkbox next to it.

4. Input

The Input option allows you to style the checkbox border and selected fill color (which will override the default taken from the primary color). It also enables you, when using a custom icon, to set its size (width and height).

#	Option	Function	Available in Project or Element
1	Icon	This option allows you to adjust the custom icon’s width and height.
2	Fill	The Fill option allows you to override the default color of the checkbox (taken from the primary color). Setting a color will apply to the border of the checkbox and its fill color when selected.

5. Messages

The Messages option enables you to style the color and font of the error messages that appear under the checkbox when  a valid or invalid selection is made by the user.

#	Option	Function	Available in Project or Element
1	Font	This option allows you to style the text shown under the Checkbox element when the selection is found to be valid or invalid. You can set the font for both messages and set a separate color for the success and error messages.
2	Padding	You can control the padding of the checkbox. The padding could be set on the Top/Bottom to control the height of the checkbox and also on the Left/Right to control the width.