digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
325 lines (276 loc) • 12.9 kB
HTML
<div
class="question "
id="multiquestion-3"
>
<fieldset class="govuk-fieldset">
<div
class="question "
id="example-3"
data-module="dm-question">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
Here is the service question
</legend>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-3" name="example-3" type="checkbox" value="option-1" data-target="exampleText-3">
<label class="govuk-label govuk-checkboxes__label" for="input-example-3">
Option 1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-3-2" name="example-3" type="checkbox" value="option-2" data-target="exampleTextbox-3 exampleList-3">
<label class="govuk-label govuk-checkboxes__label" for="input-example-3-2">
Option 2
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="input-example-3-3" name="example-3" type="checkbox" value="option-3" data-target="exampleText2-3">
<label class="govuk-label govuk-checkboxes__label" for="input-example-3-3">
Option 3
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div
class="question js-hidden dm-question__related-information" aria-hidden="false"
id="exampleText-3"
hidden>
<div class="govuk-form-group">
<label class="govuk-label govuk-label--m" for="input-exampleText-3">
Here is the service question text
</label>
<input class="govuk-input" id="input-exampleText-3" name="exampleText-3" type="text">
</div>
</div>
<div
class="question js-hidden dm-question__related-information" aria-hidden="false"
id="exampleTextbox-3"
hidden>
<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxwords="500">
<label class="govuk-label govuk-label--m" for="input-exampleTextbox-3">
Here is the service question
</label>
<textarea class="govuk-textarea govuk-js-character-count" id="input-exampleTextbox-3" name="exampleTextbox-3" rows="5" aria-describedby="input-exampleTextbox-3-info"></textarea>
<div id="input-exampleTextbox-3-info" class="govuk-hint govuk-character-count__message">
You can enter up to 500 words
</div>
</div>
</div>
<div
class="question js-hidden dm-question__related-information" aria-hidden="false"
id="exampleList-3"
hidden>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset dm-list" data-module="dm-question-list" data-max-number-of-items="10" data-number-of-items-shown-as-default="2" aria-describedby="">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
Here is the service question
</legend>
<div class="dm-list__items">
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-0">
Entry number <span class="dm-list__item-label-counter">1</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">1.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-0" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">1</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-1">
Entry number <span class="dm-list__item-label-counter">2</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">2.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-1" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">2</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-2">
Entry number <span class="dm-list__item-label-counter">3</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">3.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-2" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">3</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-3">
Entry number <span class="dm-list__item-label-counter">4</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">4.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-3" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">4</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-4">
Entry number <span class="dm-list__item-label-counter">5</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">5.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-4" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">5</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-5">
Entry number <span class="dm-list__item-label-counter">6</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">6.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-5" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">6</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-6">
Entry number <span class="dm-list__item-label-counter">7</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">7.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-6" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">7</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-7">
Entry number <span class="dm-list__item-label-counter">8</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">8.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-7" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">8</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-8">
Entry number <span class="dm-list__item-label-counter">9</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">9.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-8" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">9</span></span>
</button>
</div>
</div>
<div class="govuk-grid-row dm-list__item">
<div class="dm-list__item-input-column">
<div class="govuk-form-group">
<label class="govuk-label govuk-visually-hidden" for="input-exampleList-3-9">
Entry number <span class="dm-list__item-label-counter">10</span>
</label>
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">10.</div>
<input class="govuk-input dm-list__item-input" id="input-exampleList-3-9" name="exampleList-3" type="text">
</div>
</div>
</div>
<div class="dm-list__item-remove-column">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden" data-module="govuk-button">
Remove <span class="govuk-visually-hidden">entry number <span class="dm-list__item-remove-counter">10</span></span>
</button>
</div>
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<button type="button" class="govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden" data-module="govuk-button">
Add another (<span class="dm-list__item-add-counter">0</span> remaining)
</button>
</div>
</div>
</fieldset>
</div>
</div>
<div
class="question js-hidden dm-question__related-information" aria-hidden="false"
id="exampleText2-3"
hidden>
<div class="govuk-form-group">
<label class="govuk-label govuk-label--m" for="input-exampleText2-3">
Here is the second service question text
</label>
<input class="govuk-input" id="input-exampleText2-3" name="exampleText2-3" type="text">
</div>
</div>
</fieldset>
</div>