Demo input components
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 t5"> {{ header_title }} </p>
<p>
{%- if header_detail -%}
<span class="input-header--detail t5"> {{ header_detail }} </span>
{%- endif -%}
{%- if header_required -%}
<span class="input-header--required p6"> 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 p5">
<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
If your order number looks like BK12345678910S1234567, please only include the portion before 'S'. I.e. BK12345678910
Input Header
without helper text
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 p5
{%- 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=" " {%- 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 p5">
{{ placeholder }}
</label>
<div class="{{ type }}-input--message p6">
<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 p6">
<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 p5
{%- if class -%} {{ class }} {%- endif -%}
{%- if message_error -%} error {%- endif -%}
{%- if placeholder -%} has-placeholder {%- endif -%}"
{%- if value -%} value="{{ value }}" {%- endif -%}
{%- if placeholder -%} placeholder=" " {%- 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 p5">
{{ placeholder }}
</label>
<div class="{{ type }}-input--message p6">
<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 p6">
<p>
{%- if helper_text -%}
{{ helper_text }}
{%- endif -%}
</p>
</div>
</div>Email Input
Default Email Input
Email Input with helper text
Use email associated with the order
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 p5
{%- 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=" " {%- 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 p5">
{{ placeholder }}
</label>
<div class="{{ type }}-input--message p6">
<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 p6">
<p>
{%- if helper_text -%}
{{ helper_text }}
{%- endif -%}
</p>
</div>
</div>Phone Number Input
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 p5
{%- 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=" " {%- 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 p5">
{{ placeholder }}
</label>
<div class="{{ type }}-input--message p6">
<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 p6">
<p>
{%- if helper_text -%}
{{ helper_text }}
{%- endif -%}
</p>
</div>
</div>Radio Bar Input
For designers, decorators, and interior pros. Apply to get exclusive discounts, tax exemptions, and a dedicated staff member to ensure you get exactly what you need.
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 t5"
type="radio"
id="tradeToggle"
name="TradeAccountType"
value="Trade" checked>
<label class="input--radio-label trade t5"
for="tradeToggle">
Trade
</label>
<input class="input--radio-btn hosp t5"
type="radio"
id="hospToggle"
name="TradeAccountType"
value="Hospitality">
<label class="input--radio-label hosp t5"
for="hospToggle">
Hospitality
</label>
<input class="input--radio-btn whole t5"
type="radio"
id="wholesaleToggle"
name="TradeAccountType"
value="Wholesale">
<label class="input--radio-label whole t5"
for="wholesaleToggle">
Wholesale
</label>
</div>Submit Button
submit
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: "button button--primary"
value: "", // default: nil
text: "", // default: 'Submit'
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-input-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 }} p6"> </p>