Template Builder Guides
      Back to home
      1. Corfix Guide
      2. Template Builder Tutorials
      3. Template Builder Guides

      Corfix Form Builder: Using the Checkbox Component

      This article will summarize how to use the Checkbox Component in Template Builder.

      The Checkbox Component is used for single "yes/no" or "on/off" selections.

      Where to Find It

      In your Corfix Form Builder, click on a Checkbox Component  to access the configuration panel. You’ll see four tabs:

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

       

      The Display tab controls how the Checkbox appears to the user.

      • Label:

        • This is the visible text next to the checkbox that users will see. It is a required field.

        • Example: "I agree to the terms", "Completed", "Is Active?".

      • Label Width:

        • Controls the width of the label next to the checkbox, in percentage.

      • Label Margin:

        • Controls the space between the label and the checkbox, in percentage.

      • Description:

        • Provides additional explanatory text for the checkbox, typically displayed below it.

        • Example: "Check this box to confirm your understanding."

      • Tooltip:

        • Text that appears when the user hovers their mouse over the checkbox. Useful for providing quick help or context.

      • Custom CSS Class:

        • Allows advanced users to apply custom styling to the checkbox using CSS classes.

      • Hide Label:

        • If checked, the label for the checkbox will not be displayed (only the box itself).

      • Modal Edit:

        • (Details not fully visible in screenshot, but typically relates to editing in a pop-up modal window).

      • Reportable:

        • If checked, the data from this field (checked/unchecked) will be included in reports.

      2. Data Tab

       

      The Data tab manages the underlying data properties of the checkbox.

      • Default Value:

        • If checked, the checkbox will be pre-selected when the form loads. Users can uncheck it.

      3. Validation Tab

       

      The Validation tab defines rules for the checkbox.

      • Required:

        • If checked, the user must interact with the checkbox. This typically means it must be checked to submit the form, especially for "agreement" type checkboxes.

      4. Conditional Tab

       

      The Conditional tab allows you to set up rules for when this Checkbox Component should be displayed or hidden based on the values of other components in the form.

      • Simple:

        • This is typically a toggle or a dropdown to select between simple and advanced conditional logic.

      • This component should Display:

        • Choose whether the component should "Show" or "Hide" (implied options) based on the condition.

      • When the form component:

        • Select another component in your form whose value will trigger the condition.

      • Has the value:

        • Specify the exact value that the selected form component must have for the condition to be met.

        Example: You could set up a rule so that an "I Agree to Privacy Policy" checkbox only displays when the user selects a specific country in another field.

      Preview Window

      The Preview area on the right side of the dialog box shows you how the "Text Area" will visually appear on your form. As you adjust settings like the Label, Placeholder, or the number of Rows, you'll see these changes reflected in real-time.

      Actions at the bottom of the dialog:

      • Save: Saves all changes made to the Checkbox Component's settings.

      • Cancel: Discards any unsaved changes and closes the dialog.

      • Remove: Deletes the Checkbox Component from the form.

      Best Practices for Checkbox Component:

      • Clear, Action-Oriented Labels: Use labels that clearly state what the user is agreeing to or confirming (e.g., "Is this task complete?", "Receive email updates").

      • Use for Binary Choices: Checkboxes are best for simple yes/no, true/false, or on/off decisions. Don't use them for multiple-choice options where only one can be picked (use Radio Buttons or Select for that).

      • Default Value Wisely: Only pre-check the "Default Value" if the vast majority of users will select that option, or if it's a non-critical "opt-in" choice. Avoid pre-checking for legal agreements.

      • Make "Agreement" Checkboxes Required: If a checkbox indicates agreement to terms, policies, or confirmation, set it as "Required" in the Validation tab.

      • Leverage Conditional Logic: Hide checkboxes until they are directly relevant based on other selections in the form to streamline user experience.