Conditional Field Using a Radio Field in Checkout

In this documentation, we will demonstrate how to utilize a Radio field to add a conditional field in checkout using FunnelKit. Depending on the option users select in the checkbox field, another field will be displayed.

Here are the steps you need to follow:

Note: To demonstrate the process, we will use a conditional field called Tax Exempt using the Radio type. If users select Yes, a Tax Number field will appear, allowing them to enter their tax number.

Step 1: Create the radio field

The first step is to create the radio field. The value selected in this field will determine when the conditional field is shown to the users.

To do so, click the Add New Field button and set up the following fields:

Field Type: Choose Field Type as “Radio”.
Label: Enter the Field Label. For example: Tax Exempt.
Set the Field ID (Order Meta Key): This key determines where the value of this field is stored. Use underscores _ if the ID has multiple words (e.g., tax_exempt).
Options (|) separated: Add Options, separated by a pipe |. Example: Yes|No.
Default: Add a default Value, Example: No.
Show on Thank You Page: Enable to display of the field value on the order confirmation page.
Show in Order Email: to include the field value in the customer’s order email.
Required: Must make it required to collect the conditional data.

Radio field configuration settings in FunnelKit checkout showing Tax Exempt setup options

Then hit Add to add the radio field.

Adding radio field to checkout form in FunnelKit and placing it in checkout layout

Next, drag and drop the field to your desired section on the checkout page.

Step 2: Add the conditional field

Now, follow the same process to add the conditional field. In our case Tax Number. Make sure to place it after the conditional field on the checkout form.

Adding Tax Number conditional field in FunnelKit checkout form after radio field

Step 3: Add Conditions

To make a field appear only when a specific option is selected, we need to add a condition. Click “Edit Conditions”.

Editing conditional field rules inside FunnelKit checkout builder conditions panel

Next, expand the section that contains the conditional field and select “Apply to specific fields”. Hit “+ Add Field” and choose the field you want to make conditional.

Selecting checkout field for applying conditional logic in FunnelKit checkout settings

Next, click “+ Add Field” again, select “Fields” to expand. and view existing fields.

Opening existing checkout fields list to select condition source field in FunnelKit

Then search for and select the field whose value will trigger the conditional field.

Selecting radio field value condition where Tax Exempt triggers Tax Number field

Set the condition, for example:

Tax Example: Show “Tax Number” only if “Tax Exempt” (Radio) is Yes.

Finally, click “Add” and save the checkout page with the custom fields.

Saving conditional checkout field configuration in FunnelKit checkout builder

Note: You can add multiple condition a well. For more details, check our documentation on conditional fields.

Step 4: Test the conditional checkout field using a radio field

Try placing a test order, and on the checkout page, you will only see the Radio field and no conditional field since the default value is No.

Checkout preview showing radio field default state before selection in FunnelKit checkout

If you choose “Yes”, you will see the conditional field.

Conditional Tax Number field appearing after selecting Yes in radio field in checkout

You can follow this process to create any conditional field using a Radio field and add it to your checkout form.

Checkout Page

Step 1: Create the radio field

Step 2: Add the conditional field

Step 3: Add Conditions

Step 4: Test the conditional checkout field using a radio field