Conditional Form Fields Web Component – form-show-if

Form-show-if is a vanilla JavaScript web component that conditionally shows and hides form fields.

The component monitors form field changes and automatically shows, hides, enables, and disables form elements when specific conditions are met.

Features:

• Condition-Based Logic: Define multiple conditions using a simple pipe-separated syntax to control when fields appear.
• Automatic Field Management: The component automatically disables hidden fields to prevent submission of irrelevant data.
Sponsored
• Flexible Styling: Choose between the default hidden attribute or custom CSS classes for showing and hiding field wrappers.
• Wildcard Support: Use asterisk notation to show fields when any value is present, not just specific values.
• Checkbox Compatibility: Handles checkbox groups correctly, checking for selected values within arrays.
• Framework-Agnostic: Pure web component that works with any form without requiring React, Vue, or other frameworks.
• Minimal Footprint: Lightweight implementation that adds negligible overhead to page load times.

Use Cases:

• Multi-Step Form Simplification: Show additional questions based on previous answers, like revealing a phone number field only when someone selects “Call me” as their preferred contact method.
• Dynamic Survey Forms: Display follow-up questions that depend on earlier responses, keeping forms clean by hiding irrelevant questions until needed.
• Conditional Required Fields: Collect optional details that become mandatory based on user selections, such as company information appearing only when someone identifies as a business customer.
• Progressive Disclosure Patterns: Reduce form complexity by revealing fields incrementally as users provide information, improving completion rates by not overwhelming them with too many fields at once.

How To Use It:

1. Download and load the component script in your HTML.

<script src="path/to/form-show-if.js"></script>

2. Wrap any form field and its label inside the <form-show-if> element. The component requires a conditions attribute that defines when the field should appear. Each condition follows the format fieldname=value, and you can combine multiple conditions with double pipes (||).

<form>
  <label for="email">
    Email
    <input type="email" name="email" id="email" />
  </label>
  <form-show-if conditions="email=*">
    <label for="phone">
      Phone Number
      <input type="tel" name="phone" id="phone" />
    </label>
  </form-show-if>
</form>

3. The asterisk (*) acts as a wildcard, meaning the phone field appears whenever the email input contains any value. For specific value matching, replace the asterisk with the exact value you’re checking for.

<form-show-if conditions="email=work@example.com">
  <label for="department">
    Department
    <input type="text" name="department" id="department" />
  </label>
</form-show-if>

4. Combine multiple conditions to show a field when any of several criteria are met. The following example displays a field if the email has any value OR if a select dropdown has “option3” selected.

<form-show-if conditions="email=*||preference=option3">
  <label for="details">
    Additional Details
    <textarea name="details" id="details"></textarea>
  </label>
</form-show-if>

5. By default, the component applies the hidden attribute to hide fields and removes it to show them. You can customize this behavior with CSS classes instead. The disabled-class attribute adds a class when the field should be hidden, and enabled-class adds a class when it should be shown.

<form-show-if 
  conditions="email=*" 
  disabled-class="field-hidden" 
  enabled-class="field-visible">
  <label for="subscribe">
    Newsletter
    <input type="checkbox" name="subscribe" id="subscribe" />
  </label>
</form-show-if>

6. The component works with all standard form inputs: text inputs, textareas, selects, radios, and checkboxes. For checkbox groups sharing the same name, it checks if any selected value matches your condition.

FAQs

Q: Can I use this component with dynamically added form fields?
A: The component initializes when connected to the DOM and assumes the fields referenced in conditions already exist at that time. If you’re adding fields dynamically after page load, you need to ensure the referenced fields exist before the form-show-if element is added. For complex dynamic forms, consider re-initializing or using a framework with better lifecycle management.

Q: How do I handle fields that depend on multiple conditions with AND logic instead of OR?
A: The conditions attribute uses OR logic by design—if any condition matches, the field shows. For AND logic, wrap the form-show-if elements. The outer component controls visibility based on the first condition, and the inner component checks the second condition. The field only appears when both wrappers are shown, effectively creating AND behavior through nesting.

Q: Does this work with radio button groups?
A: Yes, radio buttons work the same as other inputs. Reference the radio group by its name attribute and specify the value you want to match. Since radio buttons share a name, the component checks the currently selected radio’s value against your condition.

Q: Why aren’t my custom classes being applied?
A: The component only uses custom classes when either disabled-class or enabled-class is explicitly defined. If you specify one but not the other, the component still functions but might not behave exactly as expected. Define both attributes for complete control over class-based styling, or leave both undefined to use the default hidden attribute approach.

Q: Can the component observe fields outside the current form?
A: No, the component specifically queries the closest parent form element and only monitors fields within that form. This is intentional to keep dependencies scoped and predictable. If you need cross-form dependencies, you’ll need to implement custom JavaScript or restructure your forms to share a parent form element.

Related Resources:

• 10 Best Cascading Dropdown Plugins In jQuery And Pure JavaScript

The post Conditional Form Fields Web Component – form-show-if appeared first on CSS Script.