in available credit

Go Back
skip navigation

Nice! You’ve got 15% off.
(0)

Form Fields

Examples of all our form fields with variations displayed or explained. The liquid include is here for our internal needs and the markup is aavailable for collaborators.

Jump to:

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>
Liquid error (layout/theme line 479): Could not find asset snippets/nav-mobile-2.liquid
    • Your Cart

    Hold Up!
    Stop Right There.     Hold Up!
    Stop Right There.

    Sorry, where do you think you’re going? There’s still enough time for 15% off. Sorry, where do you think you’re going? There’s still enough time for 15% off.

    Start Saving Now Start Saving Now

    Time is running out

    Items in your cart are moving fast! Get them before somebody else does.

    Checkout

    Brooklinen is collecting your identifiers and other personal information for the purpose of processing your purchase and to send you updates, news, offers and other promotional communications as described in our CCPA Notice to California Residents. To exercise your right to direct Brooklinen not to sell your personal information, please visit Do Not Sell My Info .

    Accept Cookies