in available credit

Go Back
skip navigation

Input Header

Input Header

Required

Input Header

Input Detail

Input Header

Input DetailRequired

Comments

A header will generally be paired with each Input element.

Render with Liquid

{%-
  render "component--input-header",
  header_title: "",           // default: nil
  header_detail: "",          // default: nil
  header_required: ""         // default: false
-%}

Markup

<div class="input-header">
  <p class="input-header--title p_2 p_2--bold"> {{ header_title }} </p>
  <p>
    {%- if header_detail -%}
      <span class="input-header--detail p_2 p_2--bold"> {{ header_detail }} </span>
    {%- endif -%}
    {%- if header_required -%}
      <span class="input-header--required p_3"> Required </span>
    {%- endif -%}
  </p>
</div>

Checkbox

Comments

Checkboxes can be be grouped. The trade form has error checking for if only one needs to be checked to pass validation.

Render with Liquid

{%-
  render "component--input-checkbox",
  placeholder: "",           // default: value
  id: "",                    // default: nil
  class:"",                  // default: nil
  name: "",                  // default: nil
  value: "",                 // default: nil
  is_required: ""            // default: false
-%}

Markup

<div class="input-checkbox--wrapper checkbox
  {%- if class -%} {{ class }} {%- endif -%} ">
  <label for="{{ id }}"
          class="input-checkbox--label p_2">
    <input type="checkbox"
            class="input-checkbox--input"
            {%- if  id -%} id="{{ id }}" {%- endif -%}
            {%- if  name -%} name="{{ name }}" {%- endif -%}
            {%- if  value -%} value="{{ value }}" {%- endif -%}
            {%- if  is_required -%} required {%- endif -%} />

    <svg class="icon--checkmark"
          xmlns="http://www.w3.org/2000/svg"
          width="12"
          height="12"
          fill="none"
          viewBox="0 0 12 12">
      <path  d="M4.5 10.518L0 6.197l1.395-1.435L4.473 7.7l6.106-6.218L12 2.891l-7.5 7.627z"/>
    </svg>

    {%- if placeholder -%}
      <span class="input-checkbox--text"> {{ placeholder }} </span>
    {%- endif -%}
  </label>
</div>

Text Input

Input Header

with helper text

Please enter a valid company name

If your order number looks like BK12345678910S1234567, please only include the portion before 'S'. I.e. BK12345678910

Input Header

without helper text

Please enter a valid company name

Comments

Password, phone number, and email input are variations of this.

Render with Liquid

{%-
  render "component--input-text",
  type: "text",              // default: "text"
  name: "",                  // default: nil
  id: "",                    // default: nil
  class: "",                 // default: nil
  value: "",                 // default: nil
  placeholder: "",           // default: nil
  aria_label: "",            // default: "placeholder"
  message_validation: "",    // default: nil
  message_error: "",         // default: nil
  helper_text: "",           // default: nil
  is_required: "",           // default: false
  autocapitalize: "",        // default: nil
-%}

Markup

<div class="{{ type }}-input--wrapper">
  <input type="{{ type }}"
    class="{{ type }}-input p_2
    {%- if class -%} {{ class }} {%- endif -%}
    {%- if message_error -%} error {%- endif -%}
    {%- if helper_text -%} helper {%- endif -%}
    {%- if placeholder -%} has-placeholder {%- endif -%}"
    {%- if value -%} value="{{ value }}" {%- endif -%}
    {%- if placeholder -%} placeholder="&nbsp;" {%- endif -%}
    {%- if name -%} name="{{ name }}" {%- endif -%}
    {%- if id -%} id="{{ id }}" {%- endif -%}
    {%- if aria_label -%} aria-label="{{ aria-label }}" {%- endif -%}
    {%- if is_required -%} required {%- endif -%}
    {%- if autocapitalize -%} autocapitalize={{ autocapitalize }} {%- endif -%}
    {%- if message_validation %} data-validate {%- endif -%}>

  <label for="{{ id }}"
          class="{{ type }}-input--placeholder p_2">
          {{ placeholder }}
  </label>

  <div class="{{ type }}-input--message p_3">
    <span>
      {%- if message_error -%}
        {%- for field in message_error -%}
          {{ message_error.messages[field] }}
        {%- endfor -%}
      {%- elsif message_validation -%}
        {{ message_validation }}
      {%- endif -%}
    </span>
  </div>
  <div class="{{ type }}-input--helper p_3">
    <p>
      {%- if helper_text -%}
        {{ helper_text }}
      {%- endif -%}
    </p>
  </div>
