digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
249 lines (214 loc) • 10.1 kB
HTML
<fieldset class="govuk-fieldset dm-option-tree" data-module="dm-option-tree" aria-describedby="input-example-hint" data-item-name-singular="option" data-item-name-plural="options" data-tier-restriction="2" data-independent-selection="true">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Select the options you need
</legend>
<div id="input-example-hint" class="govuk-hint">
Selecting an option searches across all its sub-options
</div>
<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">
<div class="dm-option-tree-details__summary-text">
<div class="dm-option-tree-details__summary-text-label">
Option set 1
</div>
</div>
</summary>
<div class="dm-option-tree-details__text">
<details id="details-1-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-1-summary" type="checkbox" name="example" value="option set 1 1" checked>
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-1-summary">
Option set 1 1
</label>
</div>
</div>
</div>
</summary>
<div class="dm-option-tree-details__text">
<details id="details-1-1-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-1-1-summary" type="checkbox" name="example" value="option set 1 1 1">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-1-1-summary">
Option set 1 1 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-1-1" name="example" type="checkbox" value="1111">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-1-1">
Option set 1 1 1 1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-1-1-1-2" name="example" type="checkbox" value="1112">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-1-1-2">
Option set 1 1 1 2
</label>
</div>
</div>
</div>
</div>
</details>
<details id="details-1-1-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-1-1-2-summary" type="checkbox" name="example" value="option set 1 1 2">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-1-2-summary">
Option set 1 1 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-1-1-2" name="example" type="checkbox" value="1121">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-1-2">
Option set 1 1 2 1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-1-1-2-2" name="example" type="checkbox" value="1122">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-1-2-2">
Option set 1 1 2 2
</label>
</div>
</div>
</div>
</div>
</details>
</div>
</details>
<details id="details-1-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-1-2-summary" type="checkbox" name="example" value="option set 1 2">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-2-summary">
Option set 1 2
</label>
</div>
</div>
</div>
</summary>
<div class="dm-option-tree-details__text">
<details id="details-1-2-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-2-1-summary" type="checkbox" name="example" value="option set 1 2 1">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-2-1-summary">
Option set 1 2 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-2-1" name="example" type="checkbox" value="1211">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-2-1">
Option set 1 2 1 1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-1-2-1-2" name="example" type="checkbox" value="1212">
<label class="govuk-label govuk-checkboxes__label" for="input-example-1-2-1-2">
Option set 1 2 1 2
</label>
</div>
</div>
</div>
</div>
</details>
</div>
</details>
</div>
</details>
<details id="details-2" class="dm-option-tree-details">
<summary class="dm-option-tree-details__summary">
<div class="dm-option-tree-details__summary-text">
<div class="dm-option-tree-details__summary-text-label">
Option set 2
</div>
</div>
</summary>
<div class="dm-option-tree-details__text">
<details id="details-2-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-2-1-summary" type="checkbox" name="example" value="option set 2 1">
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-1-summary">
Option set 2 1
</label>
</div>
</div>
</div>
</summary>
<div class="dm-option-tree-details__text">
<details id="details-2-1-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-2-1-1-summary" type="checkbox" name="example" value="option set 2 1 1">
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-1-1-summary">
Option set 2 1 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-2-1-1" name="example" type="checkbox" value="2111">
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-1-1">
Option set 2 1 1 1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-2-1-1-2" name="example" type="checkbox" value="2112">
<label class="govuk-label govuk-checkboxes__label" for="input-example-2-1-1-2">
Option set 2 1 1 2
</label>
</div>
</div>
</div>
</div>
</details>
</div>
</details>
</div>
</details>
</div>
</fieldset>