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

      Corfix Form Builder: Using the Radio Component

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

      A Radio Component (or "Radio Buttons") allows users to select only one option from a predefined list.

      Where to Find It

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

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

      The Display tab controls how the Radio Component appears to the user.

      • Label:

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

        • Example: "Preferred Communication Method", "Gender", "Service Type".

      • 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 radio buttons (e.g., Right, Left).

        • Default: Right.

      • Description:

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

        • Example: "Please select only one option."

      • 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 (the selected option's value) 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 option when the form loads. Users can change this selection.

      • Values:

        • This is a table where you define each individual radio button 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 radio button for each option (e.g., "Yes", "No", "Option C").

          • Value: The actual data value that will be saved when this specific option is selected. 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 selection meets specific requirements.

      • Required:

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

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this entire Radio 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 "Do you need a vegetarian meal?" radio buttons only display when "Attending Dinner" is checked.

      Preview Panel

      The Preview panel on the right side of the dialog box shows you how the "Radio" buttons will visually appear on your form. As you define options in the Data tab or adjust display settings, these changes are reflected immediately.

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Radio Component from the form.

      Best Practices for Radio Component:

      • Use for Single Choice: Radio buttons are specifically for scenarios where users must select only one option from a list.

      • Clear Labels for Options: Ensure each radio button option has a concise and understandable label (e.g., "Yes", "No", "Maybe").

      • Set a Default (If Applicable): If there's a most common or safest choice, consider setting a "Default Value" to speed up user input.

      • Make it Required: For critical decisions where a choice is mandatory, check "Required" in the Validation tab.

      • Conditional Display: Hide the radio button group until it's relevant to the user's previous inputs to keep the form clean.