Postcode lookup
This is postcode lookup
Example
Please enter a valid postcode
Markup: components/postcode-lookup/postcode-lookup.twig
<div class="form__row--address-lookup">
<div class="form__field--wrapper form__text form__field--postcode">
<div class="search-box form__field--wrapper">
<label class="form__field form__field--postcode form__text required" id="postcode-label" for="comicrelief_payinbundle_payment_postcode">Postcode</label>
<div class="form__field--postcode">
<input
type="text"
id="comicrelief_payinbundle_payment_postcode"
name="comicrelief_payinbundle_payment[postcode]"
required="required"
placeholder="SE1 7TP"
class="form__field form__field--text"
/>
<div class="form__btn">
<input
type="button"
id="postcode_button"
name="btnPostcodeSearch"
class="btnPostcodeSearch btn form__btn--postcode"
value="FIND ADDRESS"
/>
</div>
</div>
</div>
<a role="button" href="" class="form__btn--address-detail link">Or enter your address manually</a>
</div>
<div class="form__field--wrapper form__text form__field--postcode">
<div class="search-box form__field--wrapper">
<label class="form__field form__field--postcode form__text required" id="postcode-label" for="comicrelief_payinbundle_payment_postcode">Postcode</label>
<div class="form__field--postcode">
<input
type="text"
id="comicrelief_payinbundle_payment_postcode"
name="comicrelief_payinbundle_payment[postcode]"
required="required"
placeholder="SE1 7TP"
class="form__field form__field--text form__field--error-outline"
/>
<div class="form__btn">
<input
type="button"
id="postcode_button"
name="btnPostcodeSearch"
class="btnPostcodeSearch btn form__btn--postcode"
value="FIND ADDRESS"
/>
</div>
</div>
<div id="postcode-error" class="error-container js-error has-error" aria-live="assertive" role="status">
<span class="help-block form-error">Please enter a valid postcode</span>
</div>
</div>
<a role="button" href="" class="form__btn--address-detail link">Or enter your address manually</a>
</div>
</div>
Source:
_shop19-styleguide.scss
, line 195