digitalmarketplace-frontend/dist/digitalmarketplace/components/list-input/template-default.html

Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects

<div class="dm-list-input">
<fieldset class="govuk-fieldset" aria-describedby=" " data-module="dm-list-input">
  <legend class="govuk-fieldset__legend dm-list-input__legend">
    What requirements are essential to carry out the work?
  </legend>
  

  <div class="dm-list-input__item-container" role="region" aria-live="assertive">
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">1</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">1</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-2">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">2</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-2" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">2</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-3">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">3</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-3" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">3</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-4">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">4</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-4" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">4</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-5">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">5</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-5" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">5</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-6">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">6</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-6" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">6</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-7">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">7</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-7" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">7</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-8">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">8</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-8" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">8</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-9">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">9</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-9" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">9</span></span>
</button>
        </div>
      </div>
<div class="dm-list-input__item dm-list-input__item--visible"><div class="dm-list-input__row">
          <div class="govuk-form-group dm-list-input__form-group">
    <label class="govuk-label dm-list-input__item-label " for="my-list-10">
      <span class="govuk-visually-hidden">What requirements are essential to carry out the work?. Number </span><span class="dm-list-input__counter">10</span>.
    </label>
    <input class="govuk-input govuk-input dm-list-input__item-input" id="my-list-10" name="requirements" type="text">
  </div>
          <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden" data-module="govuk-button">
  Remove <span class="govuk-visually-hidden">entry number <span class="dm-list-input__counter">10</span></span>
</button>
        </div>
      </div>
  </div>
  <button type="button" class="govuk-button govuk-button--secondary dm-list-input__item-add dm-list-input__item-add--hidden" data-module="govuk-button">
  Add another requirement (<span class="dm-list-input__js-remaining-counter">0</span> remaining)
</button>

</fieldset>
</div>