</div>

Password

Comments

Variation of Text Input

Render with Liquid

{%-
  render "component--input-password",
  type: "password",          // "password"
  name: "",                  // default: "customer[password]"
  id: "",                    // default: "CustomerPassword"
  class: "",                 // default: nil
  value: "",                 // default: nil
  placeholder: "",           // default: "Password"
  aria_label: "",            // default: placeholder
  message_validation: "",    // default: nil
  message_error: "",         // default: nil
  helper_text: "",           // default: nil
  is_required: "",           // default: true
  autocapitalize: "",        // default: nil
-%}

Markup

<div class="{{ type }}-input--wrapper">
  <input type="{{ type }}"
    class="{{ type }}-input p_2
    {%- if class -%} {{ class }} {%- endif -%}
    {%- if message_error -%} error {%- endif -%}
    {%- if placeholder -%} has-placeholder {%- endif -%}"
    {%- if value -%} value="{{ value }}" {%- endif -%}
    {%- if placeholder -%} placeholder="&nbsp;" {%- endif -%}
    {%- if name -%} name="{{ name }}" {%- endif -%}
    {%- if id -%} id="{{ id }}" {%- endif -%}
    {%- if aria_label -%} aria-label="{{ aria-label }}" {%- endif -%}
    {%- if is_required -%} required {%- endif -%}
    {%- if autocapitalize -%} autocapitalize={{ autocapitalize }} {%- endif -%}
    {%- if message_validation %} data-validate {%- endif -%}>

  <label for="{{ id }}"
          class="{{ type }}-input--placeholder p_2">
          {{ placeholder }}
  </label>

  <div class="{{ type }}-input--message p_3">
    <span>
      {%- if message_error -%}
        {%- for field in message_error -%}
          {{ message_error.messages[field] }}
        {%- endfor -%}
      {%- elsif message_validation -%}
        {{ message_validation }}
      {%- endif -%}
    </span>
  </div>
  <div class="{{ type }}-input--helper p_3">
    <p>
      {%- if helper_text -%}
        {{ helper_text }}
      {%- endif -%}
    </p>
  </div>
</div>

Email Input

Default Email Input

Email Input with helper text

Comments

Not to be confused with the Email Capture

Render with Liquid

{%-
  render "component--input-email",
  type: "email",             // default: "email"
  name: "",                  // default: "customer[email]"
  id: "",                    // default: "CustomerEmail"
  class: "",                 // default: nil
  value: "",                 // default: nil
  placeholder: "",           // default: "Email"
  aria_label: "",            // default: "placeholder"
  message_validation: "",    // default: "Please enter a valid email."
  message_error: "",         // default: nil
  helper_text: "",           // default: nil
  is_required: "",           // default: true
  autocapitalize: "",        // default: nil
-%}

Markup

<div class="{{ type }}-input--wrapper">
  <input type="{{ type }}"
    class="{{ type }}-input p_2
    {%- if class -%} {{ class }} {%- endif -%}
    {%- if message_error -%} error {%- endif -%}
    {%- if helper_text -%} helper {%- endif -%}
    {%- if placeholder -%} has-placeholder {%- endif -%}"
    {%- if value -%} value="{{ value }}" {%- endif -%}
    {%- if placeholder -%} placeholder="&nbsp;" {%- endif -%}
    {%- if name -%} name="{{ name }}" {%- endif -%}
    {%- if id -%} id="{{ id }}" {%- endif -%}
    {%- if aria_label -%} aria-label="{{ aria-label }}" {%- endif -%}
    {%- if is_required -%} required {%- endif -%}
    {%- if autocapitalize -%} autocapitalize={{ autocapitalize }} {%- endif -%}
    {%- if  message_validation %} data-validate {%- endif -%}>

  <label for="{{ id }}"
          class="{{ type }}-input--placeholder p_2">
          {{ placeholder }}
  </label>

  <div class="{{ type }}-input--message p_3">
    <span>
      {%- if message_error -%}
        {%- for field in message_error -%}
          {{ message_error.messages[field] }}
        {%- endfor -%}
      {%- elsif message_validation -%}
        {{ message_validation }}
      {%- endif -%}
    </span>
  </div>
  <div class="{{ type }}-input--helper p_3">
    <p>
      {%- if helper_text -%}
        {{ helper_text }}
      {%- endif -%}
    </p>
  </div>
