<!-- Default -->
<div class="text-input ">
    <div class="text-input__pre">
        <label class="text-input__label" for="shopifyUrl">Shopify Url</label>
    </div>
    <div class="text-input__inner">
        <input type="" class="text-input__input" placeholder="my-shopify-shop" name="shopify-url" id="shopifyUrl" />
        <p class="text-input__appendix">.myshopify.com</p>
    </div>
</div>

<!-- Small -->
<div class="text-input text-input-small">
    <div class="text-input__pre">
        <label class="text-input__label" for="shopifyUrl">Shopify Url</label>
    </div>
    <div class="text-input__inner">
        <input type="" class="text-input__input" placeholder="my-shopify-shop" name="shopify-url" id="shopifyUrl" />
        <p class="text-input__appendix">.myshopify.com</p>
    </div>
</div>

<div class="text-input {{class}}">
	{{> @input-pre}}
	{{> @input-inner}}
</div>
/* Default */
{
  "label": "Shopify Url",
  "placeholder": "my-shopify-shop",
  "name": "shopify-url",
  "id": "shopifyUrl",
  "appendix": ".myshopify.com"
}

/* Small */
{
  "label": "Shopify Url",
  "placeholder": "my-shopify-shop",
  "name": "shopify-url",
  "id": "shopifyUrl",
  "appendix": ".myshopify.com",
  "class": "text-input-small"
}

Domain Input

A Domain Input accepts a valid subdomain under the specified domain.

Guidelines:

  • Don’t overcorrect the user; if the value is copy-pasted and includes the parent domain, either leave it intact or remove the domain on blur. Don’t show an error message if it can be avoided.

When to use:

Only use a Domain Input when asking for a subdomain.

When not to use:

  • When not asking for a subdomain; use another type of input