Input

Default

Basic .Input element for styling <input>

<input class="Input" type="text" placeholder="Basic Input">

Large

.Input--large modifier creates a taller input with a larger font-size that corresponds with other large elements (button, select). Good for mobile screens since it has a 16px font size and won't cause the screen to zoom.

<input class="Input Input--large" type="text" placeholder="Large Input">

Disabled 

<input class="Input" type="text" disabled placeholder="Disabled Input">

Show Hide 

<label class="u-block u-spaceBottomXs u-fontSizeLg">Password:</label>
<div class="u-posRelative">
  <input class="Input Input--large Input--showHide" type="password" placeholder="8+ characters">
  <button type="button" class="Input-showHideButton">
    Show
  </button>
</div>

<div class="u-spaceTopLg">
  <label class="u-block u-spaceBottomXs ">Password:</label>
  <div class="u-posRelative">
    <input class="Input Input--showHide" type="password" placeholder="8+ characters">
    <button type="button" class="Input-showHideButton">
      Show
    </button>
  </div>
</div>