</div>

Phone Number Input

Please enter your phone number.

Comments

Variation of Text Input

Render with Liquid

{%-
  render "component--input-phone",
  type: "tel",               // default: "tel"
  name: "",                  // default: "address[phone]"
  id: "",                    // default: "AddressPhone"
  class: "",                 // default: nil
  value: "",                 // default: nil
  placeholder: "",           // default: "Phone"
  aria_label: "",            // default: "placeholder"
  message_validation: "",    // default: "Please enter your phone number."
  message_error: "",         // default: nil
  is_required: "",           // default: false
  autocapitalize: "",        // default: nil
-%}

Markup

<div class="{{ type }}-input--wrapper">
  <input type="{{ type }}"
    class="{{ type }}-input p_2
    {%- if class -%} {{ class }} {%- endif -%}
    {%- if message_error -%} error {%- endif -%}
    {%- if helper_text -%} helper {%- endif -%}
    {%- if placeholder -%} has-placeholder {%- endif -%}"
    {%- if value -%} value="{{ value }}" {%- endif -%}
    {%- if placeholder -%} placeholder="&nbsp;" {%- endif -%}
    {%- if name -%} name="{{ name }}" {%- endif -%}
    {%- if id -%} id="{{ id }}" {%- endif -%}
    {%- if aria_label -%} aria-label="{{ aria-label }}" {%- endif -%}
    {%- if is_required -%} required {%- endif -%}
    {%- if autocapitalize -%} autocapitalize={{ autocapitalize }} {%- endif -%}
    {%- if message_validation %} data-validate {%- endif -%}>

  <label for="{{ id }}"
          class="{{ type }}-input--placeholder p_2">
          {{ placeholder }}
  </label>

  <div class="{{ type }}-input--message p_3">
    <span>
      {%- if message_error -%}
        {%- for field in message_error -%}
          {{ message_error.messages[field] }}
        {%- endfor -%}
      {%- elsif message_validation -%}
        {{ message_validation }}
      {%- endif -%}
    </span>
  </div>
  <div class="{{ type }}-input--helper p_3">
    <p>
      {%- if helper_text -%}
        {{ helper_text }}
      {%- endif -%}
    </p>
  </div>
</div>

Radio Bar Input

Comments

This is only used once on the trade form. Might be legacy.

<div class="radio-toolbar form-toggles" style="border: 1px solid white;">
  <input class="input--radio-btn trade p_2 p_2--bold"
           type="radio"
           id="tradeToggle"
           name="TradeAccountType"
           value="Trade" checked>
  <label class="input--radio-label trade p_2 p_2--bold"
           for="tradeToggle">
          Trade
  </label>

  <input class="input--radio-btn hosp p_2 p_2--bold"
           type="radio"
           id="hospToggle"
           name="TradeAccountType"
           value="Hospitality">
  <label class="input--radio-label hosp p_2 p_2--bold"
           for="hospToggle">
          Hospitality
  </label>

  <input class="input--radio-btn whole p_2 p_2--bold"
          type="radio"
          id="wholesaleToggle"
          name="TradeAccountType"
          value="Wholesale">
  <label class="input--radio-label whole p_2 p_2--bold"
          for="wholesaleToggle">
          Wholesale
  </label>
</div>

Submit Button

Comments

The timestamp is specific to the trade form, but available to all.

Render with Liquid

{%-
  render "component--input-submit-btn",
  id: "",                    // default: nil
  class: "",                 // default: "btn btn--primary"
  value: "",                 // default: nil
  dy_event: "",              // default: nil
  include_timestamp: ""      // default: false
-%}

