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">
  <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">


            


            


            


          <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-example">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="accordion-example-heading-1">
          Option set 1
        </span>
      </h2>
      <div class="govuk-accordion__section-summary govuk-body" id="accordion-example-summary-1">
        5 categories<span class="dm-checkbox-tree__options-number-selected"></span>
      </div>
    </div>
    <div id="accordion-example-content-1" class="govuk-accordion__section-content">
      <div class="govuk-form-group">
        <div class="govuk-checkboxes" 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>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="accordion-example-heading-2">
          Option set 2
        </span>
      </h2>
      <div class="govuk-accordion__section-summary govuk-body" id="accordion-example-summary-2">
        5 categories<span class="dm-checkbox-tree__options-number-selected"></span>
      </div>
    </div>
    <div id="accordion-example-content-2" class="govuk-accordion__section-content">
      <div class="govuk-form-group">
        <div class="govuk-checkboxes" 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>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="accordion-example-heading-3">
          Option set 3
        </span>
      </h2>
      <div class="govuk-accordion__section-summary govuk-body" id="accordion-example-summary-3">
        5 categories<span class="dm-checkbox-tree__options-number-selected"></span>
      </div>
    </div>
    <div id="accordion-example-content-3" class="govuk-accordion__section-content">
      <div class="govuk-form-group">
        <div class="govuk-checkboxes" 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>
  </div>
</div>

      </div>
    </div>

</fieldset>
</div>

</div>