Forms - Groups | Crossroads Digital Design Kit

UI Components / Forms

Input Addon

<div class="form-group">
  <label class="sr-only" for="customAmount">Amount (in dollars)</label>
  <div class="input-group input-group-block input-group-left">
    <span class="input-group-addon">
      <svg class="icon" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#usd"></use>
      </svg>
    </span>
    <input class="form-control" name="customAmount" placeholder="Enter Amount" value="" type="customAmount">
  </div>
</div>

Input Button


<div class="input-group">
  <input class="form-control" placeholder="First Name" type="text">
  <span class="input-group-btn">
    <button class="btn btn-secondary" type="submit">
      Submit
    </button>
  </span>
</div>
<hr>
<div class="input-group">
  <input class="form-control" placeholder="Search" type="text">
  <span class="input-group-btn">
    <button class="btn btn-secondary" type="submit">
      <svg class="icon icon-1" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#search"></use>
      </svg>
    </button>
  </span>
</div>

2-Column Input Row

<div class="row">
  <div class="form-group col-xs-6">
    <label class="sr-only" for="first_name">First Name</label>
    <input class="form-control" name="first_name" placeholder="First Name" value="" type="first_name">
  </div>

  <div class="form-group col-xs-6">
    <label class="sr-only" for="last_name">Last Name</label>
    <input class="form-control" name="last_name" placeholder="Last Name" value="" type="last_name">
  </div>
</div>

3-Column Input Row

<div class="row">
  <div class="form-group col-xs-4">
    <label class="sr-only" for="cc_exp">Month/Year</label>
    <input class="form-control" name="cc_exp" placeholder="MM/YY" value="" type="cc_exp">
  </div>

  <div class="form-group col-xs-4">
    <label class="sr-only" for="cc_ccv">CVV Number</label>
    <input class="form-control" name="cc_ccv" placeholder="CVV" value="" type="cc_ccv">
  </div>

  <div class="form-group col-xs-4">
    <label class="sr-only" for="cc_zip">Zip Code</label>
    <input class="form-control" name="cc_zip" placeholder="Zip Code" value="" type="cc_zip">
  </div>
</div>

Input with Clickable Addon

In some cases, an input may need to have interactive elements (like buttons) nested within itself. These elements are expected to share the same validation and focus states of its input parent. To achieve this effect, a class of .with-icon-btn is added to the .input-group component.

<form action="." class="input-group-flex">
  <div class="input-group with-icon-btn">
    <input class="form-control" placeholder="Location" type="search">
    <div class="icon-btn-wrapper"></div>
    <span class="addon-btn">
      <button type="button">
        <svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/svgs/icons.svg#close-thin" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
        </svg>
      </button>
    </span>

    <span class="addon-btn">
      <button type="button">
        <svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/svgs/icons.svg#equalizer" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
        </svg>
      </button>
    </span>
  </div>
</form>

Input with Clickable Addon and Input Button

The component above can be expanded upon, including a commonly used Bootstrap element called an .input-group-btn, which is a nice way to say "a button that looks like it's attached to an input." But because this element is already doing some funky stuff with the embedded icon buttons, a class of .with-input-group-btn needs to be added with the .with-icon-btn class to ensure the appropriate layout is rendered.

<form action="." class="input-group-flex">
  <div class="input-group with-icon-btn with-input-group-btn">
    <input class="form-control" placeholder="Keyword" type="text">
    <div class="icon-btn-wrapper"></div>
    <span class="addon-btn">
      <button type="button">
        <svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/svgs/icons.svg#close-thin" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
        </svg>
      </button>
    </span>

    <span class="addon-btn">
      <button type="button">
        <svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/svgs/icons.svg#equalizer" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
        </svg>
      </button>
    </span>

    <span class="input-group-btn">
      <button class="btn btn-secondary" type="submit">
        <svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/svgs/icons.svg#search" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
        </svg>
      </button>
    </span>
  </div>
</form>