Markup

<div class="input--wrapper">
  <div class="input--submit">
    <input class="submit"
            type="submit"
            {%- if id -%} id="{{ id }}" {%- endif -%}
            {%- if value -%} value="{{ value }}" {%- endif -%}
            {%- if data-dy-event -%} data-dy-event="{{ data-dy-event }}" {%- endif -%} />

    {%- if include_timestamp -%}
      <input type="hidden" name="Timestamp" value="{{ 'now' | date: '%D - %T' %%" />
      <input type="hidden" name="blank" value="" />
    {%- endif -%}
  </div>
</div>

Select

Select Primary

with Fixed Placeholder

Select Primary disabled placeholder

with Option Placeholder

Select Primary Small

without Placeholder

Select Secondary

without Placeholder

Select Secondary

with Fixed Placeholder

Select Secondary

with Option Placeholder

Select Secondary Small

without Placeholder

Comments

This is one of the only inputs that has styling variations.
They are all displayed here with corresponding headers.
the options for "style" are ::
select-primary (default)
select-primary--small
select-secondary
select-secondary--small
These correspond to styles so must be entered as above.

Render with Liquid

{%-
  render "component--select",
  type: "select",
  id: "",                    // default: nil
  class: "",                 // default: nil
  name: "",                  // default: nil
  options_list: "",             // default: nil
  placeholder: "",           // default: nil
  aria_label: "",            // default: placeholder
  data_default: "",          // default: nil
  is_required: ""            // default: false
-%}

Markup

<div class="{{ type }}-input--wrapper" >
  <select {%- if id -%} id="{{ id }}" {%- endif -%}
    class="{{ type }}-input
    {%- if  class -%}  {{ class }}  {%- endif -%}
    {%- if  placeholder -%} has-placeholder {%- endif -%}"
    {%- if  name -%}  name="{{ name }}" {%- endif -%}
    {%- if  data_default -%} data-default="{{ data_default %% " {%- endif -%}
    {%- if  is_required -%} required {%- endif -%} >

    {%- if options_list -%}
      {{ options_list }}
    {%- endif -%}
  </select>

  <svg version="1.1"
        id="Layer_1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 12.8 22.7">
    <path class="st0" d="M2.7,22.2c-0.6,0.6-1.6,0.6-2.2,0c-0.6-0.6-0.6-1.6,0-2.2l7.7-8c0.4-0.4,0.4-1,0-1.4l-7.7-8
    c-0.6-0.6-0.6-1.6,0-2.2c0.6-0.6,1.6-0.6,2.3,0L12,10c0.8,0.8,0.8,2,0,2.8C12,12.8,2.7,22.2,2.7,22.2z"/>
  </svg>

  {%- if placeholder -%}
    <label for="{{ id }}"
            class="select-input--placeholder">
            {{ placeholder }}
    </label>
  {%- endif -%}
</div>

Email Capture

This pushes the email to emarsys. The script has a key in it, so it's not included here.

Render with Liquid

{%-
  render "component--email-capture",
  section: 'footer',
-%}

Markup

<section class="component--email-capture">

  <form class="{{ capture_api }}-form--{{ section }} email-capture" action="post">
    <div class="input-wrapper">
      {%- render "component--input-email", id:"EmailCapture" name: "email" -%}

      <button type="submit" class="email-input--submit" data-dy-event="newsletter" data-transition='trigger = hover | style = grow-20 | duration = faster' >
        {%- render "svg", id:"icon--email-submit" -%}
      </button>
    </div>
  </form>

submit script goes here

</section>
<p class="hide email-response--{{ section }} p_3"> </p>
Your Cart

Hi, want 10% off? Hi, want 10% off?

Don`t miss the best sleep of your life. Don`t miss the best sleep of your life.

Great! Great!

Simply confirm your email to access your 10% off Simply confirm your email to access your 10% off

You’re in!

Complete your sign up by submitting your phone number below (optional) Complete your sign up by submitting your phone number below (optional)

Something went wrong

You`re all set! You`re all set!

It`s time to start shopping. It`s time to start shopping.