Corfix Form Builder: Using the Number Component

The Number Component allows Corfix clients to add numbers into Corfix forms. A special feature about this field is that it opens the number pad instead of the keyboard on mobile

Corfix Knowledge Base: Number Component Settings

This guide explains the various settings available for a "Number Component" in Corfix, as shown in the provided screenshots.

When you add or edit a Number Component, you'll see a dialog box with four main tabs: Display, Data, Validation, and Conditional.

1. Display Tab

The Display tab controls how the number input field appears to the user.

• Label:

  • This is the visible name of your number field that users will see. It is a required field.

  • Example: "Quantity", "Employee ID", "Temperature".

• Label Position:

  • Determines where the label is displayed relative to the number input box (e.g., Top, Left, Right, Bottom).

  • Default: Top.

• Placeholder:

  • Text that appears inside the input field before the user types anything. It's a hint to the user about what kind of number to enter.

  • Example: "Enter a number between 1 and 100".

• Description:

  • Provides additional explanatory text for the field, typically displayed below the input box.

  • Example: "Please enter the total number of hours worked."

• Tooltip:

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

• Prefix:

  • Text or symbol that appears before the input field, often used for currency symbols or units.

  • Example: "$", "€", "No.".

• Suffix:

  • Text or symbol that appears after the input field, often used for units.

  • Example: "kg", "lbs", "cm", "°C".

• Custom CSS Class:

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

• Autocomplete:

  • Controls browser autocomplete behavior (e.g., 'on' or 'off').

  • Default: 'on'.

• Hide Label:

  • If checked, the label for the number field 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 will be included in reports.

2. Data Tab

The Data tab manages the underlying data properties of the number field.

• Multiple Values:

  • If checked, allows the user to enter multiple numerical values for this field (e.g., a list of scores).

• Default Value:

  • The pre-filled numerical value that appears in the input field when the form loads. Users can override this value.

  • Example: For a "Quantity" field, you might set the default value to "1".

• Use Thousands Separator:

  • If checked, the number will be displayed with a thousands separator (e.g., 1,000,000 instead of 1000000).

• Decimal Places:

  • Specifies the number of decimal places allowed for the number input.

  • Example: Entering "2" would allow numbers like "10.50".

• Requires Decimal:

  • If checked, the user will be required to enter a decimal value.

3. Validation Tab

The Validation tab defines rules to ensure the numerical data entered by the user is valid and meets specific criteria.

• Required:

  • If checked, the user must enter a value in this field before submitting the form.

• Minimum Value:

  • The smallest numerical value allowed in the field. If the user enters a number below this, an error will occur.

  • Example: For "Age", you might set the minimum value to "18".

• Maximum Value:

  • The largest numerical value allowed in the field. If the user enters a number above this, an error will occur.

  • Example: For "Score", you might set the maximum value to "100".

4. Conditional Tab

The Conditional tab allows you to set up rules for when this number 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 (or range/condition, depending on context) that the selected form component must have for the number component to show or hide.

  Example: You could set up a rule so that a "Discount Amount" number field only displays when the "Apply Discount?" checkbox is checked (i.e., has the value "true").

Actions at the bottom of the dialog:

• Save: Saves all changes made to the number component's settings.

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

• Remove: Deletes the number component from the form.

Preview Field

The Preview area shows a real-time visual representation of how your text field will appear on the form. Changes to settings like Label, Placeholder, Prefix, or Suffix are immediately reflected here.

Best Practices

• Use Clear Labels: Make your field names simple and easy to understand (e.g., "Full Name" not "Input 1").

• Give Hints (Placeholder/Description): Use the placeholder for examples (like "example@email.com") and description for short instructions.

• Mark Required Fields: Always check "Required" for information that absolutely must be filled in.

• Show Fields Only When Needed (Conditional): Hide fields until they're relevant, like showing "Other Details" only if "Other" is chosen elsewhere.

• Add Fixed Text (Prefix/Suffix): Use prefixes or suffixes for units (e.g., "cm") or fixed parts of codes (e.g., "ID-").