Checkbox

This article describes the checkbox component and its properties.

The checkbox component gives the user the opportunity 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:

Checkbox Properties

The check box 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:

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.

CHECKBOX STYLING:

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.

LABEL TEXT

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 to on, the button is blue:

• Position – Select from the dropdown list. The checkbox label will move to a corresponding position relative to the check box.
• Padding – Increase to add more space between the checkbox and the checkbox label.
• 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.

MARKER

These formatting properties apply to the icon used inside the checkbox to indicate it being checked or unchecked.

• Mark Type – Select an icon preference from the dropdown list, choose from Tick, Cross or Dot.
• Mark Color – Determines the colour of the icon used inside the checkbox.
  • Opacity – This determines the transparency of the icon used inside the checkbox.

UNCHECKED STYLE

These formatting properties apply to the unchecked checkbox component.

• Unchecked Text Color – This property sets the label text colour.
  • Opacity – This changes the opacity of the label text.
• Fill – This property sets the background colour of the checkbox. Uncheck if a fill colour is not required.
  • Opacity – This changes the opacity of the checkbox.
• Border – This property sets the border colour of the checkbox.
  • Weight – This changes the line thickness of the checkbox border.
  • 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.

CHECKED STYLE

These formatting properties apply if the checkbox is checked.

• Checked Text Color – This property sets the label text colour.
  • Opacity – This changes the opacity of the label text.
• Fill – This property sets the background colour of the checkbox. Uncheck if a fill colour is not required.
  • Opacity – This changes the opacity of the checkbox.
• Border – This property sets the border colour of the checkbox.
  • Weight – This changes the line thickness of the checkbox border.
  • 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.

HOVER STATE

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 colour that the label text will change to when the mouse is positioned over the component.
  • Opacity – This changes the opacity of the label text.

INTERACTIVITY:

LABEL INTERACTION

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 off.

DYNAMIC DISABLED STATE

It is possible to disable the checkbox component if you want to limit the user’s interaction with the checkbox component for any reason.

Bind the Status property to a cell in the spreadsheet, and either add a value to the Value property or bind it to a cell containing a value in the spreadsheet. When the status property and the value property are equal, the checkbox component will be disabled. Leaving these two properties empty will ensure that the checkbox component is always enabled.

SELECTED ITEM

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.