digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
184 lines (166 loc) • 8.04 kB
HTML
<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 1">
<label class="govuk-label govuk-checkboxes__label" for="input-example-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 2">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-2">
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 3">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-3">
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 4">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-4">
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 5" checked>
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-5">
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 5" checked>
<label class="govuk-label govuk-checkboxes__label" for="input-example-2">
Option 5
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-2-2" name="example" type="checkbox" value="Option 6">
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-2">
Option 6
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-2-3" name="example" type="checkbox" value="Option 7">
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-3">
Option 7
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-2-4" name="example" type="checkbox" value="Option 8" checked>
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-4">
Option 8
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-2-5" name="example" type="checkbox" value="Option 9" checked>
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-5">
Option 9
</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 9" checked>
<label class="govuk-label govuk-checkboxes__label" for="input-example-3">
Option 9
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-3-2" name="example" type="checkbox" value="Option 10">
<label class="govuk-label govuk-checkboxes__label" for="input-example-3-2">
Option 10
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-3-3" name="example" type="checkbox" value="Option 11">
<label class="govuk-label govuk-checkboxes__label" for="input-example-3-3">
Option 11
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-3-4" name="example" type="checkbox" value="Option 12">
<label class="govuk-label govuk-checkboxes__label" for="input-example-3-4">
Option 12
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-3-5" name="example" type="checkbox" value="Option 13">
<label class="govuk-label govuk-checkboxes__label" for="input-example-3-5">
Option 13
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>