Inline Fields and Field Caps

‹ Back

You can attach caps to fields using the form-inline wrapper class and the form-inline--cap class for the caps.

$
<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_single_cap"><abbr title="required">*</abbr> Single cap</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">$</div>
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[single_cap]" id="test_form_single_cap" />
  </div>
</div>

Caps can appear on either side:

$
.00
<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_double_cap"><abbr title="required">*</abbr> Double cap</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">$</div>
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[double_cap]" id="test_form_double_cap" />
    <div class="form-inline--cap">.00</div>
  </div>
</div>

Caps can be buttons, you don't need a form-inline--cap class. 

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_capped_button"><abbr title="required">*</abbr> Capped button</label>  </div>  
  <div class="form-inline">
    <input class="string required" required="required" aria-required="true" placeholder="my@email.com" type="text" name="test_form[capped_button]" id="test_form_capped_button" />
    <button type="button" class="button">Subscribe</button>
  </div>
</div>

Caps can include icons and work fine with buttons in the mix too:

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_icon_cap_and_capped_button"><abbr title="required">*</abbr> Icon cap and capped button</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>
    </div>
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[icon_cap_and_capped_button]" id="test_form_icon_cap_and_capped_button" />
    <button type="button" class="button button__icon icon--white">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 11px; height: 16px; " class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>    </button>
  </div>
</div>

Select menus can also take part in this pattern:

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_inline_select"><abbr title="required">*</abbr> Inline select</label>  </div>  
  <div class="form-inline">
    <select class="select required" required="required" aria-required="true" name="test_form[inline_select]" id="test_form_inline_select"><option value=""></option>
<option value="true">Yes</option>
<option value="false">No</option></select>
    <button type="button" class="button">+ Add</button>
  </div>
</div>

You can control the width of them using the regular form--* width classes.

<div class='form--medium control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_short_capped_button"><abbr title="required">*</abbr> Short capped button</label>  </div>  
  <div class="form-inline">
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[short_capped_button]" id="test_form_short_capped_button" />
    <button type="button" class="button button__icon icon--white">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 11px; height: 16px; " class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>    </button>
  </div>
</div>

Do be careful when adding caps and/or sizing your field. By default the input field will grow or shrink to fix the button or caps in the container.

Caps and buttons will not get smaller.

This can mean that the input fields are perfectly happy being reduced to zero pixel widths.

Consider this when implementing caps, you may need to alter the layout at a certain breakpoint to ensure that the user experience isn't poorly affected.

<div class="inputs">
  <div class='form--x-small control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_just_dont"><abbr title="required">*</abbr> Just dont</label>  </div>  
    <div class="form-inline">
      <input class="string required" required="required" aria-required="true" type="text" name="test_form[just_dont]" id="test_form_just_dont" />
      <button type="button" class="button">Subscribe</button>
    </div>
</div></div>

You can use this pattern to create flush inline sibling fields:

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_inline_siblings"><abbr title="required">*</abbr> Inline siblings</label>  </div>  
  <div class="form-inline">
    <input class="string required" required="required" aria-required="true" placeholder="First Name" type="text" name="test_form[inline_siblings_one]" id="test_form_inline_siblings_one" />
    <input class="string required" required="required" aria-required="true" placeholder="Last Name" type="text" name="test_form[inline_siblings_two]" id="test_form_inline_siblings_two" />
  </div>
</div>

Why not add an input, select menu with a sizing class AND two buttons?

Take note you can also provide a form-* sizing class to the sibling fields to control their width.

Again take responsive considerations if doing something like this.

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_capped_sibling_fields_with_buttons"><abbr title="required">*</abbr> Capped sibling fields with buttons</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>
    </div>
    <input class="string required" required="required" aria-required="true" placeholder="Search terms" type="text" name="test_form[capped_sibling_fields_with_buttons_one]" id="test_form_capped_sibling_fields_with_buttons_one" />
    <select class="select required form--auto" required="required" aria-required="Please select..." name="test_form[capped_sibling_fields_with_buttons_two]" id="test_form_capped_sibling_fields_with_buttons_two"><option value="">Please select...</option>
<option value="Everything">Everything</option>
<option value="Blogs">Blogs</option>
<option value="Pages">Pages</option>
<option value="Events">Events</option></select>
    <button type="button" class="button__confirm">Search</button>
    <button type="button" class="button__cancel">Cancel</button>
  </div>
</div>