Checkbox
This article describes the Checkbox component and its properties.
Last updated
This article describes the Checkbox component and its properties.
Last updated
Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article
The Checkbox component allows the user to select or deselect a single option. Multiple Checkbox components can be positioned together but they are not linked:
Select Checkbox from the controls category of the component library. Move the mouse over the canvas and click to add a Checkbox component to your project:
The Checkbox properties consist of DATA INSERTION, CHECKBOX STYLING, INTERACTIVITY, and DYNAMIC VISIBILITY sections. We’ll cover the first 3 here as dynamic visibility properties are generic to each component and a separate guide and tutorial on dynamic visibility can be found here.
The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.
Data insertion is triggered when the user checks or unchecks the Checkbox. As data insertion is one of the core concepts within Squirrel, if you aren’t sure what it is, take a look at the Getting Started: Data Insertion tutorial for more information.
Source – This property requires two values. If it isn’t bound to a source, the defaults of unchecked and checked will be used. If you do bind to a source, you will need to add two values into two adjacent cells and bind the source property to both cells. Place the unchecked value in the first source cell and the checked value in the second source cell. For a check box that asks if a user wishes to sign up to receive a newsletter, the source values could be Not subscribed/Subscribed, a check box requesting permission to store personal data could use Declined/Granted, or it could just be a simple No/Yes or the default unchecked/checked.
Destination – Bind to a single, empty cell that will receive the checked or unchecked value (or other source values) relating to the current state of the check box component.
The appearance of the Checkbox component can be altered to suit a theme or particular style by using the CHECKBOX STYLING properties.
Checkbox Size – Increase or decrease the value of this property to increase or decrease the size of the square checkbox area.
The following properties apply to the Checkbox component text label.
Label Text – Type in a label value for the Checkbox or bind to one in the spreadsheet.
Font – Choose a font style for the checkbox label from the dropdown list
Size – Change the font size of the label
B I U – Use these toggle buttons (bold, italic, underline) to change the format of the label. When toggled on, the button is blue:
Position – Select from the dropdown list. The checkbox label will move to a corresponding position relative to the checkbox.
Padding – Increase to add more space between the checkbox and the checkbox label.
Individual Padding - selected this property to apply different amounts of padding to each of the component's edges. Each of these individual inputs can be manually edited or bound to the spreadsheet.
Capitalization rules – Click to apply a rule to the checkbox label. Click again to remove the rule. Only one rule can be applied at any one time. (See this article on how to Use the capitalization rules for more info.)
If you don’t require a label in your Checkbox component uncheck the checkbox adjacent to the LABEL TEXT section heading to remove it.
These formatting properties apply to the icon used inside the checkbox to indicate it is being checked or unchecked.
Mark Type – Select an icon preference from the dropdown list, and choose from Tick, Cross, or Dot.
Mark Color – Determines the color of the icon used inside the checkbox.
Opacity – This determines the transparency of the icon used inside the checkbox.
These formatting properties apply to the unchecked checkbox component.
Unchecked Text Color – This property sets the label text color.
Opacity – This changes the opacity of the label text.
Fill – This property sets the background color of the checkbox. Uncheck if a fill color is not required.
Opacity – This changes the opacity of the checkbox.
Border – This property sets the border color of the checkbox.
Weight – This changes the line thickness of the checkbox border.
Individual Weight - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.
Line style – Select a checkbox border line style. The options are solid and dashed:
Corners – This property determines the corner radius of the checkbox border. Use the slider to amend this property, or type a numerical value into the property field.
Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.
These formatting properties apply if the checkbox is checked.
Checked Text Color – This property sets the label text color.
Opacity – This changes the opacity of the label text.
Fill – This property sets the background color of the checkbox. Uncheck if a fill color is not required.
Opacity – This changes the opacity of the checkbox.
Border – This property sets the border color of the checkbox.
Weight – This changes the line thickness of the checkbox border.
Individual Weight - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.
Line style – Select a checkbox border line style. The options are solid and dashed:
Corners – This property determines the corner radius of the checkbox border. Use the slider to amend this property, or type a numerical value into the property field.
Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.
These formatting properties can be used to apply a different style to the Checkbox component when the user’s mouse is positioned over it.
Hover Text Color – This property sets the color that the label text will change to when the mouse is positioned over the component.
Opacity – This changes the opacity of the label text.
Allow Label Click – a simple check box property that allows the user to click on the label text to check or uncheck the Checkbox component as well as the check box. The default setting is on, uncheck to turn it off.
It is possible to disable the Checkbox component if you want to limit the user’s interaction with the Checkbox component for any reason.
The DYNAMIC DISABLED STATE property utilizes Conditional Logic. For more information on Conditional Logic and its uses, see this article.
Selected Item – A new Checkbox component will by default be checked. Select Unchecked from the dropdown list to change the default setting to unchecked.
To bypass the Selected Item property or to set the default state of the Checkbox component dynamically, bind the blank property field beneath the Selected Item property to a cell in the spreadsheet that contains either checked or unchecked or a formula that will produce either value.
Ensure that checked or unchecked is written in lower caps.
