Conditional Fields

Core Forms supports conditional show/hide logic using HTML data attributes. This lets you show or hide fields based on the value of another field, without writing any JavaScript.

Basic Syntax

Show a field when a condition is met

<div data-show-if="fieldname:value">
    <label for="extra">Extra field</label>
    <input type="text" name="extra" id="extra" />
</div>

The wrapper element (and everything inside it) is hidden by default and only shown when the field named fieldname has the value value.

Hide a field when a condition is met

<div data-hide-if="fieldname:value">
    <label for="standard">Standard field</label>
    <input type="text" name="standard" id="standard" />
</div>

The wrapper element is visible by default and hidden when the field named fieldname has the value value.

Multiple Values

Use the pipe character (|) to match any of several values:

<div data-show-if="country:USA|Canada|Mexico">
    <label for="state">State/Province</label>
    <input type="text" name="state" id="state" />
</div>

This shows the field when country equals “USA”, “Canada”, or “Mexico”.

Wildcard (Non-Empty Check)

Use * to show a field when another field has any non-empty value:

<div data-show-if="email:*">
    <label for="confirm_email">Confirm Email</label>
    <input type="email" name="confirm_email" id="confirm_email" />
</div>

This shows the confirmation field as soon as the user types anything in the email field.

How It Works

The JavaScript listens for change, click, and keyup events on form fields. When any field value changes, all data-show-if and data-hide-if conditions are re-evaluated.

Hidden elements get display: none applied. Fields inside hidden elements are automatically excluded from validation. If a hidden field had a required attribute, the plugin temporarily stores it as data-was-required and removes the required attribute so validation does not block submission.

When the field is shown again, the required attribute is restored from data-was-required.

Accessibility

Hidden conditional fields are removed from the tab order. The accessibility script sets tabindex="-1" on inputs inside hidden sections and restores the original tab order when the section becomes visible. This prevents keyboard users from tabbing into fields they cannot see.

Examples

Show a text field when “Other” is selected from a dropdown

<p>
    <label for="reason">Reason for contact</label>
    <select name="reason" id="reason">
        <option value="">Select...</option>
        <option value="support">Support</option>
        <option value="sales">Sales</option>
        <option value="other">Other</option>
    </select>
</p>

<div data-show-if="reason:other">
    <p>
        <label for="other_reason">Please specify</label>
        <input type="text" name="other_reason" id="other_reason" />
    </p>
</div>

Show a field based on radio button selection

<p>
    <label>
        <input type="radio" name="contact_method" value="email" /> Email
    </label>
    <label>
        <input type="radio" name="contact_method" value="phone" /> Phone
    </label>
</p>

<div data-show-if="contact_method:phone">
    <p>
        <label for="phone">Phone number</label>
        <input type="tel" name="phone" id="phone" />
    </p>
</div>

Show a field when a checkbox is checked

<p>
    <label>
        <input type="checkbox" name="subscribe" value="yes" /> Subscribe to newsletter
    </label>
</p>

<div data-show-if="subscribe:yes">
    <p>
        <label for="frequency">Email frequency</label>
        <select name="frequency" id="frequency">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
        </select>
    </p>
</div>

Re-evaluating Conditions

If you dynamically modify form field values via JavaScript, dispatch a cf-refresh event on the form element to trigger re-evaluation of all conditions:

var form = document.querySelector('.cf-form');
form.dispatchEvent(new Event('cf-refresh'));