digitalmarketplace-frontend/dist/digitalmarketplace/components/option-tree/template-default.html

Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects

<fieldset class="govuk-fieldset dm-option-tree" data-module="dm-option-tree" aria-describedby="" data-item-name-singular="item" data-item-name-plural="items" data-tier-restriction="0" data-independent-selection="false">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
    Select the options you need
  </legend>

  <div class="dm-option-tree__summary">
    <p class="dm-option-tree__summary-total govuk-body">
      <strong class="dm-option-tree__summary-total-selected"></strong>
      <span class="dm-option-tree__summary-total-selected-text"></span>
    </p>
  </div>

  <div  id="example-options-tree" class="dm-option-tree__options">
      
  <details id="details-1" class="dm-option-tree-details">
    <summary class="dm-option-tree-details__summary dm-option-tree-details__summary-checkbox">
      <div class="dm-option-tree-details__summary-text">
        <div class="dm-option-tree-details__summary-text-label">
            <div class="govuk-checkboxes__item govuk-checkboxes--small">
              <input class="govuk-checkboxes__input" id="input-example-1-summary" type="checkbox">
              <label class="govuk-label govuk-checkboxes__label" for="input-example-1-summary">
                Option set 1
              </label>
            </div>
        </div>
      </div>
    </summary>
    <div class="dm-option-tree-details__text">
          <div class="govuk-form-group">
  <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-1" name="example" type="checkbox" value="11">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-1">
        Option set 1 option 1
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-1-2" name="example" type="checkbox" value="12">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-1-2">
        Option set 1 option 2
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-1-3" name="example" type="checkbox" value="13">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-1-3">
        Option set 1 option 3
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-1-4" name="example" type="checkbox" value="14">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-1-4">
        Option set 1 option 4
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-1-5" name="example" type="checkbox" value="15">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-1-5">
        Option set 1 option 5
      </label>
    </div>
  </div>
</div>


    </div>
  </details>

      
  <details id="details-2" class="dm-option-tree-details">
    <summary class="dm-option-tree-details__summary dm-option-tree-details__summary-checkbox">
      <div class="dm-option-tree-details__summary-text">
        <div class="dm-option-tree-details__summary-text-label">
            <div class="govuk-checkboxes__item govuk-checkboxes--small">
              <input class="govuk-checkboxes__input" id="input-example-2-summary" type="checkbox">
              <label class="govuk-label govuk-checkboxes__label" for="input-example-2-summary">
                Option set 2
              </label>
            </div>
        </div>
      </div>
    </summary>
    <div class="dm-option-tree-details__text">
          <div class="govuk-form-group">
  <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-2" name="example" type="checkbox" value="21">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-2">
        Option set 2 option 1
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-2-2" name="example" type="checkbox" value="22">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-2-2">
        Option set 2 option 2
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-2-3" name="example" type="checkbox" value="23">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-2-3">
        Option set 2 option 3
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-2-4" name="example" type="checkbox" value="24">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-2-4">
        Option set 2 option 4
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-2-5" name="example" type="checkbox" value="25">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-2-5">
        Option set 2 option 5
      </label>
    </div>
  </div>
</div>


    </div>
  </details>

      
  <details id="details-3" class="dm-option-tree-details">
    <summary class="dm-option-tree-details__summary dm-option-tree-details__summary-checkbox">
      <div class="dm-option-tree-details__summary-text">
        <div class="dm-option-tree-details__summary-text-label">
            <div class="govuk-checkboxes__item govuk-checkboxes--small">
              <input class="govuk-checkboxes__input" id="input-example-3-summary" type="checkbox">
              <label class="govuk-label govuk-checkboxes__label" for="input-example-3-summary">
                Option set 3
              </label>
            </div>
        </div>
      </div>
    </summary>
    <div class="dm-option-tree-details__text">
          <div class="govuk-form-group">
  <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-3" name="example" type="checkbox" value="31">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-3">
        Option set 3 option 1
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-3-2" name="example" type="checkbox" value="32">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-3-2">
        Option set 3 option 2
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-3-3" name="example" type="checkbox" value="33">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-3-3">
        Option set 3 option 3
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-3-4" name="example" type="checkbox" value="34">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-3-4">
        Option set 3 option 4
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="input-example-3-5" name="example" type="checkbox" value="35">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-3-5">
        Option set 3 option 5
      </label>
    </div>
  </div>
</div>


    </div>
  </details>

  </div>

</fieldset>