digitalmarketplace-frontend/dist/digitalmarketplace/components/question/template-checkbox-tree-default.html

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

<div
  class="question "
  id="example"
>
    



<div class="govuk-form-group">
<fieldset class="govuk-fieldset dm-checkbox-tree" data-module="dm-question-checkbox-tree" aria-describedby="" data-item-name-singular="category" data-item-name-plural="categories" data-tier-restriction="">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
    Here is the service question
  </legend>


    <div class="govuk-grid-row">
      <div class="dm-checkbox-tree__summary govuk-grid-column-one-third">
          <p class="govuk-body">
            You can choose up to 10 categories.
          </p>
        <p class="dm-checkbox-tree__summary-total govuk-body">
          <strong class="dm-checkbox-tree__summary-total-selected"></strong>
          <span class="dm-checkbox-tree__summary-total-selected-text"></span>
        </p>
      </div>
      <div class="dm-checkbox-tree__options govuk-grid-column-two-thirds">
              <details id="details-1" class="dm-checkbox-tree-details">
    <summary class="dm-checkbox-tree-details__summary">
      <div class="dm-checkbox-tree-details__summary-text">
        <div class="dm-checkbox-tree-details__summary-text-label">
          Option set 1
        </div>
        <div class="dm-checkbox-tree-details__summary-text-count">
          <strong class="govuk-tag govuk-tag--green govuk-visually-hidden">
  <span class="dm-checkbox-tree-details__summary-text-count-selected"></span> selected
</strong>

        </div>
      </div>
    </summary>
    <div class="dm-checkbox-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="Option set 1 option 1">
      <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="Option set 1 option 2">
      <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="Option set 1 option 3">
      <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="Option set 1 option 4">
      <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="Option set 1 option 5">
      <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-checkbox-tree-details">
    <summary class="dm-checkbox-tree-details__summary">
      <div class="dm-checkbox-tree-details__summary-text">
        <div class="dm-checkbox-tree-details__summary-text-label">
          Option set 2
        </div>
        <div class="dm-checkbox-tree-details__summary-text-count">
          <strong class="govuk-tag govuk-tag--green govuk-visually-hidden">
  <span class="dm-checkbox-tree-details__summary-text-count-selected"></span> selected
</strong>

        </div>
      </div>
    </summary>
    <div class="dm-checkbox-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="Option set 2 option 1">
      <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="Option set 2 option 2">
      <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="Option set 2 option 3">
      <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="Option set 2 option 4">
      <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="Option set 2 option 5">
      <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-checkbox-tree-details">
    <summary class="dm-checkbox-tree-details__summary">
      <div class="dm-checkbox-tree-details__summary-text">
        <div class="dm-checkbox-tree-details__summary-text-label">
          Option set 3
        </div>
        <div class="dm-checkbox-tree-details__summary-text-count">
          <strong class="govuk-tag govuk-tag--green govuk-visually-hidden">
  <span class="dm-checkbox-tree-details__summary-text-count-selected"></span> selected
</strong>

        </div>
      </div>
    </summary>
    <div class="dm-checkbox-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="Option set 3 option 1">
      <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="Option set 3 option 2">
      <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="Option set 3 option 3">
      <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="Option set 3 option 4">
      <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="Option set 3 option 5">
      <label class="govuk-label govuk-checkboxes__label" for="input-example-3-5">
        Option set 3 option 5
      </label>
    </div>
  </div>
</div>


    </div>
  </details>

      </div>
    </div>

</fieldset>
</div>

</div>