Show If Web Component Demo

Basic Conditional Show/Hide

Simple conditions that show a field when another field has any value.

Show Field if Another Field Has Any Value

Using conditions="email=*" shows the field when the email field contains any value.

<label>Email address
  <input type="email" name="email" />
</label>

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

OR Logic

Show a field when any of multiple conditions are met using the || operator.

Multiple Conditions (OR)

Using conditions="email=*||choose=3" shows the field when either the email field has a value OR the select has "Option 3" chosen.

<label>Email address
  <input type="email" name="email" />
</label>

<label for="choose">Choose an option
  <select name="choose" id="choose">
    <option value="">Select...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</label>

<form-show-if 
  conditions="email=*||choose=3">
  <label for="details">Details
    <input name="details" id="details" />
  </label>
</form-show-if>

Specific Value Matching

Show a field only when another field matches an exact value.

Exact Value Match

Using conditions="email=foo@bar.tld" shows the field only when the email field contains that exact value.

<label>Email address
  <input type="email" name="email" />
</label>

<form-show-if 
  conditions="email=foo@bar.tld">
  <label for="secret">Secret code
    <input name="secret" id="secret" />
  </label>
</form-show-if>

Radio & Checkbox Integration

Common pattern for "Other" options in radio and checkbox groups.

Radio "Other" Pattern

When a user selects "Other", a text field appears for them to specify.

<fieldset>
  <legend>Choose an option</legend>
  <label>
    <input type="radio" 
      name="radio" value="1" />
    Option 1
  </label>
  <label>
    <input type="radio" 
      name="radio" value="2" />
    Option 2
  </label>
  <div class="other-radio">
    <label>
      <input type="radio" 
        name="radio" value="other" />
      Other
    </label>
    <form-show-if 
      conditions="radio=other">
      <label class="dependent">
        <span class="visibly-hidden">Other value</span>
        <input name="radio-other" />
      </label>
    </form-show-if>
  </div>
</fieldset>

Checkbox "Other" Pattern

Similar to radio, but works with checkbox arrays using checkbox[]=other syntax.

<fieldset>
  <legend>Choose options</legend>
  <label>
    <input type="checkbox" 
      name="checkbox[]" value="1" />
    Option 1
  </label>
  <label>
    <input type="checkbox" 
      name="checkbox[]" value="2" />
    Option 2
  </label>
  <div class="other-checkbox">
    <label>
      <input type="checkbox" 
        name="checkbox[]" 
        value="other" />
      Other
    </label>
    <form-show-if 
      conditions="checkbox[]=other">
      <label class="dependent">
        <span class="visibly-hidden">Other value</span>
        <input name="checkbox-other" />
      </label>
    </form-show-if>
  </div>
</fieldset>

Custom CSS Classes

Customize the appearance of shown and hidden fields using CSS classes instead of the hidden attribute.

Enabled Class

The enabled-class attribute adds a CSS class when the field should be visible, like enabled-class="enabled".

<form-show-if 
  conditions="email=*" 
  enabled-class="enabled">
  <label for="company">Company
    <input name="company" id="company" />
  </label>
</form-show-if>

Disabled Class

The disabled-class attribute adds a CSS class when the field should be hidden, like disabled-class="disabled".

<form-show-if 
  conditions="email=*"
  disabled-class="disabled">
  <label for="department">Department
    <input 
      name="department" 
      id="department" />
  </label>
</form-show-if>

Both Classes

Combine both classes for complete visual control over shown and hidden states.

<form-show-if 
  conditions="email=*"
  enabled-class="enabled"
  disabled-class="disabled">
  <label for="notes">Notes
    <textarea 
      name="notes" 
      id="notes"></textarea>
  </label>
</form-show-if>

Label Structure Variations

The component works with different label / input markup patterns.

Sibling Label & Input

label and input as siblings instead of the input being nested in the label.

<form-show-if 
  conditions="email=*">
  <label for="field1">
    Field label
  </label>
  <input 
    type="text" 
    id="field1" 
    name="field1" />
</form-show-if>

Label with Nested Elements

Works with labels containing one or more nested elements.

<form-show-if 
  conditions="email=*">
  <label for="field2">
    <span>Multi-part</span>
    <span>label text</span>
  </label>
  <input id="field2" name="field2" />
</form-show-if>

Label Wrapping Input

Label can wrap the input element.

<form-show-if 
  conditions="email=*">
  <label>
    <span>Wrapped input</span>
    <input name="field3" />
  </label>
</form-show-if>

Complex Examples

More advanced use cases combining multiple techniques.

Chained Dependencies

Field A shows Field B, and Field B shows Field C.

<label>Enable feature
  <input 
    type="checkbox" 
    name="enable" 
    value="yes" />
</label>

<form-show-if 
  conditions="enable=yes">
  <label for="feature-type">
    Feature type
    <select 
      name="feature-type" 
      id="feature-type">
      <option value="">Select...</option>
      <option value="basic">Basic</option>
      <option value="advanced">
        Advanced
      </option>
    </select>
  </label>
</form-show-if>

<form-show-if 
  conditions="feature-type=advanced">
  <label for="config">
    Advanced config
    <textarea 
      name="config" 
      id="config"></textarea>
  </label>
</form-show-if>

Real-World Example

A complete contact form demonstrating practical usage.

Contact Form with Conditional Fields

This form collects contact preferences and conditionally shows contact detail fields.

<form action="#">
  <label>Name
    <input type="text" 
      name="name" required />
  </label>

  <fieldset>
    <legend>
      How should we contact you?
    </legend>
    <label>
      <input type="checkbox" 
        name="contact[]" 
        value="email" />
      Email
    </label>
    <label>
      <input type="checkbox" 
        name="contact[]" 
        value="phone" />
      Phone
    </label>
  </fieldset>

  <form-show-if 
    conditions="contact[]=email">
    <label for="contact-email">
      Email address
      <input type="email" 
        name="contact-email" 
        id="contact-email" />
    </label>
  </form-show-if>

  <form-show-if 
    conditions="contact[]=phone">
    <label for="contact-phone">
      Phone number
      <input type="tel" 
        name="contact-phone" 
        id="contact-phone" />
    </label>
  </form-show-if>

  <label for="message">Message
    <textarea name="message" 
      id="message" 
      required></textarea>
  </label>

  <button type="submit">
    Send
  </button>
</form>

API Reference

For complete documentation of attributes, behavior, and browser support, see the README.