UTS Style Guide

5.9 Conditional Field View in a new window

Example

Show Next Field? Yes No

Markup

<div class="js-conditional-field fieldset__row">
  {% block content %}
    <div class="conditional-field__control">
      <span class="fieldset__field-title">Show Next Field?</span>
      <label for="control-field-yes">
        <input type="radio" name="control-field[]" id="control-field-yes" data-conditional-show="conditional-field-2-container"> Yes
      </label>
      <label for="control-field-no">
        <input type="radio" name="control-field[]" id="control-field-no" data-conditional-hide="conditional-field-2-container"> No
      </label>
    </div>
    <label for="conditional-field-2" class="visually-hidden" data-conditional-wrapper="conditional-field-2-container">
        Field Label 2
        <input type="text" id="conditional-field-2">
    </label>
  {% endblock %}
</div>