digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
196 lines (170 loc) • 7.6 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" 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 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>
</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 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>
</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 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>
</details>
</div>
</div>
</fieldset>
</div>