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

      Corfix Form Builder: Using the Select Boxes Component

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

      This article explains the various settings available for a "Select Boxes Component" in Corfix. A Select Boxes component allows users to choose multiple options from a predefined list.

      Where to Find It

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

      • Display

      • Data

      • Validation

      • Conditional

      Each tab controls different aspects of the field’s behavior.

      1. Display Tab

      The Display tab controls how the Select Boxes component appears to the user.

      • Label:

        • This is the main title for your group of checkboxes that users will see. It is a required field.

        • Example: "Select Your Preferences", "Certifications Held", "Items Included".

      • Label Position:

        • Determines where the main label is displayed relative to the group of options (e.g., Top, Left, Right, Bottom).

        • Default: Top.

      • Options Label Position:

        • Controls where the individual option labels appear relative to their respective checkboxes (e.g., Right, Left).

        • Default: Right.

      • Description:

        • Provides additional explanatory text for the component, typically displayed below the main label.

        • Example: "Check all that apply."

      • Tooltip:

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

      • Custom CSS Class:

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

      • Inline Layout:

        • If checked, the options will display horizontally (side-by-side) instead of vertically (one below the other).

      • Hide Label:

        • If checked, the main label for the component will not be displayed.

      • 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 (which options were selected) will be included in reports.

      2. Data Tab

      The Data tab is where you define the actual choices available to the user for this component.

      • Default Value:

        • Allows you to pre-select one or more options when the form loads. Users can change these selections.

      • Values:

        • This is a table where you define each individual checkbox option.

          • Flag: (Functionality not immediately clear from screenshot, likely for internal use or advanced features like icons).

          • Label: The visible text that appears next to the checkbox for each option (e.g., "Option A", "Red", "Option B").

          • Value: The actual data value that will be saved when this specific option is checked. This is a required field. It's often good practice to make the Value a simplified, machine-readable version of the Label (e.g., Label "Option A" -> Value "optionA").

          • Add Another: Click this button to add more options to your list.

      3. Validation Tab

      The Validation tab defines rules to ensure the user's selections meet specific requirements.

      • Required:

        • If checked, the user must select at least one option from the list before submitting the form.

      • Minimum checked number:

        • The minimum number of options the user must select.

      • Maximum checked number:

        • The maximum number of options the user can select.

      • Minimum checked error message:

        • Custom error message displayed if the "Minimum checked number" rule is violated.

      • Maximum checked error message:

        • Custom error message displayed if the "Maximum checked number" rule is violated.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this entire Select Boxes 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 "Select Your Preferred Toppings" only displays when the "Order Pizza?" checkbox is checked.

      Preview Panel

      The Preview area on the right side of the dialog box shows you how the "Select Boxes" will visually appear on your form. As you define options in the Data tab or adjust other display settings, you'll see these changes reflected immediately.

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Select Boxes Component from the form.

      Best Practices for Select Boxes Component:

      • Clear Main Label: Give the entire group of options a clear, simple label (e.g., "Preferred Contact Methods").

      • Meaningful Option Labels & Values: Ensure each individual option has a clear "Label" for the user and a concise "Value" for data storage (e.g., Label "Email Notifications", Value "email_notify").

      • Use for Multiple Selections: This component is for allowing users to pick more than one choice from a list. If only one choice is allowed, use a "Radio Button" or "Select (Dropdown)" component instead.

      • Set Min/Max Selections (Validation): If there's a requirement for how many options users must or can pick, use "Minimum checked number" and "Maximum checked number" for data quality.

      • Conditional Display for Relevance: Hide the entire group of checkboxes until it's needed, making your form less cluttered and easier to navigate.